JQuery 學習 過濾選擇器

2021-06-22 23:23:33 字數 2838 閱讀 9899

第一 基本過濾器:

過濾名jquery語法

說明返回

:first

$('li:first')

選取第乙個元素

單個元素

:last

$('li:last')

選取最後乙個元素

單個元素

:even

$('li:even')

選取索引(0開始)是偶數的所有元素

集合元素

:not(selector)

$('li:not(.red)')

選取class不是red的li

集合元素

:eq(index)

$('li:eq(2)')

選取索引(0開始)等於2的index元素

單個元素

:gt(index)

$('li gt(2)')

選取索引(0開始)大於index的元素

集合元素

:lt(index)

$('li lt(2)')

選取索引(0開始)小於index的元素

集合元素

:header

$(':header')

選取標題元素,h1-h6

集合元素

:animated

$(':animated')

選擇正在執行的動畫元素

集合元素

:focuns

$(':focus')

選取當前被焦點的元素

集合元素

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

第二 內容過濾器

過濾器名

jquery語法

說明返回

:contains(text)

$(':contains("ccc")')

選取含有ccc的文字元素

元素集合

:empty

$(':empty')

選取不包含子元素或空文字的元素

元素集合

:has(selector)

$(':has(.red)')

選取含有class是red的元素

元素集合

:parent

$(':parent')

選取含有子元素或文字的元素

元素集合

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 父元素停止

三  可見性過濾器

$('p:hidden).size(); //元素p 隱藏的元素

$('p:visible').size(); //元素p 顯示的元素

第四  子元素選擇器

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

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

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

第五 其它方法

$('.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 () ));

$('li').eq(2).hasclass('red'); //和is 一樣,只不過只能傳遞class

//特殊要求函式返回,強大的function過濾

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

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

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

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

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

jQuery過濾選擇器

基本過濾選擇器 first 選取第乙個元素 last 選取最後乙個元素 not selector 去除所有與給定選擇器匹配的元素 even 選取索引是偶數的所有元素,索引從0開始 odd 選取索引是奇數的所有元素,索引從0開始 eq index 選取索引等於index的元素 index從0開始 gt...