串联函数简介

A.add(B) 　　　　将A和B组合成一个对象
A.children().andSelf() 　　　　将之前的对象添加到操作集合中
A.children().children().end() 　　　　回到最近的一个"破坏性"操作之前。得到孩子
contents()　　　　获得所有子节点(子元素和文本)

代码实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 5  <title>05-可见性过滤选择器.html</title>

 6  <!--   引入jQuery -->

 7  <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

 8  <script src="./script/assist.js" type="text/javascript"></script>

 9  <link rel="stylesheet" type="text/css" href="./css/style.css" />

10   <script type="text/javascript">

11       $(document).ready(function(){

12 //        <input type="button" value=" 选择 id=one和two 的div"  id="b1"/>

13         $("#b1").click(function(){

14             $("#one").add("#two").css("background-color","red");

15         });

16 //            <input type="button" value=" 选择id=one 所有的孩子，以及one自己"  id="b2"/>

17         $("#b2").click(function(){

18             $("#one").children().andSelf().css("background-color","red");

19         });

20 //            <input type="button" value=" 选择id=one 所有的孩子，设置颜色为红，设置one自己为黄"  id="b3"/>

21         $("#b3").click(function(){

22             $("#one").children().css("background-color","red").end().css("background-color","yellow");

23         });

24 //            <input type="button" value=" 获得id=two 子节点个数"  id="b4"/>

25         $("#b4").click(function(){

26             alert($("#two").contents().length);

27         });

28     });

29   </script>

30 </head>

31 <body>

32   <h3>可见性过滤选择器.</h3>

33   <button id="reset">手动重置页面元素</button>

34   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>

35   <br/><br/>

36   <input type="button" value=" 选择 id=one和two 的div"  id="b1"/>

37   <input type="button" value=" 选择id=one 所有的孩子，以及one自己"  id="b2"/>

38   <input type="button" value=" 选择id=one 所有的孩子，设置颜色为红，设置one自己为黄"  id="b3"/>

39   <input type="button" value=" 获得id=two 子节点个数"  id="b4"/>

40   <br /><br />

41

42   <!--文本隐藏域-->

43  <input type="hidden" value="hidden_1">

44  <input type="hidden" value="hidden_2">

45  <input type="hidden" value="hidden_3">

46  <input type="hidden" value="hidden_4">

47

48   <div class="one" id="one" >

49  id为one,class为one的div

50       <div class="mini">class为mini</div>

51   </div>

52

53     <div class="one"  id="two" title="test" >

54      id为two,class为one,title为test的div.

55       <div class="mini"  title="other">class为mini,title为other</div>

56       <div class="mini"  title="test">class为mini,title为test</div>

57   </div>

58

59   <div class="one">

60       <div class="mini">class为mini</div>

61       <div class="mini">class为mini</div>

62       <div class="mini">class为mini</div>

63       <div class="mini"  title="tesst">class为mini,title为tesst</div>

64   </div>

65

66

67   <div style="display:none;"  class="none">style的display为"none"的div</div>

68

69   <div class="hide">class为"hide"的div</div>

70

71   <span id="mover">正在执行动画的span元素.</span>

72 </body>

73 </html>

巴特西

jQuery--筛选【串联函数】

串联函数简介

代码实例

最新文章

热门文章