jQuery选择器的使用方法

jQuery 选择器的特点

• jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合，因此 jQuery 选择器允许对 HTML 的单个或多个元素进行操作。
• jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素，并且所有选择器都以美元符号开头：$()。
• jQuery 中除了基于已经存在的 CSS 选择器，它还有一些自定义的选择器。

理解父子关系
　　下面六个选择器，都是从父元素中选择子元素

• $('.child', $parent)
• $parent.find('.child')
• $parent.children('.child')
• $('#parent > .child')
• $('#parent .child')
• $('.child', $('#parent'))

1、下面这条语句的意思是，给定一个DOM对象，然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child')，这会导致一定的性能损失。它比最快的形式慢了5%-10%

$('.child', $parent)

2、这条是最快的语句。.find()方法会调用浏览器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度较快

$parent.find('.child')

3、这条语句在jQuery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%

$parent.children('.child')

4、jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选.child，然后再一个个过滤出父元素#parent，这导致它比最快的形式大约慢70%

$('#parent > .child')

5、这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%

$('#parent .child')

6、jQuery内部会将这条语句转成$('#parent').find('.child')，比最快的形式慢了23%

$('.child', $('#parent'))

所以，最佳选择是$parent.find('.child')。而且，由于$parent往往在前面的操作已经生成，jQuery会进行缓存，所以进一步加快了执行速度