jQuery过滤函数

来源：互联网发布：怎样避免京东二手知乎编辑：程序博客网时间：2024/06/05 21:12

在前面介绍了许多功能实用的选择器，jQuery在此基础上还拓展了许多功能函数，这些函数作为jQuery对象的方法直接实用，这样就能够在选择器的基础上更加精确地控制对象。请注意：筛选函数与选择器在用法上是不同的。例如，在下面这个列表结构中。

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;">   <ul>  
        <li>1</li>  
        <li>2</li>  
        <li>3</li>  
    </ul></span>  

如果要设置第二个列表项的字体颜色为红色，可以用选择器进行选择

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;">$("li:eq(1)").css("color","red");  
</span>  

而如果使用过滤函数，则可以使用如下方法来实现

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;">$("li").eq(1).css("color","red");  
</span>  

选择器是构建jQuery对象的基础，而过滤函数则是jQuery对象的成员，用法截然不同，jQuery定义的过滤函数如下表所示：

表2-7 jQuery过滤函数jQuery过滤函数说明eq(index)获得指定索引值位置上的元素,索引值从0开始计数hasClass(class)检查当前元素是否含有某个特定的类，如果有则返回truefilter(expr)筛选出与指定表达式匹配的元素集合，这个方法用于缩小匹配的范围，用逗号分隔多个表达式filter(fn)筛选出与指定函数返回值匹配的元素集合is(expr)用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回truemap(callback)将一组元素转换成其他数组(不论是否是元素数组)not(expr)删除与指定表达式匹配的元素slice(start,[end])选取一个匹配的子集，与原来的slice方法类似add(expr)把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合contents()查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个ifame，则查找文本内容find (expr)搜索所有与指定表达式匹配的元素。这个元素是找出正在处理的元素的后代元素next([expr])取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合nextAll([expr])查找当前元素之后的所有元素parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）prev([expr])取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合prevAll([expr])查找当前元素之前所有的同辈元素，可以用表达式过滤siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选andSelf()加入先前所选的当前元素中，对于筛选或查找后的元素，加入先前所选元素的将会很有用end()回到最近的一个‘破坏性’操作之前，即将匹配的元素列表变为前一次的状态

说明：

1、find() 和 filter()两者的区别

简单的说就是find()是在jQuery对象集合的所有的子元素中查找，而filter()是在jQuery对象集合中查找。

还有就是两者参数的区别，find()需要的参数是且只是jQuery选择器的表达式，而filter()的参数可以是jQuery选择器的表达式，也可以是多个jQuery选择器的表达式并列，中间用逗号隔开（逻辑或的关系），filter()参数也可以是一个函数，调用函数时自动传入index参数(jQuery对象集合的长度),函数需返回true或者false来选中或者排除元素。看个例子就明白两者的用法了：

实例3-1：

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
<title>Document</title>   
<script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
<script>   
$(function(){   
    $('#btn1').click(function(){   
        alert('这样的jQuery对象有'+$('div').find('.test').length+'个')  
    });   
    $('#btn2').click(function(){   
        alert('这样的jQuery对象有'+$('div').filter('.test').length+'个');   
    });   
    $('#btn3').click(function(){   
        alert('这样的jQuery对象有'+$('div').filter('.last').length+'个');   
    });   
    $('#btn4').click(function(){   
        alert('这样的jQuery对象有'+$('div').filter('.test,.last').length+'个');   
    });   
    $('#btn5').click(function(){  
        alert('这样的jQuery对象有'+$('div').filter(function(index){  
            return $(this).hasClass("haha");//检查当前元素是否含有haha类  
        }).length+'个')  
    })  
});   
</script>   
</head>   
<body>   
    <input type="button" value="test-find" id="btn1" />   
    <input type="button" value="test-filter" id="btn2" />   
    <input type="button" value="test-filter" id="btn3" />   
    <input type="button" value="test-filter" id="btn4" />   
    <input type="button" value="test-filter" id="btn5" />   
    <div class="first">  
        first content  
        <span class="test">  
            test content  
        </span>  
        <span class="test">  
            test1 content  
        </span>  
    </div>   
  
    <div class="last">  
        last  
        <span class="test">  
            last test content  
        </span>  
    </div>   
  
    <div class="last">  
        last  
        <span>  
            last no test content  
        </span>  
    </div>   
    <div class="haha">  
          
    </div>   
</body>   
</html>   
</span>  

2、map和each的区别

$.map(array,fn(value))的作用是将一个数组转换成另一个数组，循环传递数组内的每个元素（value）进行处理，将所有的返回值组成一个新的数组。

特别需要注意的是.$map()不能处理json格式的数组。

$.each(array,fn(value))的作用是循环处理数组中的各个元素，也就是相当于java中的for循环，它没有返回值。它可以处理json格式的数组。

分别看一下例子就了解这两个函数的区别了

实例3-2 $.map()例子：

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
<title>$.map()函数</title>  
<script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
<script language="javascript">  
$(function(){  
    var aArr = ["a", "b", "c", "d", "e"];  
    $("p:eq(0)").text(aArr.join());  
    aArr = $.map(aArr,function(value,index){  
       //将数组转化为大写并添加序号  
       return (value.toUpperCase() + index);  
    });  
    $("p:eq(1)").text(aArr.join());  
    aArr = $.map(aArr,function(value){  
       //将数组元素的值双份处理  
       return value + value;  
    });  
    $("p:eq(2)").text(aArr.join());  
});  
</script>  
</head>  
<body>  
<p></p><p></p><p></p>  
</body>  
</html></span>  

执行结果如图：

实例3-3 $,each例子：

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;">   var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };//json格式的对象(dict)  
    $.each(arr, function(key, value) { alert(key+"="+value); });</span>  

3、not()用法需要参数为jQuery选择器的表达式

例如，要从jQuery对象集合中删除id为seleced的

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;">$("p").not("#selected")</span>  

4、slice(start,[end])

根据下标选取匹配的子集

实例3-4：

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
    $(function(){  
        $("body").html($("p").slice(0, 1))  
    })  
  </script>  
 </head>  
 <body>  
  <p>Hello</p><p>cruel</p><p>World</p>  
 </body>  
</html>  
</span>  

执行结果：Hello

0 0