可以灵活的对页面中的JS代码片断进行测试，使用的时候只要将FireJSPT的类库文件导入即可：
<script type="text/javascript" src="firejspt.js"></script>
使用FireJSPT，本博对jQuery的常用的选择器在Firefox下做了一个测试，测试环境如下：
•操作系统：Windows 7旗舰版本
•浏览器：Firefox 3.6.13
•插件：Firebug 1.60(未安装其他插件)
•jQuery版本：1.44
层级选择器(ul li)和find的对比
HTML结构如下：
| 代码如下 | 复制代码 |
|
<ul class="list"> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <!--省略455个li标签--> <li><a href="#">jQuery常用选择器性能测试</a></li> </ul> |
|
首先要感谢redky同志的提醒，原来我的测试过于片面导致测试结果很受质疑，我现在尽量模拟真实的环境来重新进行测试。上面的HTML代码复制了500个li标签，分别写了两个函数testFun1和testFun2，并分别绑定一个点击事件，JavaScript代码如下：
/*引入1.44版的jQuery的库文件*/
| 代码如下 | 复制代码 |
|
<script type="text/javascript" src="jquery.js"></script> /*引入FireJSPT的库文件*/ <script type="text/javascript" src="firejspt.js"></script> <script type="text/javascript"> function testFun1(){ $(".list a").click(function() { alert("Hello World"); }); } function testFun2(){ /*分别调用2个函数进行测试*/ |
|
测试结果如下图：
从上图可以看出，如果页面中只有一个ul.list的DOM节点，find的速度比层级选择器的要快。再把上面的整个ul.list>li的结构复制2次，复制后的结构如下：
| 代码如下 | 复制代码 |
| <ul class="list"> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <!--省略455个li标签--> <li><a href="#">jQuery常用选择器性能测试</a></li> </ul> <ul class="list"> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <!--省略455个li标签--> <li><a href="#">jQuery常用选择器性能测试</a></li> </ul> <ul class="list"> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <li><a href="#">jQuery常用选择器性能测试</a></li> <!--省略455个li标签--> <li><a href="#">jQuery常用选择器性能测试</a></li> </ul> |
|
测试结果图：
从上图可以看出，如果有多个ul.list这样的DOM节点，层级选择器的速度又比find快。那么大致可以得出一个这样的结论，如果页面中的DOM节点是唯一的，那么使用find来查找它的子节点速度比层级选择器要快，如果页面中有多个类名相同的节点，那么使用find来查找它的子节点速度比层级选择器要慢。
层级选择器(ul > li)和children的对比
用上面同样的方法来进行测试，改动后的JavaScript代码如下：
| 代码如下 | 复制代码 |
|
function testFun1(){ $(".list > li").click(function() { alert("Hello World"); }); } function testFun2(){ |
|
只有一个ul.list的DOM节点的测试结果图：
三个ul.list的DOM节点测试结果图：
这个差距不大，children稍胜一筹，这个结果与原来用for循环的测试方法完全相反。
id和class选择器的对比
HTML结构如下：
| 代码如下 | 复制代码 |
|
<div id="test">jQuery常用选择器性能测试</div> <div class="test">jQuery常用选择器性能测试</div> |
|
改动后的JavaScript代码如下：
| 代码如下 | 复制代码 |
|
function testFun1(){ for(var i = 0;i < 1000;i ){ $("#test").click(function() { alert("Hello World"); }); } } function testFun2(){ |
|
测试结果图：
了解JavaScript的都知道id选择器肯定比class选择器快，至于快多少这下应该有个比较靠谱的答案了。
Jquery选择器常用例子
获得只有Name的隐藏Input的值
| 代码如下 | 复制代码 |
|
$("input[type=hidden][name=隐藏Input的名称]").val() 或 $("input[name=隐藏Input的名称]:hidden").val() |
|
radio设值
| 代码如下 | 复制代码 |
|
$("input[type=radio][value=值]").attr("checked",true); eg.$("input[type=radio][value=${order.paymentMethod}]").attr("checked",true); |
|
jQuery有非常强大的Sizzle引擎来实现选择器，jQuery做了优化，他们能很好的工作，你一般不必担心太多。然而，我们可以稍微做一些改进，将可以使你的脚本略有提高。
一般在jquery中能不要用Sizzle引擎就不要用，当然前面说了只要有可能，就尽量使用.find()方法。比如：
| 代码如下 | 复制代码 |
| $('#someDiv p.someClass').hide(); $('#someDiv').find('p.someClass').hide(); |
|
上面两行代码执行的结果是完全一样的，但是下面一句的效率要比上面一句的执行效率高。
现代浏览器（除IE6，IE7）都有QuerySelectorAll支持，能允许你像CSS选择器一样获取对象，而不需要用到jQuery中的Sizzle引擎。jQuery会在使用自己的引擎之前检查是否存在这个函数。
对于IE6/IE7，就需要jQuery使用Sizzle引擎，jQuery会把你的选择器转化成一个数组，并且通过从右往左来迭代匹配。通过正则表达式匹配页面每一个元素，所以你的可以尽量减少选择器的层级，尽可能的使用最右边的选择器，比如使用ID选择器等；这个规则和我们的css的查找规则是一直的，如果你要优化css选择器也要知道这个规则：从右往左来迭代匹配！
尺度把握：
1.保持代码简单
2.尽可能的使用find()查找，使用浏览器的原生查找函数
3.尽可能使用最右边的选择器，比如ID等
或条件：（用逗号隔开）
如：
| 代码如下 | 复制代码 |
| $("#tableList").find("tr.row_even,tr.row_odd").click(function() { alert('test'); }); |
|