Fork me on GitHub

节点操作

发表于 | 分类于 | 阅读次数:
字数统计: 3,708 字 | 阅读时长 ≈ 19 分钟

节点操作

节点关系

children()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('div').click(function () {
        $(this).children().css('background-color','red');
        // div 的直接子元素为 teshu 变红
        //$(this).children('.teshu').css('background-color','red');
    });
</script>
</body>
</html>

mark

find()方法

由于children()只能查找子元素，如果是孙子元素是找不到的。所以jQuery提供了find()”寻找”的方法。

作用：在某个节点中查找符合选择器要求的后代节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('div').click(function () {
        $(this).find('p').css('background-color','red');
        //$(this).find('.teshu').css('background-color','red');
        // $(this).find('span').css('background-color','red');
    });
</script>
</body>
</html>

parent()方法

作用：表示查找当前节点的直属父节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
   $('p').click(function () {
       //$(this).parent('.div3').css('border','10px solid orange');
       $(this).parent().css('border','10px solid orange');
   });
</script>
</body>
</html>

parents()方法

作用：表示查找当前节点的所有祖先节点，直到html节点为止。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
   $('p').click(function () {
       // $(this).parents('body').css('border','10px solid orange');
       $(this).parents().css('border','10px solid orange');
   });
</script>
</body>
</html>

mark

siblings()方法

作用：访问当前节点的所有兄弟节点（除本身之外）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    // $('p').click(function () {
    //     $(this).css('background-color','yellow').siblings().css('background-color','pink');
    // });
    // 方法1：
    // $('p').mouseenter(function () {
    //     $(this).css('background-color','yellow').siblings().css('background-color','pink');
    // }).mouseleave(function () {
    //     $(this).css('background-color','pink');
    // });
    $('p').hover(function () {
        $(this).css('background-color','yellow').siblings().css('background-color','pink');
    },function () {
        $(this).css('background-color','pink');
    });
</script>
</body>
</html>

next()、prev()、nextAll()和prevAll()方法

next() 后一个亲兄弟

prev() 前一个亲兄弟

nextAll() 后所有亲兄弟

prevAll() 前所有亲兄弟

手风琴效果例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson4</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .sfq{
            width: 500px;
            border: 1px solid black;
            margin: 80px auto;
        }
        .sfq ul{
            list-style: none;
        }
        .sfq ul li{
            border-bottom: 1px dotted #333;
        }
        .sfq ul li div{
            display: none;
            border: 1px dotted lightgray;
        }
    </style>
</head>
<body>
<div class="sfq">
    <ul>
        <li>
            <h2>这是标题</h2>
            <div class="info">
                这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
            </div>
        </li>
        <li>
            <h2>这是标题</h2>
            <div class="info">
                这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
            </div>
        </li>
        <li>
            <h2>这是标题</h2>
            <div class="info">
                这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
            </div>
        </li>
    </ul>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('h2').click(function () {
        // :visible 表示可见的
        if($(this).siblings().is(':visible')){
            $(this).siblings().slideUp();
        }else{
            //在当前这个点击的h2的兄弟展开之前，先将所有的收起
            $('.info').slideUp();
            $(this).siblings().slideDown();
        }
    });
</script>
</body>
</html>

mark

节点关系综合查找

在jQuery中可以通过连续打点来调用节点的关系方法。但是这个操作必须存在一个前提，那就是：一定要知道当前正在操作的元素是谁。

节点顺序和遍历

index()方法

index()方法用来获取当前元素在其兄弟节点中的排名，从0开始。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('.teshu').click(function () {
        alert($(this).index());
    });
</script>
</body>
</html>

对应

jquery中的对应实际上指的是eq()函数，他的作用是获取集合中指定序号的节点 需要说明的一点就是序号是从0开始。

语法：$(‘selector’).eq(index)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('.div1 p').click(function () {
        $('.div2 p').eq($(this).index()).css('background-color','red');
    });
</script>
</body>
</html>

mark

