jQuery 选择器和JavaScript 选择器的技巧与异常原因_H5之家

jquery的选择器借鉴了css选择器，核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法，但是他封装了2个方法，让jquery选择器变得简洁易用。

而且避免了易错问题。

jquery选择器返回的永远是一个数组对象，如果没有找到指定的元素，就会返回一个空的数组，

所以判断一个jquery对象是否存在时，不能用如下语句

if($("tr")){ 　　//code }

而应该用数组长度来判断，如下语句

if($("tr").length > 0){ //code }

而如果使用getElementById()和getElementsByTagName()方法时，就容易抛出异常，因为JavaScript没有内置类选择器方法，现在拓展一个类选择器方法，来说明抛出异常的原因

document.getElementsByClassName = function(className){ var el = []; _el = document.getElementsByTagName('*');((_el[i].className == className){//获取相同类名的元素 el[el.length] = _el[i]; } } return el; }

如果传入的类名没有被找到，那么el就是一个空值。返回的就是一个异常。

封装好了getElementsByClassName()方法之后，，就能把他当做内置的JavaScript选择器使用啦！（——假装是内置的！！）

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery1.8.2.js"></script> <title>Document</title> <script type="text/javascript"> document.getElementsByClassName = function(className){ var el = []; _el = document.getElementsByTagName('*');(var i = 0;i < _el.length; i++){ if(_el[i].className == className){ el[el.length] = _el[i]; } } return el; } window.onload = function() { var red = document.getElementsByClassName("red"); for(var i = 0;i< red.length;i++){ red[i].style.color = "red"; } } </script> </head> <body> <div class = 'red'>div1</div> <div>div2</div> <div class = 'red'>div3</div> </body> </html>

虽然这个自定义的方法和jquery选择器的效果是一样的，但从执行效率的角度考虑，使用自定义的getElementsByClassName()方法不如使用jquery选择器。因为作为jQuery技术框架，他的代码经过了优化处理，执行速度要比自定义方法的要快（执行效率是非常重要的）

小技巧！

从代码的执行效率和程序员的开发效率权衡，其实可以将JavaScript原生方法和jquery迭代操作相结合，也不会多写很多代码

参考自《jquery完全开发技术宝典》