专栏首页用户7363577的专栏不好理清的JS基础知识和CSS3选择器小结-第一章

不好理清的JS基础知识和CSS3选择器小结-第一章

写在前面

我们在写看别人的源码或者面试的时候经常会遇到一个比较奇葩的js问题或者是css3的问题,比如下面这几个问题可以尝试回答一下:

  • null属于什么类型?
  • 为什么要定义一个变量初始化为null?
  • 为什么null是基本数据类型,当使用typeof null的时候却返回了object?
  • object又属于引用数据类型,为什么基本数据类型的null又属于他呢?这不是矛盾吗?

在我们看来可能很少会去关注的一些问题,但是面试或者源码中经常会遇到,今天我们就先简单的捋一捋,其实不是问题奇葩,还是我们的基本功不扎实导致的,一起来看看吧! 没进行写之前明确几个一句话:

typeof 和 instanceof 这两个功能就是完全不一样的运算符。typeof 是为了检查数据类型,instanceof是为了看一个变量是否是某个对象的实例

  • typeof 的目的,是检查数据类型,而它的输出,非常确定的只有如下几个
  • undefined (变量定义了但是没有进行赋值)
  • object (对象类型)
  • boolean (布尔类型)
  • number (任意数字,这里包含所有的数字,包括小数和负数)
  • string (字符串类型)
  • function (函数类型)
  • symbol(新的数据类型,可以自行百度)

数据类型的判断

  • typeof

typeof可能是我们使用最多的一种方式了,它可以判断的类型有很多,但是不管判断任何数据类型他的返回都是以string的形式进行返回,但是却不可以进行判断null和数组,后面我们会说一下原因,下面我们看几个例子:

var a 
console.info(typeof a ,"typeof a") //undefined
console.info(typeof a === 'undefined' ,"typeof a === 'undefined'") //true
var fun = function(){}
console.info(typeof fun === 'function' ,"typeof fun === 'function'") //true

上面的三个简单的例子可以看出来typeof是可以进行数据类型的判断的,只是我们进行判断是不是和对应的类型判断的时候需要加上引号进行比较,原因是typeof的返回永远是string的形式进行的!

  • instanceof

instanceof一般我们用来判断引用数据类型,或者直接点用来判断对象的,下面看一个很好玩的例子:

var obj1= {
	b : [1,"a",console.info],
	c : function(){
		return function(){
			   "this is clearlove"
					}
				}
			}
console.info(obj1 instanceof Object ,"obj1 instanceof Object") //true
console.info(obj1.b instanceof Object ,"obj1.b instanceof Object") //true
console.info(obj1.c instanceof Object , "obj1.c instanceof Object") //true
console.info(obj1.b instanceof Array ,"obj1.b instanceof Array") //true
console.info(obj1.c instanceof Function ,"obj1.c instanceof Function") //true
var a= new function(){}
console.info(typeof a) //object
var a = function(){}
console.info(typeof a) //function

ECMAScript 的Function实际上就是一个功能完整的对象。而function这个关键字是用来创建所有对象的构造函数或者普通函数要用的关键字ECMAScript如何定义类和对象,提问者var a=new function(){}实际上是用构造函数的方法创建了一个匿名对象的实例,而并不是系统内置对象Function的实例,所以a instanceof Function返回false,typeof返回"object"。

  • ===

这个就是直接看数据是不是相同的同时还要看数据类型是不是相同,都满足的时候===才会是true

null和undefined

这个就是比较老生常谈的一个话题了,看了上面的应该知道和理解了这两个的区别了吧

  • null是定义了一个变量并且初始化为null
  • undefined是定义了一个变量但是没有进行初始化
var b = null
console.info(typeof b , "typeof b") //object
console.info(b instanceof Object) //false
console.info(b === null) //true
  • null不可以使用null进行判断,不是语法不支持,而是没有意义,判断出来的是object而不是null,所以一般直接进行===null进行判断一个变量是不是null,Object 是一种对象类型, "object"是一个字符串, 你不定义的话没有意义

特殊的null类型

前面说到null是一种比较特殊的数据类型,它特殊在什么地方呢?当我们使用var a = null的时候其实是传递一个信息,就是这个a是一个对象,但是此时我没有源数据,所以我先初始化一个null,一般代码结束的时候也会进行var b = null,这个时候是进行内存的释放,告诉浏览器的垃圾回收赶紧干活了,将这个**回收掉了!所以说null是一个很重要的数据类型!

