[JQuery]學習——過濾選擇器

第一 基本過濾器:

過濾名 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 () { //true,方法,同上
  return $(this).attr('title') == '列表3'; //可以自定義各種判斷 必須使用$(this)來表示要判斷的元素否則,不管怎麼樣function裏面返回是否是true或false都和調用的元素無關
}));


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


//特殊要求函數返回,強大的function過濾
$('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';
}).css('background', '#ccc');


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章