选项卡例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .xxk{
            width: 300px;
            height: 150px;
            border: 1px solid black;
            margin: 100px auto;
        }
        .xxk .up{
            width: 100%;
            height: 50px;
            border: 1px solid black;
        }
        .xxk .up ul{
            list-style: none;
        }
        .up ul li{
            float:left;
            width: 100px;
            height: 100%;
            text-align: center;
            line-height: 50px;
        }
        /*鼠标移动到哪里改变颜色*/
        /*.up ul li:hover{*/
            /*background-color: orange;*/
        /*}*/
        .up ul .show{
            background-color:orange;
        }
        .xxk .down{
            width: 100%;
            height: 100px;
        }
        .xxk .down ul{
            list-style: none;
        }
        .down ul li{
            width: 300px;
            height: 100px;
            display: none;
        }
        /*选择器的有限级 id>class>标签*/
        .down ul .show-li{
            display: block;
        }
    </style>
</head>
<body>
<div class="xxk">
    <div class="up">
        <ul>
            <li class="show"><a href="#">首页</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">游戏</a></li>
        </ul>
    </div>
    <div class="down">
        <ul>
            <li class="show-li">首页首页首页</li>
            <li>视频视频视频</li>
            <li>游戏游戏游戏</li>
        </ul>
    </div>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('.up li').click(function () {
        //控制 标题
        $(this).addClass('show').siblings().removeClass('show');
        // 控制内容部分
        $('.down li').eq($(this).index()).addClass('show-li').siblings().removeClass('show-li');
    });
</script>
</body>
</html>

mark

each()方法

作用：遍历每个节点，然后执行里面的回调函数。

注意：回调函数中如果存在$(this)，那么它指的是【遍历中当前这一次的这个节点】。

语法：$(‘selector’).each(func)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    <!--谁访问就谁的子元素修改-->
    // $('div').each(function (index) {
    //     $(this).children().eq(1).css('background-color','red');
    //     console.log(index);
    // });
    // 单击遍历
    // $('div').each(function (index) {
    //     $(this).children().eq(1).click(function () {
    //         console.log(index);
    //     });
    // })
    $('div').each(function (index,ele) {
        $(this).children().eq(1).css('background-color','red');
        console.log(index);
        console.log(ele);
    });
</script>
</body>
</html>

补充：delay()函数表示延迟：**

$().delay(600).animate();

$().delay(600).fadeOut();

$().delay(600).show(400); //均表示动画延迟600ms执行

360特效例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
        .cont{
            width: 1200px;  height: 300px; border: 1px solid black;
            position: relative;
        }
        .cont img{  position: absolute; display: none;  }
        img:nth-child(2){  left: 100px; top: 50px;  }
        img:nth-child(3){  left: 300px; top: 50px;  }
        img:nth-child(4){  left: 500px; top: 50px;  }
        img:nth-child(5){  left: 800px; top: 50px;  }
    </style>
</head>
<body>
<div class="cont">
    <img src="img/360_1.png" alt=""/>
    <img src="img/360_2.png" alt=""/>
    <img src="img/360_3.png" alt=""/>
    <img src="img/360_4.png" alt=""/>
    <img src="img/360_5.png" alt=""/>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('img').each(function (index) {
        // $(this).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
        $(this).delay(500*index).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
    });
</script>
</body>
</html>

mark

表格列变色例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
    </style>
</head>
<body>
<table align="center" width="500" border="1" cellspacing="0">
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
</table>
</table>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    <!-- 让表格的列变色 -->
    $('tr').each(function () {
       $(this).children().eq(2).css('background-color','red');
    });
</script>
</body>
</html>

节点操作

内部插入append()、appendTo()、prepend()、prependTo()方法

作用：这四个方法都用来在某个节点内部插入新内容

语法：

A.append(B); //向【A节点内部现有内容之后】追加【B节点】

B.appendTo(A); //将【B节点】追加到【A节点内部现有内容之后】

A.prepend(B); //向【A节点内部现有内容之前】追加【B节点】

B.prependTo(A); //将【B节点】追加到【A节点内部的现有内容之前】

说明：四个方法所表达的含义大致相同，只不过在语法上略有出入。其中AB均为节点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson6</title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('div').click(function () {
        $(this).append($('<p>新添加的</p>'));
    });
  
</script>
</body>
</html>

外部插入after()、before()、insertAfter()、insertBefore()

