Skip to content


jQuery学习笔记5

本讲: 29–39点(与dom相关)

29 add(params) 在$所取到的节点数组中添加新的节点.

参数可以是expr, html,element

eg: 1.<p>Hello</p><span>Hello Again</span>

$(”p”).add(”span”)==>[ <p>Hello</p>, <span>Hello Again</span> ]

2.<p>Hello</p>

$(”p”).add(”<span>Again</span>”)==>

[ <p>Hello</p>, <span>Again</span> ]

3. <p>Hello</p><p><span id=”a”>Hello Again</span></p>

$(”p”).add( document.getElementById(”a”) )===>

[ <p>Hello</p>, <span id="a">Hello Again</span> ]

30 children(expr)取得子节点,当expr为空时,取得所有的子节点

eg<div><span>Hello</span><p class=”selected”>Hello Again</p><p>And Again</p></div>

$(”div”).children()==>[><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p> ]

$(”div”).children(”.selected”)==>

[ <p class="selected">Hello Again</p> ]
31 contains(str)找出字节点中包含有str的节点.str起到过滤做用
eg: <p>This is just a test.</p><p>So is this</p>
$("p").contains("test")==>[ <p>This is just a test.</p> ]
32. filter(expression)过滤找出符合expression的节点
eg:<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
$("p").filter(".selected")==>><p class="selected">And Again</p>
$("p").filter(".selected, :first")==>
[ <p>Hello</p>, <p class="selected">And Again</p> ]
filter(filter_func)通过函数来选择是否过滤,filter_func返回true表示过滤
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
$("p").filter(function(index) { return $("ol", this).length == 0; })==>
[ <p>How are you?</p> ]

33. find(expr)从子节点找出符合expr的.与filter的区别是filter过滤掉$数组中的节点
find过滤到的是子节点
eg: <p><span>Hello</span>, how are you?</p>
$("p").find("span")==>[ <span>Hello</span> ];
34. is(expr) 判断是否符合条件,如果$数组的所有节点都不符合条件返回false,
只要有一个符合条件就返回true
eg: <form><p><input type="checkbox" /></p></form>
$("input[@type='checkbox']").parent().is("form")==>false
$("input[@type='checkbox']").parent().is("p")==>true
35 next(expr) 取得最近节点最近那个节点.expr为空时取得所有节点
eg:1.<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
$("p").next()==>[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
2.<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
$("p").next(".selected")==>[ <p class="selected">Hello Again</p> ]
36. not(el),not(expr),not(elems)与add相反,删除符合条件的节点.
eg:1. <p>Hello</p><p id="selected">Hello Again</p>
$("p").not( $("#selected")[0] )==>[ <p>Hello</p> ]
$("p").not("#selected")==>[ <p>Hello</p> ]
2.<div><p>Hello</p><p class="selected">Hello Again</p></div>
$("p").not( $("div p.selected") )==>[ <p>Hello</p> ]
37 parent(expr) 取得父节点
eg:1.<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
$("span").parents()==>[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]
2.<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
$("span").parents("p")==>[ <p><span>Hello</span></p> ]
38 prev(expr) 与next相反,next取得是与节点相邻后面的.prev取得相邻前面的
eg: 1.<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
$("p").prev(".selected")==>[ <div><span>Hello</span></div> ]
2.<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("p").prev()==>[ <div><span>Hello Again</span></div> ]
39 siblings(expr) 取得相邻两边的节点是.next,与prev的结合体

jquery与dom相关的操作先讲到这里,下回接着讲CSS相关操作




Posted in jQuery, 技术.

Tagged with , .


One Response

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. 匿名 says

    Very Good!



Some HTML is OK

or, reply to this post via trackback.