第一 基本過濾器:
過濾名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...