6 Jquery中的選擇器(基本過濾選擇器)

2021-10-19 13:48:58 字數 2381 閱讀 2177

過濾選擇器主要是通過特定的過濾規則篩選出所需要dom元素,該選擇器都以「:」開頭。

按照不同的過濾規則:過濾選擇器可以分為基本過濾、內容過濾,可見性過濾,屬性過濾和表單物件屬性過濾選擇器。

:first

用法: $(」tr:first」) ; 返回值 單個元素的組成的集合

說明: 匹配找到的第乙個元素

例項:改變第乙個 div 元素的背景色為 #0000ff

$

(function()

);

:last

用法: $(」tr:last」) 返回值 集合元素

說明: 匹配找到的最後乙個元素.與 :first 相對應.

例項:改變最後乙個 div 元素的背景色為 #0000ff

$

(function()

);

:not(selector)

用法: $(」input:not(:checked)」)返回值 集合元素

說明: 去除所有與給定選擇器匹配的元素.有點類似於」非」,意思是沒有被選中的input(當input的type=」checkbox」).

例項:改變class不為 one 的所有 div 元素的背景色為 #0000ff

$

(function()

);

:even

用法: $(」tr:even」) 返回值 集合元素

說明: 匹配所有索引值為偶數的元素,從 0 開始計數.js的陣列都是從0開始計數的.例如要選擇table中的行,因為是從0開始計數,所以table中的第乙個tr就為偶數0.

例項:改變索引值為偶數的 div 元素的背景色為 #0000ff

$

(function()

);

: odd

用法: $(」tr:odd」) 返回值 集合元素

說明: 匹配所有索引值為奇數的元素,和:even對應,從 0 開始計數.

例項:改變索引值為奇數的 div 元素的背景色為 #0000ff

$

(function()

);

:eq(index)

用法: $(」tr:eq(0)」) 返回值 集合元素

說明: 匹配乙個給定索引值的元素.eq(0)就是獲取第乙個tr元素.括號裡面的是索引值,不是元素排列數.

例項:改變索引值為等於 3 的 div 元素的背景色為 #0000ff

$

(function()

);

:gt(index)

用法: $(」tr:gt(0)」) 返回值 集合元素

說明: 匹配所有大於給定索引值的元素.

例項:改變索引值為大於 3 的 div 元素的背景色為 #0000ff

$

(function()

);

:lt(index)

用法: $(」tr:lt(2)」) 返回值 集合元素

說明: 匹配所有小於給定索引值的元素.

例項:改變索引值為小於 3 的 div 元素的背景色為 #0000ff

$

(function()

);

整個selector_filter.js檔案的內容

/**

* 基本過濾選擇器

*//*例項:改變第乙個 div 元素的背景色為 #0000ffs*/

/*$(function());

*//*例項:改變最後乙個 div 元素的背景色為 #0000ff*/

/*$(function());

*//*例項:改變class不為 one 的所有 div 元素的背景色為 #0000ff*/

/* $(function());

*//* 例項:改變索引值為偶數的 div 元素的背景色為 #0000ff*/

/*$(function());*/

/*例項:改變索引值為奇數的 div 元素的背景色為 #0000ff*/

/*$(function());

*//*例項:改變索引值為等於 3 的 div 元素的背景色為 #0000ff*/

/*$(function());*/

/*例項:改變索引值為大於 3 的 div 元素的背景色為 #0000ff*/

/*$(function());*/

/*例項:改變索引值為小於 3 的 div 元素的背景色為 #0000ff*/$(

function()

);

原創不易,有錯誤的地方希望大家多多指教。動動手指給個贊。

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...

jquery基本選擇器

1 選擇器 所有元素 2 id選擇器 title id title 的元素 3 class 選擇器 fade 所有 class fade 的元素 4 element 元素 選擇器 p 所有 元素 5 class.class 選擇器 fade.demo 所有 class fade 且 class de...

jQuery基本選擇器

id選擇器 id 描述 查詢id為 mydiv 的元素html id notme id notme div id mydiv id mydiv div jquery mydiv 結果 id mydiv id mydiv div 元素選擇器 element 描述 查詢乙個 div 元素html div...