jQuery学习笔记2：选择器

1    简单选择器

               $('#box>p').css('color','red')                      //直接相邻儿子p标签

返回选择器选择元素个数方法：length属性或size()方法。

   jQuery具有容错功能：

if (document.getElementById('pox')) {
   document.getElementById('pox').style.color = 'red';
}

等效于
if ($('#pox').size() > 0) {
   $('#pox').css('color', 'red');
}

也可以转换为DOM对象方式来判断，有值时返回值为object对象，无值时返回值为undefined
if ($('#pox').get(0)) {
   ...
}
if ($('#pox')[0]) {
   ...
}

2    进阶选择器

（1）群组选择器：

   $('div, p, strong').css('color', 'red');

（2）后代选择器

   $('ul li a').css('color', 'orange');

（3）通配符选择器

   $('*').css('color', 'red');

备注：在全局范围使用*号，会极大的消耗资源，所以不建议在全局使用。通配选择器一般运用在局部的环境内。

   $('ul li *').css('color', 'red');

（4）在ID和class中指明元素前缀
   $('div.box').css('color', 'red');   //限定必须是.box元素，获取必须是div

（5）在同一个DOM节点声明多个类

   $('.box.pox').css('color', 'green');    // <div class="box pox"></div>

3    高级选择器

（1）后代选择器

   $('#box p').css('color', 'red');

等效于（find()方法）

   $('#box').find('p').css('color', 'red');

（2）子选择器(孙子后失明)

   $('#box > p').css('color', 'red');

等效于（children()方法）

   $('#box').children('p').css('color', 'red');

(3)next选择器（下一个同级节点）

   $('#box + p').css('color', 'blue');

等效于（next()方法）

   $('#box').next('p').css('color', 'blue');

(4)nextAll选择器（后面所有同级节点）

$('#box ~ p').css('color', 'orange');

等效于（nextAll()方法）

   $('#box').nextAll('p').css('color', 'orange');

备注：在find()、children()、next()和nextAll()方法，若不传递参数，相当于传递了“*”，即任何节点，建议不要使用。

   $('#box').next('')       //等效于$('#box').next('*')

（5）同级上一个元素prev() 
   $('#box').prev('p').css('color', 'red');
（6）同级所有上面的元素prevAll()
   $('#box').prevAll('p').css('color', 'red');

（7）上下同级所有元素siblings()

   $('#box').siblings('p').css('color', 'red');

等效于

   $('#box').prevAll('p').css('color', 'red');

   $('#box').nextAll('p').css('color', 'red');

（8）同级下直到指定元素终止的所有同级元素nextUntil()
   $('#box').nextUntil('p').css('color', 'red');
（9）同级上直到指定元素终止的所有同级元素prevUntil()
   $('#box').prevUntil('p').css('color', 'red');

（10）执行速度

   $('#box').find('p').css('color', 'red');     //最快

等效于

   $('#box p').css('color', 'red');   

   $('p', '#box').css('color', 'red');

4    a[title]属性选择器

   //具有title属性
   $('a[title]').css('color', 'red');    
   //具有title属性且其值为num1
   $('a[title=num1]').css('color', 'red');    

   $('a[title^=num]').css('color', 'red');    
   $('a[title$=num]').css('color', 'red');    
   $('a[title|=num]').css('color', 'red');    
   $('a[title~=aaa]').css('color', 'red');    
   $('a[title*=num]').css('color', 'red');    
   $('a[bbb][title=num]').css('color', 'red');

     本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1355456，如需转载请自行联系原作者