当前位置: 代码迷 >> Web前端 >> Jquery 基础用法(3)
  详细解决方案

Jquery 基础用法(3)

热度:61   发布时间:2012-10-09 10:21:45.0
Jquery 基础用法(三)
29.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> ]
children纯选择功能.当无参数是是选择所有子元素.当有条件时,按条件所选.例二是选择class为selected的节点!

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

参数可以是expr, html,element

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

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

eg: 2.<p>Hello</p>

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

eg: 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> ]
增加元素或是html内容.增加到搜索的元素之后.例三,是提取id为a的子元素到p元素之后,这时子元素的地位改变,与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> ]

contains也纯选择功能.参数是str类型.即选择test中包括有test内容的节点

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> ]
属于多条件查询.selected应该是class为selected的节点.:first应该是第一个节点!



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> ]
filter 还可以以函数为条件!

33.find(expr)从子节点找出符合expr的.与filter的区别是filter过滤掉$数组中的节点find过滤到的是子节点

eg: <p><span>Hello</span>, how are you?</p>

$("p").find("span") ==>> [ <span>Hello</span> ]
与filter相反,感觉都差不多

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> ]

eg: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> ]

eg: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> ]
参数为空时取得所有父节点

eg: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> ]

eg:2.<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

$("p").prev() ==>> [ <div><span>Hello Again</span></div> ]
这个很明显,取得条件之前的节点.next没那么明显,

39.siblings(expr) 取得相邻两边的节点是.next,与prev的结合体
这两个把next和prev整合了

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