[jQuery知識]jQuery之知識三-過濾器
[jQuery知識]jQuery之知識三-過濾器
一.基本過濾器
過濾器主要通過特定的過濾規則來篩選所需的 DOM 元素,和 CSS 中的偽類的語法類
$('li:first').css('background', '#ccc'); //第一個元素 $('li:last).css('background', '#ccc'); //最後一個元素$('li:not(.red)).css('background', '#ccc'); //非 class 為 red 的元素$('li:even').css('background', '#ccc');//索引為偶數的元素
$('li:odd).css('background', '#ccc'); //索引為奇數的元素$('li:eq(2)).css('background', '#ccc'); //指定索引值的元素$('li:gt(2)').css('background', '#ccc'); //大於索引值的元素$('li:lt(2)').css('background', '#ccc'); //小於索引值的元素$(':header').css('background', '#ccc'); //頁面所有 h1 ~ h6 元素
- 1
- 2
- 3
- 4
- 5
注意::focus 過濾器,必須是網頁初始狀態的已經被啟用焦點的元素才能實現元素獲取。 而不是滑鼠點選或者 Tab 鍵盤敲擊啟用的。
$('input').get(0).focus(); //先初始化啟用一個元素焦點 $(':focus').css('background', 'red'); //被焦點的元素
- 1
jQuery 為最常用的過濾器提供了專用的方法,已達到提到效能和效率的作用:
$('li').eq(2).css('background', '#ccc'); //元素 li 的第三個元素,負數從後開始
$('li').first().css('background', '#ccc');//元素 li 的第一個元素
$('li').last().css('background', '#ccc'); //元素 li 的最後一個元素
$('li').not('.red').css('background', '#ccc');//元素 li 不含 class 為 red 的元素
- 1
- 2
- 3
- 4
- 5
注意::first、:last 和 first()、last()這兩組過濾器和方法在出現相同元素的時候,first 會 實現第一個父元素的第一個子元素,last 會實現最後一個父元素的最後一個子元素。所以, 如果需要明確是哪個父元素,需要指明:
$('#box li:last').css('background', '#ccc'); //#box 元素的最後一個 li
$('#box li).last().css('background', '#ccc'); //同上
- 1
- 2
- 3
二.內容過濾器
內容過濾器的過濾規則主要是包含的子元素或文字內容上。
//選擇元素文字節點含有 ycku.com 文字的元素
$('div:contains("ycku.com")').css('background', '#ccc');
$('div:empty').css('background', '#ccc'); //選擇空元素
$('ul:has(.red)').css('background', '#ccc'); //選擇子元素含有 class 是 red 的元素
$(':parent').css('background', '#ccc');//選擇非空元素
- 1
- 2
- 3
- 4
- 5
- 6
jQuery 提供了一個 has()方法來提高:has 過濾器的效能:
$('ul').has('.red').css('background', '#ccc'); //選擇子元素含有 class 是 red 的元素
- 1
- 2
jQuery 提供了一個名稱和:parent 相似的方法,但這個方法並不是選取含有子元素或文字 的元素,而是獲取當前元素的父元素,返回的是元素集:
$('li').parent().css('background', '#ccc'); //選擇當前元素的父元素
$('li').parents().css('background', '#ccc'); //選擇當前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //選擇當前元素遇到 div 父元素停止
- 1
- 2
- 3
- 4
三.可見性過濾器
可見性過濾器根據元素的可見性和不可見性來選擇相應的元素。
$('p:hidden).size(); //元素 p 隱藏的元素 $('p:visible').size(); //元素 p 顯示的元素
- 1
注意::hidden 過濾器一般是包含的內容為:CSS 樣式為 display:none、input 表單型別為 type=”hidden”和 visibility:hidden 的元素。
四.子元素過濾器
子元素過濾器的過濾規則是通過父元素和子元素的關係來獲取相應的元素。
$('li:first-child').css('background', '#ccc');//每個父元素第一個 li 元素
$('li:last-child').css('background', '#ccc');//每個父元素最後一個 li 元
$('li:nth-child(odd)').css('background', '#ccc'); //每個父元素只有一個 li 元素
$('li:nth-child(even)').css('background', '#ccc');//每個父元素奇數 li 元素
$('li:nth-child(2)').css('background', '#ccc');//每個父元素第三個 li 元素
- 1
- 2
- 3
- 4
- 5
- 6
- 7
五.其他方法
jQuery 在選擇器和過濾器上,還提供了一些常用的方法,方便我們開發時靈活使用。
$('.red').is('li');//true,選擇器,檢測 class 為是否為 red
$('.red').is($('li')); //true,jQuery 物件集合,同上
$('.red').is($('li').eq(2)); //true,jQuery 物件單個,同上
$('.red').is($('li').get(2));//true,DOM 物件,同上
$('.red').is(function () {//true,方法,同上
return $(this).attr('title') == '列表 3';//可以自定義各種判斷
}));
$('li').eq(2).hasClass('red');//和 is 一樣,只不過只能傳遞 class
$('li').slice(0,2).css('color','red');//前三個變成紅色
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
注意:這個引數有多種傳法和 JavaScript 的 slice 方法是一樣的比如:slice(2),從第三個始到最後選定;slice(2,4),第三和第四被選定;slice(0,-2),從倒數第三個位置,向前選定 所有;slice(2,-2),前兩個和末尾兩個未選定。
$("div").find("p").end().get(0);//返回 div 的原生 DOM
$('div').contents().size();//返回子節點(包括文字)數量
$('li').filter('.red').css('background','#ccc');
$('li').filter('.red, :first, :last').css('background','#ccc'); //增加了首尾選擇 //特殊要求函式返回
$('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表 3'; }).css('background', '#ccc');
- 1
- 2
- 3
- 4
- 5
- 6
[jQuery知識]jQuery之知識體系
相關文章
- JQuery知識總結之選擇器jQuery
- JQuery知識總結jQuery
- Jquery基礎知識jQuery
- jQuery知識總結之DOM操作jQuery
- jquery學習之重要知識點jQuery
- jQuery第三章知識點jQuery
- jQuery 知識點總結jQuery
- jQuery面試知識點整理jQuery面試
- jquery.form.js知識jQueryORMJS
- jQuery知識總結之事件jQuery事件
- jQuery 個人學習知識點jQuery
- jquery主要知識點(精簡)jQuery
- JQuery基本知識彙總;JQuery常用方法;淺入瞭解JQueryjQuery
- jquery基礎知識你知道哪些?jQuery
- jQuery第五章知識點jQuery
- jQuery第七章知識點jQuery
- jQuery第二章知識點jQuery
- 【輕知識】phper回顧下jqueryPHPjQuery
- 【jQuery實戰知識點總結】jQuery
- Jquery的一些知識點jQuery
- JQuery的一些基本知識jQuery
- jQuery心得1--jQuery入門知識串講1jQuery
- jQuery心得3--jQuery入門知識串講2jQuery
- jQuery之過濾元素jQuery
- jQuery第四章知識點jQuery
- jQuery第六章知識點jQuery
- 專案中常用jquery知識總結jQuery
- jQuery第一章知識點jQuery
- 使用Jquery解析Json基礎知識jQueryJSON
- web前端javascript+jquery知識點總結Web前端JavaScriptjQuery
- 知識圖譜之知識表示
- jQuery知識總結之元素屬性與樣式的操作jQuery
- 5張思維導圖,jQuery知識點梳理jQuery
- jQuery常用的一些知識點總結jQuery
- 資料庫知識點(5)——多列過濾資料庫
- 遨翔在知識的海洋裡----(onclick和jquery,click)jQuery
- jQuery子元素過濾選擇器jQuery
- 信管知識梳理(三)軟體工程相關知識軟體工程