jQuery遍历节点

html代码

1. <div>
2. <p>武汉长乐教育</p>
3. <span>在哪才能真正学习会PHP技术？</span>
4. <a href="#">
5. <p>欢迎前来试听</p>
6. </a>
7. </div>

children()方法

1. var $child = $("div").children(); //获取div元素的子类元素
2. alert($child.length); //打印div元素有几个子类元素
3. $("div").children("p"); //获取div元素的子类元素p

next()方法

1. var $a = $("div span").next(); //获取下一个同辈的元素

prev()方法

1. var $p = $("div span").prev(); //获取上一个同辈的元素

siblings()方法

1. <ul>
2. <li>一对一授课哦</li>
3. <li>学完高薪就业</li>
4. <li>学员供不应求</li>
5. </ul>

1. $("li").click(function(){
2. $(this).css("color", "red");
3. });

closest()、parent()和parents()方法

1. <div>
2. <p>武汉长乐教育<p>
3. <p>口碑超好的武汉PHP培训机构</p>
4. <p>您学会了吗？</p>
5. <span></span>
6. <a href="#">
7. 点我
8. </a>
9. </div>
11. <div id="first">
12. <p>一级目录</p>
13. <div>
14. <p>二级目录</p>
15. <div>
16. <p>三级目录</p>
17. <div>
18. <a href="#">点我</a>
19. </div>
20. </div>
21. </div>
22. </div>

1. $("a").click(function(){
2. $(this).closest("div"); //一直向上找符合条件的元素，返回一条，如果自己符合就返回自己
3. //$(this).closest("a");
4. $(this).parent(); //返回父级元素，返回一条
6. $(this).parents("div"); //获得集合中每个匹配的祖先元素，返回多个父节点
7. });

find()方法

1. $("#first").find("a"); //一直往下级找，返回多个子孙节点