浅谈今天所学的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  阅读(3908)  评论(0编辑  收藏  举报