css3选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			<p>我是段落1</p>
			<p>我是段落2</p>
			<p>我是段落3</p>
			<p>我是段落4</p>
			<span>我是span</span>
		</div>
		<input type="text" name="" id="" value="" />
		<input type="radio" name="sex" id="" value="" checked="checked"/>
		<input type="radio" name="sex" id="" value="" />
		<input type="button" name="" id="" value="我是button1" />
		<input type="button" name="" id="" value="我是button2" disabled="disabled"/> <br />
		<a href="#a1">点击我id为a1的span会变色</a>
		<span id="a1">我是id为a1的span</span>
		<a href="#a2">点击我id为a2的span会变色</a>
		<span id="a2">我是id为a2的span</span>
	</body>
	<style>
		a{
			text-decoration: none;
		}
		/* :first-of-type 选择该类型元素的第一个子元素 */
		p:first-of-type{
			color : darkred
		}
		/* :last-of-type 选择该元素的最后一个子元素 */
		p:last-of-type{
			color:green
		}
		/* :nth-of-type 选择该类型元素的第几个子元素 */
		p:nth-of-type(2){
			color: yellow;
		}
		/* :nth-last-of-type 从倒叙开始选择改元素的第几个子元素 */
		p:nth-last-of-type(2){
			color:orangered
		}
		/* ::selection 选择用户选中的部分 */
		p::selection{
			/* 用户选中的部分背景色为透明 */
			background-color: transparent;  
		}
		/* :not 选择非用户指定内容的选择器 */
		#div1 :not(p){
			color: #FFFFFF
		}
		/* :root 根结点选择器 */
		:root{
			background: #7E7E7E;
			color: #FFFFFF;
		}
		/* [attr =“value”] 属性选择器 */
		input[type='text']{
			width: 100px;
		}
		/* :enabled 选择状态可用的元素(button,inpout) */
		input[type='button']:enabled{
			border: none;
			background: #008000;
			color: #FFFFFF;
			outline: none;
		}
		/* disabled 选择状态可用的元素(button,inpout) */
		input[type='button']:disabled{
			border: none;
			background: greenyellow;
			color: gray;
		}
		/* :checked 选择状态可用的元素(radio) */
		input[type='radio']:checked::before{
			content: "男";
			color: red;
		}
		/* target 选择器  被当前锚点激活的对应的id的样式 */
		#a1:target{
			color: #008000;
		}
		#a2:target{
			color: red;
		}
	</style>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • H5学习之路之Input类型新特性

    input的输入类型在H5之前已经有很多很广泛的使用了,但是H5其实加入了很多新的属性和验证,提供方便的同时给我们开发带来了更多的是安全性的提升,今天我们就简单...

    何处锦绣不灰堆
  • NodeJS实现一个聊天室

    先说一下为什么写这个东西,最近不是在写NodeJS知识点的梳理嘛,但是我发现梳理的过程着实无聊的要死,虽然已经快梳理一半了,只是还没发布,这个不重要,重要的是不...

    何处锦绣不灰堆
  • 用织梦实现一个从零到可以正常访问的网站--第三章

    我们今天接着把怎么调用导航栏的链接写完,之前两章已经基本上将怎么购买域名,空间,怎么将织梦建起来,还有怎么将代码的样式调好,但是最后我们是发现,什么都好了,只有...

    何处锦绣不灰堆
  • nodejs request module里的json参数的一个坑

    今天工作的时候遇到一个坑,在客户端用nodejs给服务器发送HTTP请求,服务器老是报错:In the context of Data Services an ...

    Jerry Wang
  • 细数二十世纪最伟大的10大算法(Top10)

    [1946: John von Neumann, Stan Ulam, and Nick Metropolis, all at the Los Alamos S...

    IT派
  • MVC4脚本压缩 BundleTable bundles 404错误

    在发布网站的时候,因为使用了MVC4的新特性BundleTable,造成访问的时候js和css报了404错误,

    Isaac Zhang
  • BP神经网络识别性别

    1. 数据读入 function [ data,label ] = getdata( xlsfile ) % [data,label]=getdata('se...

    瓜大三哥
  • 细数 20 世纪最伟大的十大算法

    英文:Barry A. Cipra 译者:JULY 链接:blog.csdn.net/v_july_v/article/details/6127953 发明...

    智能算法
  • 细数20世纪最伟大的10大算法

    [1946: John von Neumann, Stan Ulam, and Nick Metropolis, all at the Los Alamos S...

    哲洛不闹
  • Linux中断 - IDT

    中断描述符表简单来说说是定义了发生中断/异常时,CPU按这张表中定义的行为来处理对应的中断/异常。

    扫帚的影子

扫码关注云+社区

领取腾讯云代金券