jQuery 集合 过滤操作（eq filter hasClass is has map not slice）

1.eq(index)

2.filter(expr)

3.filter(function)

4.hasClass(class)

5.is(expr)

6.has(expr)

7.map(callback)

8.not(expr)

9.slice(start [,end])  不包括end

实例和效果如下：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
 6     <title>过滤操作应用示例</title>
 7     <style type="text/css">
 8         .borderClass{
 9             border:3px solid green
10         }
11     </style>
12     <script language="javascript" type="text/javascript">
13         $(document).ready(function(){
14             $("td").eq(2).css("background","red");
15             $("td").filter("#td2").css("background","blue");
16             $("tr").filter(function(index){
17                 return $("td", this).length == 1; //此条件成立，则将该"td"元素添加到集合中
18             }).css("background","yellow");
19             $("td").has("p").css("color","red");
20             $("td").click(function(){
21                 if($(this).hasClass("borderClass")){
22                     $(this).css("color","blue");
23                 }
24             });
25             if($("#td2").parents().is("table")){
26                 alert("id是td2的单元格的父元素中至少有一个是table");
27             }
28             $("#p2").append($("input").map(function(){
29                 return $(this).val();
30             }).get().join(","));
31             $("form").not("input").css("background-color","yellow");
32             $("span").slice(0,2).css("color","blue");//不包括结束索引
33         });
34     </script>
35 </head>
36 <body bgcolor="#EEEEEE">
37     <table width="200" border="1">
38         <tr>
39             <td width="50%"><p>内容</p></td>
40             <td id="td2">&nbsp;</td>
41         </tr>
42         <tr>
43             <td >&nbsp;</td>
44             <td class="borderClass">内容</td>
45         </tr>
46         <tr>
47             <td colspan="2">&nbsp;</td> 
48         </tr>
49     </table>
50     <p id="p2"><b>网站：</b></p>
51     <form>
52         <input type="text" value="新浪"/>
53         <input type="text" value="网易"/>
54         <p>hello</p>
55     </form>
56     <span>span1</span>
57     <span>span2</span>
58     <span>span3</span>
59 </body>
60 </html>

 

posted @ 2012-07-09 16:58  lihui_yy  阅读(1744)  评论(0)  编辑  收藏  举报