索引選擇器是jQuery過濾選擇器的一部分。與此同時(shí),也存在功能相似的索引相關(guān)的方法,包括eq()、first()、last()
網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)!專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了高平免費(fèi)建站歡迎大家使用!eq()
eq()方法匹配元素的集合為指定的索引的哪一個(gè)元素。eq()方法可以接受一個(gè)整數(shù)作為參數(shù),以0為基數(shù)。若整數(shù)為負(fù)數(shù),則從集合中的最后一個(gè)元素開始計(jì)數(shù)
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul><button id="btn1">按鈕一</button><button id="btn2">按鈕二</button><button id="btn3">按鈕三</button><script>$('#btn1').click(function(){ $('li').eq(0).css('border','1px solid red'); }) $('#btn2').click(function(){ $('li').eq(-1).css('border','1px solid blue'); }) $('#btn3').click(function(){ $('li').eq(2).css('border','1px solid green'); })</script>
first()
first()方法獲取匹配元素集合中第一個(gè)元素,該方法不接受參數(shù)
last()
last()方法獲取匹配元素集合中最后一個(gè)元素,該方法不接受參數(shù)
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul><button id="btn1">按鈕一</button><button id="btn2">按鈕二</button><script>$('#btn1').click(function(){ $('li').first().css('border','1px solid red'); }) $('#btn2').click(function(){ $('li').last().css('border','1px solid blue'); })</script>
jQuery選擇器中包括內(nèi)容過濾選擇器,而jQuery中也存在功能類似的內(nèi)容過濾的方法,包括has()、filter()、is()、not()、map()、slice()和add()
has()
has()方法用于篩選匹配元素集合中有相匹配的選擇器或DOM元素的后代元素的父元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul> <li>list item 1</li> <li>list item 2 <ul> <li>list item 2-a</li> <li>list item 2-b</li> </ul> </li> <li>list item 3</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){ $('li').has('ul').css('border', '1px solid lightblue'); })</script>
map()
map()方法通過一個(gè)函數(shù)匹配當(dāng)前集合中的每個(gè)元素
作為參數(shù)的函數(shù)有兩個(gè)參數(shù),第一個(gè)參照是匹配集合中的元素索引,第二個(gè)參數(shù)是當(dāng)前索引的DOM元素對(duì)象
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><input value="text"><input value="text"><input value="text"><button id="btn">按鈕</button><script>$('#btn').click(function(){ $('input').map(function(index,dom){ dom.value += index; }); })</script>
filter()
filter()方法從匹配的元素集合中篩選出指定的元素,參數(shù)可以是一個(gè)選擇器字符串、一個(gè)或多個(gè)DOM元素、jQuery對(duì)象或一個(gè)函數(shù)
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){ $('li').filter(':even').css('border','1px solid lightgreen') })</script>
filter()方法中作為參數(shù)的函數(shù)有兩個(gè)參數(shù),第一個(gè)參照是匹配集合中的元素索引,第二個(gè)參數(shù)是當(dāng)前索引的DOM元素對(duì)象。如果函數(shù)返回值為true,則該元素保留;否則,該元素在匹配集合中被去除
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){ $('li').filter(function(index,dom){ if(!(index % 3)){ $(dom).css('border','1px solid lightgreen') return true; } }) })</script>
not()
not()方法與filter()方法正好相反,它從匹配的元素集合中移除指定的元素,參數(shù)可以是一個(gè)選擇器字符串、一個(gè)或多個(gè)DOM元素、jQuery對(duì)象或一個(gè)函數(shù)
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){ $('li').not(':even').css('border','1px solid lightgreen') })</script>
not()方法中作為參數(shù)的函數(shù)有兩個(gè)參數(shù),第一個(gè)參照是匹配集合中的元素索引,第二個(gè)參數(shù)是當(dāng)前索引的DOM元素對(duì)象。如果函數(shù)返回值為true,則該元素被去除;否則,該元素在匹配集合中保留
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){ $('li').not(function(index,dom){ if(!(index % 3)){ $(dom).css('border','1px solid lightgreen') return true; } }) })</script>
is()
is()方法用于判斷當(dāng)前元素是否與參數(shù)相匹配,如果匹配,則返回true;否則,返回false。參數(shù)可以是一個(gè)選擇器,DOM元素,jQuery對(duì)象或函數(shù)
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul><script>$('li').click(function(){ if($(this).is(':contains("2")')){ $(this).css('border','1px solid black') } })</script>
is()方法中作為參數(shù)的函數(shù)有兩個(gè)參數(shù),第一個(gè)參照是匹配集合中的元素索引,第二個(gè)參數(shù)是當(dāng)前索引的DOM元素對(duì)象。如果函數(shù)返回true,is()方法也返回true,如果函數(shù)返回false,is()方法也返回false
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul><div id="result"></div><script>var i = 0; $('li').click(function(){ ++i; if($(this).is(function(index,dom){ $('#result').html(dom.innerHTML); if(i%2){ return true; } })){ $(this).css('border','1px solid black') } })</script>
slice()
slice()方法根據(jù)指定的下標(biāo)范圍,過濾匹配的元素集合,并生成一個(gè)新的jQuery對(duì)象
slice(start[,end])方法接受兩個(gè)參數(shù):start和end
start是一個(gè)整數(shù),從0開始計(jì)數(shù)的下標(biāo)。代表將要被選擇的元素的起始下標(biāo)。如果指定的下標(biāo)是一個(gè)負(fù)數(shù),那么代表從末尾開始計(jì)數(shù)
end是一個(gè)整數(shù),從0開始計(jì)數(shù)的下標(biāo)。代表將要被選擇的元素的結(jié)束下標(biāo)。如果指定的下標(biāo)是一個(gè)負(fù)數(shù),那么代表從末尾開始計(jì)數(shù)。如果忽略此參數(shù),則選擇的范圍是從start開始,一直到最后
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){ $('li').slice(2,4).css('background', 'red'); })</script>
add()
add()方法添加元素到匹配的元素集合。add()方法的參數(shù)可以幾乎接受任何的$(),包括一個(gè)jQuery選擇器表達(dá)式,DOM元素,或HTML片段引用
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li></ul><div>div</div><button id="btn">按鈕</button><script>$('#btn').click(function(){ $('li').add('div').css('background', 'lightgreen'); })</script>
標(biāo)簽: jQuery
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
當(dāng)前文章:jQuery元素過濾-創(chuàng)新互聯(lián)
當(dāng)前路徑:http://m.newbst.com/article32/dioisc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、微信小程序、App設(shè)計(jì)、網(wǎng)站導(dǎo)航、軟件開發(fā)、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容