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)判断

原文地址:https://www.cnblogs.com/xiaochongchong/p/5497343.html