jQuery_树遍历(关系)-【官方】百战程序员_IT在线教育培训机构

选择器
1. 基础选择器类选择器元素选择器 ID选择器子元素选择器后代元素选择器
2. 属性选择器完美匹配包含前缀开头结尾空格
3. jQuery扩展选择器 eq even odd first last gt lt
DOM操作
1. Class操作 addClass() removeClass() toggleClass() hasClass()
2. 文本操作 html() text() val()
3. 属性操作 attr() removeAttr()
4. DOM 插入并包裹现有内容 .wrap() .unwrap() .wrapAll() .wrapInner()
5. DOM 插入现有元素内 .append() .prepend()
6. DOM 插入现有元素外 .after() .before()
7. DOM 移除 .empty() .remove()
8. DOM 替换 .replaceAll() .replaceWith()
CSS操作
1. 尺寸 .css() .height()，.width() .innerHeight()，.innerWidth() .outerHeight()，.outerWidth()
2. 位置 .offset() .position() .scrollLeft() .scrollTop()
事件处理
1. 绑定事件处理器 .on() .one() .off()
2. 鼠标事件 .click() .hover() .mouseenter() .mouseleave() .mousemove() .mouseover() .mouseout()
3. 表单事件 .focus() .blur() .change() .submit()
4. 键盘事件 .keydown() .keypress() .keyup()
5. 浏览器事件 .resize() .scroll()
6. 事件对象 event.type event.target event.currentTarget event.preventDefault() event.stopPropagation()
遍历
1. 列表遍历 .map() .each()
2. 列表中获得一个JS对象的DOM元素 .get()
3. 树遍历（关系）
  1. .children()
  2. .find()
  3. .next()
  4. .parent()
  5. .siblings()
动画

.children()

获得子元素，可以传递一个选择器参数


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul class="first">
        <li>item 1</li>
        <li>
            <ul class="secode">
                <li>child item 1</li>
                <li>child item 2</li>
                <span>child span</span>
            </ul>
        </li>
        <li>item 3</li>
    </ul>
    <script>
        $(".first").children().css("border","1px solid red")
        $(".first").children("li").css("border","1px solid red")
    </script>
</body>
</html>

.find()

寻找后代元素

温馨提示
.find()和.children()方法是相似的，但后者只是再DOM树中向下遍历一个层级（注：就是只查找子元素，而不是后代元素）。


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul class="first">
        <li>item 1</li>
        <li>
            <ul class="secode">
                <li>child item 1</li>
                <li>child item 2</li>
                <span>child span</span>
            </ul>
        </li>
        <li>item 3</li>
    </ul>
    <script>
        $(".first").find("li").css("border","1px solid red")
    </script>
</body>
</html>

.next()

取得元素紧邻的后面同辈元素


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div>Hello</div>
    <p>内容</p>
    <span>元素</span>
    <script>
        $("div").next().css("border","2px solid red")
    </script>
</body>
</html>

.parent()

取得元素的父元素


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div>
        <p>Hello</p>
    </div>
    <script>
       $("p").parent().css("border","2px solid red")
    </script>
</body>
</html>

.siblings()

获得元素的兄弟元素，可以传递一个选择器参数


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div>
        <p>Hello1</p>
        <p>Hello2</p>
        <span>World</span>
        <p class="text">Hello3</p>
        <p>Hello4</p>
        <p>Hello5</p>
    </div>
    <script>
       $(".text").siblings().css("border","2px solid red")
       $(".text").siblings("p").css("border","2px solid red")
    </script>
</body>
</html>

实时效果反馈

1. 下列哪个方法可以获得元素同级关系：

A children()

B find()

C next()

D siblings()

答案

1=>D

jQuery_遍历 jQuery_动画(一)

北京市昌平区回龙观镇南店村综合商业楼2楼226室