p

p

p

搜索到的元素为

aaa
div

选择器快慢比较：

$('#box').find('p')：这条最快，使用的是原生的getElementById、ByName、ByTagName和querySelectorAll()

$('p', '#box' )：jQuery会自动把这条语句翻译成$('#box').find('p')，这会导致一定的性能损失，它比最快的形式慢了5%~10%

$('#box').children('p')：这条语句在jQuery内部，会使用$sibling()和javascript的nextSibling()方法，一个个遍历节点，他比最快的大约慢50%

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

$('#box p')：这条语句与上一条是同样的情况，但是，上一条只选择直接的子元素，这一条可以选择多级子元素，所以他的速度更慢，大概比最快的慢了77%

$('p', $('#box))：内部会将这条语句翻译成$('#box').find('p')，比最快的形式慢了23%

综上所述，最快的是find()方法，最慢的是$('#box p')这种高级选择器。如果一开始将$('#box')进行赋值，那么jQuery就对其变量进行缓存，那么速度回进一步提高。

var box=$('#box')
var p = box.find('p')

注意：我们应该推荐使用哪种选择器方案呢？其实，使用哪种都差不多，这里我们推荐使用jQuery提供的方法。因为不但方法的速度比高级选择器运行的更快，并且它的灵活性和扩展性要高于高级选择器。使用"+"或"~"从字面上没有next和nextAll更加语义化，更加清晰，jQuery的方法更加丰富，提供了相对的prev和prevAll。毕竟jQuery是编程语言，需要能够灵活的拆分和组合选择器，而使用CSS模式过于死板。所以，如果jQuery提供了独立的方法来替代某些选择器的功能，我们还是推荐优先选择使用独立的方法。

属性选择器

例子：

//HTML代码
a1
a2
a3
a4
a5

//JS代码
$('a[title]')    //选择定义了title属性的a标签元素

$('a[title=a1]') //选择title值为a1的a标签元素

$('a[title^=a]') //选择title属性值以a开头的a标签元素

$('a[title$=a]') //选择title属性值以a结尾的a标签元素

$('a[title|=a]') //选择title属性值以a开头，并且后面有一个“-”的a标签元素，例如:a1

$('a[title!=a1]') //选择有title属性，但值不等于a1的a标签元素

$('a[title~=a1]') //选择具有title属性，且属性值是以一个空格分割的列表。
例如： 
aa
$('a[title~=aaa]')可以匹配到，$('a[title~=bbb]')也可以匹配到，$('a[title~=num1]')也可以匹配到

$('a[title*=aaa]') //类似于正则表达式，选择具有title属性，且属性值中包含aaa字符串的a标签元素

$('a[bbb][title=a1]') //多属性选择器，选择具有bbb属性，并且title属性值为a1的a元素标签

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。