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