jQuery學習筆記2：選擇器

1    簡單選擇器

<a href="http://s3.51cto.com/wyfs02/M01/11/F9/wKioL1Ls-DegPOSGAAGjjn8kBVU956.jpg" target="_blank"></a>

               $('#box&gt;p').css('color','red')                      //直接相鄰兒子p标簽

傳回選擇器選擇元素個數方法：length屬性或size()方法。

   jQuery具有容錯功能：

if (document.getElementById('pox')) {

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

}

等效于

if ($('#pox').size() &gt; 0) {

   $('#pox').css('color', 'red');

也可以轉換為DOM對象方式來判斷，有值時傳回值為object對象，無值時傳回值為undefined

if ($('#pox').get(0)) {

   ...

if ($('#pox')[0]) {

2    進階選擇器

<a href="http://s3.51cto.com/wyfs02/M01/11/FA/wKiom1LtAauxfAmTAAGpbGFDu6I322.jpg" target="_blank"></a>

（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');    // &lt;div class="box pox"&gt;&lt;/div&gt;

3    進階選擇器

<a href="http://s3.51cto.com/wyfs02/M02/11/FA/wKiom1LtCaXjllC-AAFuePmC6bk345.jpg" target="_blank"></a>

（1）後代選擇器

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

等效于（find()方法）

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

（2）子選擇器(孫子後失明)

   $('#box &gt; 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').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]屬性選擇器

<a href="http://s3.51cto.com/wyfs02/M00/12/0E/wKiom1L2U8rxVZFdAANdI64i6gg272.jpg" target="_blank"></a>

   //具有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，如需轉載請自行聯系原作者