jQuery學習筆記3：過濾器

1    基本過濾器

<a href="http://s3.51cto.com/wyfs02/M01/12/29/wKioL1L7THPzPvbUAAP3cNiW_fE213.jpg" target="_blank"></a>

樣例：

   $('li:first').css('background', '#ccc'); //第一個li元素

   $('li:last').css('background', '#ccc');  //最後一個li元素

   $('#box li:last').css('background', '#ccc');    //ul的id為box内的最後一個li元素

   $('ul:first li:last').css('background', '#ccc');  //第一個ul内的最後一個li元素

   $('li:not(.red)').css('background', '#ccc');    //li的class不為red的所有li元素

   $('li:even').css('background', '#ccc');  //索引為偶素的li元素

   $('li:odd').css('background', '#ccc');    //索引為奇數的li元素

   $('li:eq(2)').css('background', '#ccc');  //li索引為2即第三個li元素

   $('li:eq(-2)').css('background', '#ccc');  //倒數第二個li元素

   $('li:gt(3)').css('background', '#ccc');   //索引大于3的所有li元素

   $('li:lt(2)').css('background', '#ccc');    //索引小于2的所有li元素

   $('div :header').css('background', '#ccc');  //頁面所有h1~h6元素

   $('input').get(0).focus();            //初始化激活input元素為焦點

   $(':focus').css('background', 'red');  //被焦點的元素

對應的專用方法：

   $('li').first().css('background', '#ccc');

   $('li').last().css('background', '#ccc');

   $('li').not('.red').css('background', '#ccc');

   $('li').eq(2).css('background', '#ccc');

   備注：索引值是從0開始的，從上向下順序遞增的；若索引值為複數，索引值是從-1開始的，從下向上遞減的。

2    内容過濾器

<a href="http://s3.51cto.com/wyfs02/M01/12/29/wKioL1L7UPiyzSvTAAHC1fZLDjo402.jpg" target="_blank"></a>

樣例：    

   $('div:contains("文本1")').css('background', '#ccc');    //選擇含有”文本1“内容的div元素

   $('div:empty').css('background', '#ccc').css('height','20px');   //選擇空div元素

   $('ul:has(.red)').css('background', '#ccc');  //選擇子元素含有class為red的所有ul元素

   $('div:parent').css('background', '#ccc');     //選擇非空div元素

方法：

   $('ul').has('.red').css('background', '#ccc');  

操作節點方法：

   $('li').parent().css('background', '#ccc');    //擷取目前元素的父元素

   $('li').parents().css('background', '#ccc');  //擷取目前元素的父元素及祖先元素

   $('li').parentsUntil('body').css('background', '#ccc');  //選擇目前元素父元素遇到div父元素停止

3    可見性過濾器

<a href="http://s3.51cto.com/wyfs02/M01/12/29/wKiom1L7Vc_CM0SqAADfBjbc7Q8517.jpg" target="_blank"></a>

   注意：hidden過濾器一般包含的内容為：（1）css樣式為display:none（2）input表單類型為type="hidden"（3）元素屬性visibility:hidden

   alert($('div:hidden').size());

   $('div:hidden').css('background', '#ccc').show(1000);

   alert($('div:visible').size());

4    子元素過濾器

<a href="http://s3.51cto.com/wyfs02/M02/12/2B/wKiom1L7eJfTPfFuAAIK6pFFVds122.jpg" target="_blank"></a>

   備注：索引值是從1開始計算的。

樣例：  

   $('li:first-child').css('background', '#ccc'); //每個父元素第一個li元素

   $('li:last-child').css('background', '#ccc');  //每個父元素最後一個li元素

   $('li:only-child').css('background', '#ccc');  //每個父元素隻有一個li元素

   $('li:nth-child(even)').css('background', '#ccc');  //每個父元素奇數li元素

   $('li:nth-child(odd)').css('background', '#ccc');  //每個父元素偶數li元素

   $('li:nth-child(2)').css('background', '#ccc');   //每個父元素第二個li元素

   $('li:nth-child(2n)').css('background', '#ccc');  //每個父元素第2、4、6、8...個li元素

5    其他方法

<a href="http://s3.51cto.com/wyfs02/M01/12/2B/wKioL1L7hsbSVEBHAAJHPmaT6q4348.jpg" target="_blank"></a>

   alert($('.red').is('li')); //檢測元素li的class值是否為red    

   alert($('.red').is($('li')));  //jQuery對象集合，檢測li元素的class值是否為red

   alert($('.red').is($('li').get(2)));  //DOM對象，檢測第三個li元素的class值是否為red

   alert($('.red').is($('li').eq(2)));  //jQuery對象，單個，檢測第三個li元素的class值是否為red

   alert($('.red').is(function () {

       return $(this).attr('title') == '清單3';

   }));    

   注意：必須使用$(this)來表示要判斷的元素，否則，不管function裡面是否傳回true或false都和調用的元素無關了。

  alert($('li').eq(2).hasClass('red'));  //和is功能類似，但隻能傳遞class

   $('li').slice(0,2).css('color', 'red');  //前兩個變成紅色

   $('li').slice(2).css('color', '#ccc');  //從第三個開始到最後都標明

   $('li').slice(0, -2).css('color', '#ccc');  //從倒數第三個位置開始，向前標明所有

   $('li').slice(2, -2).css('color', '#ccc');  //除前兩個和末尾兩個之外所有都標明

   alert($('#box').find('li').end().get(0));  //可能是并行節點，也可能是父節點

   alert($('#box').find('li').parent().get(0));  //父節點

   $('li').filter('.red, :first-child, :last-child').css('background', '#ccc');

   $('li').filter(function () {

       return $(this).attr('class') == 'red' &amp;&amp; $(this).attr('title') == '清單3';

   }).css('background', '#ccc');

     本文轉自stock0991 51CTO部落格，原文連結：http://blog.51cto.com/qing0991/1358549，如需轉載請自行聯系原作者