jQuery 选择器和JavaScript 选择器的技巧与异常原因
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('*');//获取所有元素 for(var i = 0;i < _el.length; i++){//遍历元素集合 if(_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('*');//获取所有元素
for(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迭代操作相结合，也不会多写很多代码
<script type="text/javascript" src="jquery1.8.2.js"></script> <script type="text/javascript"> $(function() { var all = document.getElementsByTagName("*");//JavaScript原生写法，获取元素集合 $(all).css("color","red");//jquery写法字体颜色 }) </script>
参考自《jquery完全开发技术宝典》
