jQuery選擇器和遍歷的總結


$('*'):全部元素

$(this):選中這個元素,this永遠指的都是調用函數的那個對象

$('#intro'):id為intro的元素

$('.intro'):class為intro的元素

$('li:first'):所有li里的第一個

$('li:last'):所有li里的最后一個

$('li:first-child'):某個父元素里的第一個子元素,同時得是li元素

$('ul li:first'):第一個ul里的第一個li

$('ul li:first-child'):每個ul里的第一個子元素,同時得是li元素

$('footer .item:last-of-type'):footer的后代元素,類名是item,是其兄弟元素中的最后一個(元素種類不一致時每種元素都會出一個)

$('ul li:nth-child(n)'):每個ul里的第n個子元素並且同時得是li元素,n從1開始

$('ul li:nth-child(n+4)'):每個ul里的第4個子元素后面的元素並且同時得是li元素,包括第4個子元素,n從0開始

$('ul li:nth-child(-n+4)'):每個ul里的第1,2,3,4個子元素並且同時得是li元素,包括第4個子元素,n從0開始

$('ul li:nth-child(3n+1)'):隔二取一

$('ul li:nth-last-child(n)'):倒數第n個,n從1開始

$('ul li:nth-of-type(2)'):每個ul里的li元素里的第二個,括號里的數字從1開始

$('p.intro'):intro類中的p元素

$('div>span'):div的直接子元素里的span

$('div span'):div的后代子元素里的span

$('.intro+'):每個類名為intro的元素的下一個兄弟元素

$('div~p'): div后面的兄弟元素里的所有p元素

$('li:even'):索引值是偶數的li,注意!索引值從0開始

$('li:odd'):索引值是奇數的li

$('li:lt(3)'):索引值小於3的li

$('li:gt(3)'):索引值大於3的li

$('li:eq(index)'):按索引值index選中元素,index從0開始

$('ul:parent'):是父元素的ul

$('div:has(span)'):里面有span元素的div

$('div:has(p,span,li)'):里面同時有p,span和li的div

$(':animated'):當前所有動畫元素

$(':button'):button元素和type='button'的input元素

$('[id]'):有id屬性的元素

$('[id="jQuery"]'):有id屬性且屬性值等於jQuery的元素。注意!不要單引號套單引號或雙引號套雙引號

$('div[id="jQuery"]'):有id屬性且屬性值等於jQuery的div

$('[id=" '+k+' "]'):有id屬性且屬性值等於變量k的值的元素

不能寫成$('[class="hi hello"]'),包裹屬性值的引號里只被識別為一個字符串,不要放置多個屬性值

$('[class="hi"][type="button"]'):同時有class屬性和type屬性且class屬性的屬性值等於hi,type屬性的屬性值等於button的那個元素。注意!前后兩個屬性不能相同,后面還能再增加其他屬性選擇器

$('[class="hi"],[type="button"]'):有class屬性且屬性值是hi的元素和有type屬性且屬性值是button的元素的集合

$('[class!="hi"]'):選中除了有class屬性且屬性值等於hi的其他元素

$('[href$=".png"]'):有href屬性且屬性值以.png結尾的元素

$('[name|="code"]'):有name屬性且屬性值等於code或屬性值以code作為前綴的元素,如:

識別<input name="code">,<input name="code-gaga">,不識別<input name="code gaga">,<input name="codegaga">

$('[name^="code"]'):有name屬性且屬性值以code字符串開頭的元素

$('[name*="nation"]'):有name屬性且屬性值中包含nation字符串的元素,如:

識別<input name="nationality">,<input name="nation">,<input name="anothernation">,不識別<input name="country">

$('[name~="nation"]'):有name屬性且屬性值中包含nation單詞的元素,如:

識別<input name="nation">,不識別<input name="nationality">,<input name="anothernation">,<input name="country">

 

siblings():和被選元素有相同父元素的所有兄弟元素

$('.intro').next():每個類名為intro的元素的下一個兄弟元素。$('.intro').next() = $('.intro+');$('.intro').next('input') = $('.intro+input')

nextAll():被選元素后面的所有兄弟元素,不包含被選元素本身

nextUntil():兩個給定參數之間的所有兄弟元素,如:$('h1').nextUntil('h6'),選中h1到h6之間的兄弟元素,不包含h1和h6

prev()和next()類似,prevAll()和nextAll()類似,prevUntil()和nextUntil()類似

find(filter):filter參數是必需的,從被選元素的所有后代元素中查找。查找被選元素的所有后代元素:find('*')

children():被選元素的所有直接子元素,不會返回文本節點

parent():被選元素的直接父元素

parents():被選元素的所有祖先元素。如需返回多個祖先元素:parents('li,ul')

parentsUntil():在兩個元素之間的所有祖先元素,例:$('span').parentsUntil('div'),不含div

closest('#pop'):從當前元素開始沿DOM樹向上遍歷,返回被選元素的,id是pop的,第一個祖先元素,也會返回本身,如:$('#pop').closest('#pop') 

eq(index):按索引值index選中元素,index從0開始,括號里不用加引號,如:eq(0)

index也可以是負數,表示倒數,如:eq(-1)表示倒數第一個,eq(-2)表示倒數第二個

first():選中第一個元素

last():選中最后一個元素

filter():選中符合篩選條件的元素,如:filter('.intro'),篩選出類名為.intro的元素

not():選中不符合篩選條件的元素,剛好和filter()相反

each():為每個匹配的元素指定要運行的函數,如:

$('p').each(function () { alert( $(this).text() );});

 

document.getElementsByTagName()

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM