jQuery元素过滤
索引過(guò)濾
索引選擇器是jQuery過(guò)濾選擇器的一部分。與此同時(shí)，也存在功能相似的索引相關(guān)的方法，包括eq()、first()、last()
eq()
eq()方法匹配元素的集合為指定的索引的哪一個(gè)元素。eq()方法可以接受一個(gè)整數(shù)作為參數(shù)，以0為基數(shù)。若整數(shù)為負(fù)數(shù)，則從集合中的最后一個(gè)元素開(kāi)始計(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>
內(nèi)容過(guò)濾
jQuery選擇器中包括內(nèi)容過(guò)濾選擇器，而jQuery中也存在功能類似的內(nèi)容過(guò)濾的方法，包括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()方法通過(guò)一個(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)范圍，過(guò)濾匹配的元素集合，并生成一個(gè)新的jQuery對(duì)象
slice(start[,end])方法接受兩個(gè)參數(shù)：start和end
start是一個(gè)整數(shù)，從0開(kāi)始計(jì)數(shù)的下標(biāo)。代表將要被選擇的元素的起始下標(biāo)。如果指定的下標(biāo)是一個(gè)負(fù)數(shù)，那么代表從末尾開(kāi)始計(jì)數(shù)
end是一個(gè)整數(shù)，從0開(kāi)始計(jì)數(shù)的下標(biāo)。代表將要被選擇的元素的結(jié)束下標(biāo)。如果指定的下標(biāo)是一個(gè)負(fù)數(shù)，那么代表從末尾開(kāi)始計(jì)數(shù)。如果忽略此參數(shù)，則選擇的范圍是從start開(kāi)始，一直到最后
<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
轉(zhuǎn)載于:https://blog.51cto.com/33997k7k/1923984
總結(jié)
以上是生活随笔為你收集整理的jQuery元素过滤的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 一道关于 ARRAY 深度展开的面试题
- 下一篇： ngui 输入事件处理