[转] 养成使用jQuery Sizzle选择器的良好习惯

旧习惯
我 们最常用的简单选择器包括"id选择器"、"类选择器"、"标签选择器"，毫无疑问的是id选择器有着最好的速度。这取决于dom内置的函数 getElementById,其次是标签选择器，使用的是dom内置的函数getElementsByTag，最差的是类选择器，其需要通过正则解析 html，并且需要在浏览器内核外递归，这种递归遍历是无法被优化的。
就需求来说，css中选择器是为了通过语义来渲染样式，而jQuery中大 部分情况只是为了选出一类DOMElement，加以同一逻辑的操作。而在"最常用的选择器使用"中，类选择器以13.082%的使用率排在第二位。也就 是说在13.082%的情况下，整个document的html被解析了一遍，并递归到DOM树的叶子节点。这部分无意义的性能损耗令人发指。

如果养成以上四个习惯，我想我们的选择器性能已经优化了七成了。
下面介绍一些其他的选择器表达式建议。
其他建议习惯
1.摒除表达式中的冗余部分,类似于#id2 #id1 或者 tag#id1 的表达式中，都存在冗余部分，实际上只要#id1即可。
2.选择特定的表单元素使用[name=x
虽然name选择器写法上属于属性选择器，但是实际上普通的属性选择器使用的是递归遍历子节点来匹配，而name选择器解析优先级更高，并调用DOM内置 函 数getElementsByName。虽然在IE和Opera里，指定了name但未指定id的DOMElement也会可以使用 getElementById得到，但是在jQuery里，为了保证跨浏览器，$("#id")会多做一次判断，把这些不一致的结果给过滤掉。所以 name选择器成了jQuery下的唯一选择。
3.选择同一type的input元素使用[:type]
这是唯一符合需要的简单写法。
4.有条件的使用反向选择器,反向选择器是指类似于":not(exp)"的表达式。反向选择器实际上性能并不比同逻辑的正向选择器差很多。而在一些情况 下，为了达到反向选择器的效果， 我们或许要写出很复杂的表达式，或需要添加额外的类，或需要选出结果后再筛选一遍。这都不如使用反响选择器，无论是在性能上还是在保持逻辑的简单上。而 jQuery 1.3里，反向选择器得到了增强，之前只可以接受简单的反向表达式。关于jQuery 1.3的变化
5.有条件的使用prev + next,在语义化的DOM里，我们常常使用结构来为两个DOMElement建立关系，以表达它们对应的实体的意义。
请参考下面的html片段
<div id="entities">
<div id="entityid" class="entity">
<div class="namelabel">name</div>
<div class="name">entityname</div>
</div>
</div>

当我们需要对所有.entity的.namelabel进行操作的的时候，我们可以用$("#entities>div.entity>div.namelabel")来选择。这里的关系就是通过.entity和.namelabel父子节点的结构来建立的。
不过有的时候我们无法选出一个合适的父节点来，例如<dt></dt><dd></dd>，或是<label></label><input/>。
其实相邻节点也是我们惯用的表达关系的结构，而且这种关系用jQuery选择器效率比父子选择器更好。
prev + next用来表示1对1的关系，在1对多的情况下，可以考虑使用prev ~ siblings
结论:jQuery的选择器引擎非常强大，正因为如此，我们才更应该谨慎的并充分的使用它。