首页 > 代码库 > 浅谈今天所学的Jquery 中的filter()方法
浅谈今天所学的Jquery 中的filter()方法
一直以来对JQuery很喜欢，它封装了JavaScript，用起来更方便，不过无论什么方法，必须要理解这个方法本来的含义，此外就是要在自己的逻辑上整理清楚，这样才能做到更多的效果。“遇到问题了，多看手册”这句话是当初学脚本语言的时候老师经常说的一句话，当初很郁闷他这句话，不过现在发现，封住的方法的确多得很，只有不断地学习，不断地用到，才会发现这些方法的区别，也才能更加合理地利用这些前辈们为我们打造好的各种包。
先来说说今天认识到的filter()方法吧。
这个方法主要用来遍历列表中的元素，或者有着并列关系的元素，filter()方法其实是个过滤选择器，旨在从众多的并列的“兄弟姐妹”中查找到符合匹配条件的那一来。
我们先来看看API中给我们提供的例子:
==============例1=============
（备注：这里就不写那么多引入的js和css,大家可以自己随意添加）
<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> <li>list item 6</li></ul>$(document).ready(function(){ ------>此处保持好习惯，最好等页面加载完了再运行这段代码
$( "li" ).filter( ":even" ).css( "background-color", "red" ); -------->意思是找到元素li中的偶元素（：even）,并且设置这些偶元素的样式为"background-color", "red"
});
结果展示应该是“list item 1” “list item 3” “list item 5” 为背景红色
（备注，在这里元素的指数是从0开始的）
====================例2========================
<ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> -two <span>strong tags</span></li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li></ul>$(document).ready(function(){
$( "li" ).filter(function( index ) { return $( "strong", this ).length === 1;}).css( "background-color", "red" );});
这段代码似乎变得有点复杂了，但是道理其实是一样的，首先从$的地方开始找，先是找到li,在所有的li元素中找到含有strong元素，并且判断这个li 中的strong的个数，找到含有一个strong的那个，并且更改它的背景颜色。结果是只有第一个<li><strong>list</strong> item 1 - one strong tag</li> 变成了红色。
$(document).ready(function(){
$( "li" ).filter(function( index ) {return index % 3 === 2;}) .css( "background-color", "red" );});
同样是上边的html,下面这段js的含义是说找到li,并且判断它的指数，是否是除3余2的那个，找到后改变它的背景色。
结果为<li>list item 3</li>和<li>list item 6</li>都改变了背景颜色，因为它们的指数一个为2，另一个为5，取余后都是2
====================例3========================
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>filter demo</title> <style> div { width: 60px; height: 60px; margin: 5px; float: left; border: 2px white solid; } </style> <script src=http://www.mamicode.com/"//code.jquery.com/jquery-1.10.2.js"></script></head><body><div></div><div class="middle"></div><div class="middle"></div><div class="middle"></div><div class="middle"></div><div></div><script>$(document).ready(function(){
$( "div" ) .css( "background", "#c8ebcc" ) .filter( ".middle" ) .css( "border-color", "red" );});
</script></body></html>结果为所有的div都添加了背景色#c8ebcc，而所有的.middle的那div都加了红边框
=====================结语=======================
学习JQuery的道路还很长远，需要每天积累，希望正在学习这个语言的朋友们，相互交流，共同进步。
浅谈今天所学的Jquery 中的filter()方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。