jQuery 集合 串联操作（ andSelf() end() add() contents() ）

1.andSelf() 新增自身对象到当前的jQuery对象里，通常用法：

$('li.third-item').nextAll().andSelf() .css('background-color', 'red');

2.end()  返回到上一次jQuery对象, 通常用于链式操作里:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');

3.add()  新增对象到当前的jQuery对象里
4.contents()  查找子节点元素。与children()不同的是，它包括文本节点及所生成的jQuery对象中的页面元素。

举个例子：

 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>
 8         .border{border: 2px solid red; }
 9     </style>
10     <script language="javascript" type="text/javascript">
11         $(document).ready(function(){
12             $("#div1").find("span").andSelf().addClass("border");
13             $("#div2").find("p").css("color","blue");
14             $("#div3").find("option").css("color","red").end().find("p").css("background-color","yellow");
15             $("#p1").add("ul").css("color","#FF44FF");
16             $("#p2").contents().css("color","green");
17         });
18     </script>
19 </head>
20 <body bgcolor="#EEEEEE">
21     <div id="div1">
22         <p>p元素1</p>
23         <span id="span1">span元素一</span>
24         <span id="span2">span元素二</span>
25     </div>
26     <hr/>
27     <div id="div2">
28         <p>p元素2</p>
29         <span>span元素三</span>
30     </div>
31     <hr/>
32     <div id="div3">
33         请选择运动项目：
34         <select>
35             <option id="op1">长跑</option>
36             <option id="op2">短跑</option>
37         </select>
38         <p>p元素3</p>
39     </div>
40     <hr/>
41     <p id="p1">p元素测试</p>
42     <ul>
43         <li>(1)hello</li>
44         <li>(2)jQuery</li>
45     </ul>
46     <hr/>
47     <p id="p2">content:p元素4<a>[p内嵌的a元素]</a></p>
48 </body>
49 </html>

运行效果如下：

posted @ 2012-07-09 15:30  lihui_yy  阅读(1033)  评论(0)  编辑  收藏  举报