Jquery第三章 過濾選擇器
阿新 • • 發佈：2019-01-29
第三章 過濾選擇器
一.基本過濾器
寫法 | 描述 |
$(‘p:first’) | 選取頁面元素內的第一個p元素 |
$(‘p:last’) | 選取頁面元素內的最後一個p元素 |
$(‘p:not(.select)’) | 選取選擇器不是select的p元素 |
$(‘p:even’) | 選取索引是偶數的P元素(索引從0開始) |
$(‘p:odd’) | 選取索引是奇數的p元素(索引從0開始) |
$(‘p:eq(index)’) | 選取索引等於index的p元素(索引從0開始,索引支援負數) |
$(‘p:gt(index)’) | 選取索引>index的p元素(索引從0開始) |
$(‘p:lt(index)’) | 選取索引<index的p元素(索引從0開始) |
$(‘:header’) | 選取標題元素h1~h6 |
$(‘:animated’) | 選取正在執行動畫的元素 |
$(‘input:focus’) | 選取當前被焦點的元素 |
jQuery為常用的過濾器提供了豐富的方法 | |
eq(index) | 獲取是index索引值的元素(索引從0開始,負值從後開始) |
first() | 選取第一個元素 |
last() | 選取最後一個元素 |
not(select) | 選取不是該選擇器的元素 |
用法：
<body> <p>第一個P</p> <p id="select">第二個P</p> <p>第三個P</p><h3>我是h3</h3> <h4>我是h4</h4> <input type="text" value="123"> <script type="text/javascript"> $(function(){ $('p:first').css('color','pink'); // $('p').first().css('color','pink'); $('p:last').css('color','orange'); // $('p').last().css('color','orange'); $('p:not(#select)').css('background','green'); // $('p').not('#select').css('background','green'); $('p:even').css('font-family','華文行楷'); $('p:odd').css('font-family','隸書'); $('p:eq(1)').css('color','red'); // $('p').eq(1).css('color','red'); $('p:gt(1)').css('width','80px'); $('p:lt(1)').css('width','120px'); $(':header').css('color','blue');//全域性查詢 $('h4:header').css('color','peru');//限定了是h4 $('input').focus();//設定頁面重新整理就啟用焦點 $('input:focus').css('color','deeppink') // :focus過濾器必須是網頁初始狀態就已經被啟用的焦點元素,不能是通過滑鼠點選或Tab鍵啟用 }); </script> </body>
二.內容過濾器
寫法 | 描述 |
$(‘:contains(“百度”)’) | 選取含有”百度”文字的元素 |
$(‘:empty’) | 選取不包含子元素或空文字的元素 |
$(‘:has(select)’) | 選取含有該select選擇器的元素(必須是父元素上呼叫,返回的是父元素) |
$(‘:parent’) | 選取含有子元素或文字的元素 |
has() | jQuery提供了一個has()方法作用等同has過濾器 |
jQuery提供了parent相關方法,但與過濾器含義不等同 | |
parent() | 選擇當前元素的父元素 |
parents() | 選擇當前元素的祖先元素(包括父元素) |
parentsUntil() | 選擇當前元素的祖先元素,遇到指定元素則停止 |
用法：
<body> <a href="http://www.baidu.com">百度</a> <p></p> <div> <span>我是第一個span</span> <span id="show">我是第二個span</span> </div><br> <nav style="width:100px;height:100px;background:deeppink"> <p style="width:80px;height:50px;background:orangered"> <span>測試parents</span> </p> </nav> <script type="text/javascript"> $(function (){ $('a:contains("百度")').css('border','double'); $('p:empty').css('background','orange').css('height','50px').css('width','50px'); //必須是塊級元素,width和height才有效 $('div:has(#show)').css('color','peru'); $('div').has('#show').css('width','120px'); //這是在父元素上呼叫,返回的也是父元素。意思就是樣式作用在父元素上 $('div:parent').css('color','red').css('border','dashed');//div作為父親 $('#show').parent().css('background','green');//查詢某元素的父親 //這兩者是有區別的,且color會影響borderColor的顏色 //$('p>span').parents().css('border','groove'); alert($('p>span').parents().length);//4個 alert($('p>span').parents()[3].nodeName);//HTML $('p>span').parentsUntil('body').css('border','groove'); }); </script> </body>
三.可見性過濾器
寫法 | 描述 |
$(‘:hidden’) | 選取所有不可見元素 |
$(‘:visible’) | 選取所有可見元素 |
hidden過濾器一般是包含樣式為display:none。input表單型別為hidden 設定了visibility:hidden的元素,雖然其在物理上是不可見的,但卻保留了物理空間,因此該算是可見元素 | |
用法：
<body> <div style="width:50px;height:50px;background:#ccc;visibility:hidden">我是一個div標籤</div> <div style="height:50px;background:#ccc;display:none;">div</div> <input type="hidden" name="hidden"> <div></div><!--沒有文字或子元素的標籤,不算隱藏元素--> <p>我是一個小小p標籤</p> <script type="text/javascript"> $(function (){ //************************全域性查詢隱藏元素 var count=$(':hidden'); alert(count.size());//7 for(var i=0;i<count.length;i++){ alert(count[i].nodeName); }//HEAD META TITLE SCRIPT DIV INPUT SCRIPT //************************指定查詢隱藏元素 alert($('div:hidden').size()+':'+$('div:hidden').get(0).nodeName);//1:DIV alert($('input:hidden').size()+':'+$('input:hidden').get(0).nodeName);//1:INPUT //************************全域性查詢顯示元素 var visible=$(':visible'); alert($(':visible').length);//5 for(var i=0;i<visible.length;i++){ document.write(visible[i].nodeName+'<br>'); }//HTML BODY DIV DIV P }); </script> </body>
四.子元素過濾器
（注意:子元素過濾器查詢的該元素是作為第幾個孩子元素,返回是該元素也就是孩子）
寫法 | 描述 |
$(‘li:first-child’) | 查詢li作為第一個孩子的元素 |
$(‘li:last-child’) | 獲取li的父元素的最後一個子元素 |
$(‘li:only-child’) | 獲取只有一個子元素的元素 |
$(‘li:nth-child(even/odd/index)’) | 獲取li是偶數/奇數/索引的子元素(索引從1開始) |
用法：
<body> <ul> <li>1aaa</li> <li>2bbb</li> <li>3ccc</li> <li>4ddd</li> <li>5eee</li> </ul> <div style="height:50px;background:#ccc;"> <span>我是唯一的孩子</span> </div> <script type="text/javascript"> $(function (){ $('li:first-child').css('color','red'); $('li:last-child').css('color','deeppink'); //$('li:only-child').css('background','green'); $('span:only-child').css('background','green'); $('li:nth-child(2)').css('color','peru'); $('li:nth-child(2n)').css('font-size','25px'); $('li:nth-child(3n+1)').css('font-family','華文行楷'); $('li:nth-child(odd)').css('background','wheat'); $('li:nth-child(even)').css('background','#ccc'); }); </script> </body>
五.其他方法
方法 | 寫法 | 描述 |
is(s/o/e/f) | $(‘span’).is(‘.red’) | 判斷span標籤的class名是否是red |
hasClass(class) | $(‘span’).eq(2).hasClass(‘.red’) | 判斷頁面中的第二個span是否擁有class名為red |
slice(start,end) | $(‘span’).slice(0,2) | 選定span的索引是0和1的 |
end() | $(‘span’).find(‘p’).end() | 返回當前元素的上一個狀態(這裡的上一個狀態可以是當前元素的父元素,也可以是當前元素的同級元素) |
contents() | $(‘span’).contents() | 獲取span元素下的所有節點(元素節點、文字節點、屬性節點) |
filter(s/o/e/f) | $(‘span’).filter(‘.red,:first-child’) | 過濾器:多種選擇器的組合 |
s（是選擇器）、o（是物件）、e（是索引）、f（是函式） | ||
用法：
<body> <ul id="test"> <li>0-1</li> <li id="red">1-2</li> <li>2-3</li> <li title="blue" aaa="bbb">3-4</li> <li>4-5</li> </ul> <ul> <li>0-1</li> <li>1-2</li> </ul> <script type="text/javascript"> $(function () { //***************is方法 alert($('li:nth-child(2)').is('#red'));//true alert($('#red').is($('li')));//true alert($('#red').is($('li').get(1)));//true alert($('li'));//jQuery物件 alert($('li').get(1));//DOM物件 alert($('li').is($('li').eq(1)));//true alert($('#red').is(function () { return $(this).attr('id')==='red'; }));//ture //***************hasClass方法 // alert($('li').eq(1).hasClass('.red'));//false //***************slice方法 $('li').slice(1).css('background','peru');//從索引為1開始到最後都選定 $('li').slice(0,2).css('color','deeppink');//選定索引0和1 $('li').slice(0,-2).css('font-weight','bold');//從倒數第三個位置向前選定所有 $('li').slice(2,-2).css('font-size','20px');//前兩個和後兩個都不選定 //***************end方法 alert($('#test').find('li').get(0));//[object HTMLLIElement] alert($('#test').find('li').end().get(0));//[object HTMLUListElement] alert($('#test').find('li').parent().get(0));//等價上列 $('#test').next('ul').css('color','deeppink');//返回當前元素的同級元素ul //***************content方法 alert($('ul:nth-child(2)').contents().size());//5 alert($('ul:nth-child(2)').children().size());//3 var count=$('ul:nth-child(2)').contents(); for(var i=0;i<count.length;i++){ alert(i+':'+count[i].nodeName); //0:#text 1:LI 2:#text 3:LI 4:#text } //***************filter方法 $('ul').filter('#test,:last').css('background','green'); //尋找滿足id為test的ul,以及最後一個ul,並給予背景為綠色的樣式 $('li').filter($('#test>li:nth-child(2)')).css('color','deeppink'); $('li').filter($('li:nth-child(3)')).css('color','green'); $('li').filter(function () { return $(this).attr('title')=='blue'&&$(this).attr('aaa')=='bbb'; }).css('color','purple'); }); </script> </body>
六.例項
<!--************html部分--> <body> <!--實現頁面中的經典導航條--> <div class="nav"> <div class="clsHeader"> <h3>品牌分類</h3> <span><img src="img/girl.png" alt="girl"></span> </div> <div class="clsContent"> <ul> <li><a href="#">佳能</a><small>(1234)</small></li> <li><a href="#">索尼</a><small>(1234)</small></li> <li><a href="#">三星</a><small>(1234)</small></li> <li><a href="#">蘋果</a><small>(1234)</small></li> <li><a href="#">尼康</a><small>(1234)</small></li> <li><a href="#">富士</a><small>(1234)</small></li> <li><a href="#">理光</a><small>(1234)</small></li> <li><a href="#">佳能</a><small>(1234)</small></li> <li><a href="#">索尼</a><small>(1234)</small></li> <li><a href="#">三星</a><small>(1234)</small></li> <li><a href="#">卡西歐</a><small>(1234)</small></li> <li><a href="#">其他</a></li> </ul> </div> <div class="clsbottom"> <a>精簡顯示品牌</a> <img src="img/cat.png" alt="cat"> </div> </div> </body>
<script> //*********************************js部分 //在該導航中需要實現的功能是, // 1. 點選"品牌分類"字樣或者右邊的圖片——實現分類內容的成列和收起 //點選圖片時,有著圖片的切換 $(function () { $('.clsHeader>h3').click(function () { if($('.clsContent').is(':visible')){ $('.clsContent').hide(); $('.clsbottom').hide(); }else{ $('.clsContent').show(); $('.clsbottom').show(); } }); $('.clsHeader>span').click(function () { if($('.clsContent').is(':visible')){ $('.clsContent').hide(); $('.clsbottom').hide(); $('.clsHeader img').attr('src','img/text.png'); }else{ $('.clsContent').show(); $('.clsbottom').show(); $('.clsHeader img').attr('src','img/girl.png'); } }); //2. 點選"精簡顯示品牌"字樣,實現列表內容的精簡。 // 點選"顯示全部內容"字樣則顯示全部列表內容,並顏色為紅色。 //永遠保持"其他"字樣在最後顯示 $('.clsbottom>a').click(function () { if($(this).text()=='