第 4 章 過濾選擇器

2022-08-13 18:45:17 字數 2269 閱讀 5743

學習要點:

1.基本過濾器

2.內容過濾器

3.可見性過濾器

4.子元素過濾器

5.其他方法

$('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 元素

注意::focus 過濾器,必須是網頁初始狀態的已經被啟用焦點的元素才能實現元素獲取。 而不是滑鼠點選或者 tab 鍵盤敲擊啟用的。 $('input').get(0).focus(); //先初始化啟用乙個元素焦點 $(':focus').css('background','red'); //被焦點的元素

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 的元素

注意::first、:last 和 first()、last()這兩組過濾器和方法在出現相同元素的時候,first 會 實現第乙個父元素的第乙個子元素,last 會實現最後乙個父元素的最後乙個子元素。所以, 如果需要明確是哪個父元素,需要指明: $('#boxli:last').css('background','#ccc'); //#box 元素的最後乙個 li //或 $('#boxli).last().css('background','#ccc'); //同上

//選擇元素文字節點含有 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'); //選擇非空元素

jquery 提供了乙個 has()方法來提高:has 過濾器的效能:

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

jquery 提供了乙個名稱和:parent 相似的方法,但這個方法並不是選取含有子元素或文字 的元素,而是獲取當前元素的父元素,返回的是元素集合。 $('li').parent().css('background','#ccc'); //選擇當前元素的父元素

$('li').parents().css('background','#ccc'); //選擇當前元素的父元素及祖先元素

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

第04章 過濾選擇器(下)

index.html 我們的網域名稱為 訪問 我們的網域名稱為 我是標題 demo.js function 注意,必須使用 this 來表示要判斷的元素,否則,不管 function 裡面是否返回 true 或 false 都和呼叫的元素無關了 alert li eq 2 hasclass red ...

jQuery過濾選擇器 基本過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需的dom元素,過濾規則與css中的偽類選擇器語法相同,即選擇器都以乙個冒號 開頭。按照不同的過濾規則,過濾選擇器可以分為基本過濾 內容過濾 可見性過濾 屬性過濾 子元素過濾和表單物件屬性過濾選擇器。基本過濾選擇器 選擇器 描述 返回 示例 first 選...

jQuery過濾選擇器 基本過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需的dom元素,過濾規則與css中的偽類選擇器語法相同,即選擇器都以乙個冒號 開頭。按照不同的過濾規則,過濾選擇器可以分為基本過濾 內容過濾 可見性過濾 屬性過濾 子元素過濾和表單物件屬性過濾選擇器。基本過濾選擇器 選擇器 描述 返回 示例 first 選...