浅谈今天所学的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="//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的道路还很长远，需要每天积累，希望正在学习这个语言的朋友们，相互交流，共同进步。
 
 
 
 
posted @ 2014-11-29 17:24  spade  阅读(3934)  评论(0)    收藏  举报