jQuery 选择器和JavaScript 选择器的技巧与异常原因
Posted 进击的前端狗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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完全开发技术宝典》
以上是关于jQuery 选择器和JavaScript 选择器的技巧与异常原因的主要内容，如果未能解决你的问题，请参考以下文章