思洋互动网站建设学前班

jQuery选择器应用优化正确使用选择器引擎对于提高页面性能起了至关重要的作用。使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。在传统用法中，最常用的简单选择器包括ID选择器、Class选择器和类型标签选择器。其中ID选择器是速度最快的，这主要是因为它使用JavaScript的内置函数getElementById()；其次是类型选择器，因为它使用JavaScript的内置函数getElementsByTag()；速度最慢的是Class选择器，其需要通过解析 HTML文档树，并且需要在浏览器内核外递归，这种递归遍历是无法被优化的。
就需求分析，CSS的选择器是为了通过语义来渲染样式，而jQuery的选择器只是为了选出一类DOMElement，执行逻辑操作。但是，在实际开发中，Class选择器是使用频率最高的类型之一(如表2.1所示)。
表2.1  jQuery选择器使用频率列表

选 择 器	统计频率
#id	51.290%
.class	13.082%
tag	6.416%
tag.class	3.978%
#id tag	2.151%
tag#id	1.935%
#id:visible	1.577%
#id .class	1.434%
.class .class	1.183%
*	0.968%

续表

广州网站建设,网站建设,广州网页设计,广州网站设计

选 择 器	统计频率
#id tag.class	0.932%
#id:hidden	0.789%
tag[name=value]	0.645%
.class tag	0.573%
[name=value]	0.538%
tag tag	0.502%
#id #id	0.430%
#id tag tag	0.358%

Class选择器在文档中使用频率靠前，这无疑会增加系统的负担，因为每使用一次Class选择器，整个文档就会被解析一遍，并遍历每个节点。因此，建议读者在使用jQuery选择器时，应该注意以下几个问题。
第一，多用ID选择器。
多用ID选择器，这是一个明智的选择。即使添加"在"ID选择器，也可以从父级元素中添加一个ID选择器，这样就会缩短节点访问的路程。
第二，少直接使用Class选择器。
可以使用复合选择器，例如使用tag.class代替.class。文档的标签是有限的，但是类可以拓展标签的语义，那么大部分情况下，使用同一个类的标签也是相同的。
当然，应该摒除表达式中的冗余部分，对于不必要的复合表达式就应该进行简化。例如，对于#id2 #id1 或者 tag#id1表达式，不妨直接使用#id1即可，因为ID选择器是惟一的，执行速度最快。使用复合选择器，相反会增加负担。
第三，多用父子关系，少用嵌套关系。
例如，使用parent>child代替parent child。因为">"是child选择器，只从子节点里匹配，不递归。而" "是后代选择器，递归匹配所有子节点及子节点的子节点，即后代节点。
第四，缓存jQuery对象。
如果选出结果不发生变化的话，不妨缓存jQuery对象，这样就可以提高系统性能。养成缓存jQuery对象的习惯可以让你在不经意间就能够完成主要的性能优化。
例如，下面的用法是低效的。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. for (i = 0 ; i < 100 ; i ++ ) ... {   
2.       var myList = $( ' .myList ' );   
3.      myList.append(i);   
4. }  

而使用下面的方法先缓存jQuery对象，则执行效率就会大大提高。

1. var myList = $( ' .myList ' );   
2. for (i = 0 ; i < 100 ; i ++ ) ... {   
3.      myList.append(i);   
4. }