首页 / JQUERY / jQuery元素过滤
jQuery元素过滤
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery元素过滤，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6942字，纯文字阅读大概需要10分钟。
内容图文
索引过滤
索引选择器是jQuery过滤选择器的一部分。与此同时，也存在功能相似的索引相关的方法，包括eq()、first()、last()
eq()
eq()方法匹配元素的集合为指定的索引的哪一个元素。eq()方法可以接受一个整数作为参数，以0为基数。若整数为负数，则从集合中的最后一个元素开始计数
<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()方法获取匹配元素集合中第一个元素，该方法不接受参数
last()
last()方法获取匹配元素集合中最后一个元素，该方法不接受参数
<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选择器中包括内容过滤选择器，而jQuery中也存在功能类似的内容过滤的方法，包括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()方法通过一个函数匹配当前集合中的每个元素
作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象
<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()方法从匹配的元素集合中筛选出指定的元素，参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数
<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()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为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()方法正好相反，它从匹配的元素集合中移除指定的元素，参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数
<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()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为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()方法用于判断当前元素是否与参数相匹配，如果匹配，则返回true；否则，返回false。参数可以是一个选择器，DOM元素，jQuery对象或函数
<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()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回true，is()方法也返回true，如果函数返回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()方法根据指定的下标范围，过滤匹配的元素集合，并生成一个新的jQuery对象
slice(start[,end])方法接受两个参数：start和end
start是一个整数，从0开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数，那么代表从末尾开始计数
end是一个整数，从0开始计数的下标。代表将要被选择的元素的结束下标。如果指定的下标是一个负数，那么代表从末尾开始计数。如果忽略此参数，则选择的范围是从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()方法的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，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>
标签: jQuery
原文：http://33997k7k.blog.51cto.com/12877992/1923984
内容总结
以上是互联网集市为您收集整理的jQuery元素过滤全部内容，希望文章能够帮你解决jQuery元素过滤所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。