jquery选择器的一些处理

本文不讨论用jquery选择器具体怎么选择页面元素，而讨论选择元素后后的一些处理

jquery的选择器选择元素的时候，即使没有选择到指定的对象，页面并不会报错，例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
	<div>
	</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
	$("#a").css("color","red");
</script>
</body>
</html>

　　

这个例子中，页面上没有id=”a”的元素，对$（”#a”）对象操作，控制台并不会报任何错误。容错性好，这样的好处是所有的对象操作可以写在一个js文件里而不报错。坏处是调试不太方便，选择器里写错了不容易发现，比较坑。

可以看出，id=”a”的元素不存在时，发回一个n.fn.init对象，里面包含两项。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
	<div>
	</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
	console.log($("#a"));//页面并没有id="a"的元素，控制台打印如下：n.fn.init {context: document, selector: "#a"}
</script>
</body>
</html>

　　

选择器有没有选中元素，不能用if($(“select”))来判断了，反面例子

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
	<div>
	</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
if($("#a"))
{
	alert("不空")//弹出这个，不是我们想要的！！！
}else
{
	alert("空");
}
</script>
</body>
</html>

　　

可以看出，这样得到的结果是错的。有没有选择到元素，应该通过jquery的length属性的值，即元素的长度来，来判断，这个值为零，没有选中元素：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
	<div>
	</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
if($("#a").length)
{
	alert("不空")
}else
{
	alert("空");//弹出这个，这是我们想要的结果
}
</script>
</body>
</html>

　　

总结：判断选择器有没有选到元素，要用if($(“select”).length)判断