作用：相比于前面的四个方法的作用，这四个方法可以认为是给当前节点添加兄弟

语法：

A.after(B);//在【A节点之后】添加【同级节点B】

A.before(B);//在【A节点之前】添加【同级节点B】

A.insertAfter(B);//把【A节点】添加到【B节点之后】

A.insertBefore(B); //将【A节点】添加到【B节点之前】

说明：四个方法所表达的含义大致相同，只不过在语法上略有出入。其中AB均为节点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson6</title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('div').click(function () {
        $(this).after($('<h2>这是新添加的兄弟节点</h2>'))
    });
</script>
</body>
</html>

mark

改变节点位置

对于jq来说操作的实际上要么是节点，要么是节点组。那么有一条原则在操作节点的时候我们就必须遵守：

通过搜索获得的节点在页面中只能同一时刻出现在一个位置

这就是frank总结的‘节点守恒定律’。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
假设存在HTML结构：
		<div id="box1">	
			<p class="xiaoming">我是小明</p>
		</div>
		<div id="box2">
		</div>
现在执行命令：
		$("#box2").append($(".xiaoming"));
则HTML页面将变为：
		<div id="box1">
		</div>
		<div id="box2">
			<p class="xiaoming">我是小明</p>
		</div>

特别需要说明的是，在jq中并没有提供所谓的change之类的方法。因此改变节点的位置还是需要通过append这种方法来实现。

包裹wrap()

作用：给自己增加一个父类(开发中基本没啥用)

语法：A.warp(B)

删除节点empty()、remove()

作用：empty()表示删除指定节点中的内容，而remove()则表示移除自己

语法：

A.empty() 等价于 A.html(‘’);

A.remove();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson6</title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
  $('div').click(function () {
      //$(this).empty();
      $(this).remove();
  });
</script>
</body>
</html>

克隆clone()

作用：相当于js中的cloneNode操作，即克隆的节点在页面中没有自己的位置。需要通过append等操作才能够追加到页面当中。

语法：A.append(B.clone) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson6</title>
    <style>
        .div1,.div2,.div3{
            width: 500px;  height: 150px;  border: 1px solid black;  margin: 20px;  }
        div p{
            width: 100px;  height: 100px;  background-color: skyblue;
            float: left; margin: 5px;  }
        div .teshu{
            background-color: orange;  }
    </style>
</head>
<body>
<div class="div1">
    <p class="teshu">teshu</p>
    <p></p>
    <p><span>span</span></p>
</div>
<div class="div2">
    <p></p>
    <p class="teshu">teshu</p>
    <p class="teshu">teshu</p>
</div>
<div class="div3">
    <p></p>
    <p class="teshu">teshu</p>
    <p></p>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('div').click(function () {
        $('body').append($(this).clone());
    });
</script>
</body>
</html>

节点移动例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson6</title>
    <style>
        .leftDiv,.rightDiv{  width: 150px; height: 400px;
            float: left; border: 1px solid black;  }
        .menu{  float: left; margin: 0 30px;  }
    </style>
</head>
<body>
<div class="leftDiv">
    <p><span>大狮子</span><input type="checkbox"/></p>
    <p><span>大老虎</span><input type="checkbox"/></p>
    <p><span>梅花鹿</span><input type="checkbox"/></p>
    <p><span>小松鼠</span><input type="checkbox"/></p>
    <p><span>大象</span><input type="checkbox"/></p>
    <p><span>黄河</span><input type="checkbox"/></p>
    <p><span>长江</span><input type="checkbox"/></p>
    <p><span>高山</span><input type="checkbox"/></p>
    <p><span>水杯</span><input type="checkbox"/></p>
    <p><span>麦克风</span><input type="checkbox"/></p>
</div>
<div class="menu">
    <button> ----> </button>
    <button> <---- </button>
</div>
<div class="rightDiv"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
   $('.menu button').eq(0).click(function () {
       $('.rightDiv').append($('.leftDiv input:checked').parent());
       $('.rightDiv input:checked').attr('checked',false);
   });
</script>
</body>
</html>

mark

坚持原创技术分享，您的支持将鼓励我继续创作！