day16-Jquery 文档操作

一、前言

　　今天我们来学习一下文档处理，这个在我们工作也经常用到，比如我们需要插入一行数据，比如说要插入一个标签，等等，这个会经常用到的。下面只是写了经常用的，如果想看更多：http://jquery.cuishifeng.cn/    的  文档处理   部分。

二、操作的html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <input id="t1" type="text"/>
    <input id="a1" type="button" value="添加">
    <input id="a2" type="button" value="删除">
    <input id="a3" type="button" value="复制">
 
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
 
    <script src="jquery-1.12.4.js"></script>
    <script>
            //js代码
    </script>
</body>

效果图：

三、内部插入

 3.1、append

说明：向每个匹配的元素内部追加内容。

1
2
3
4
5
$("#a1").click(function(){
    var v = $("#t1").val();
    var temp = "<li>" + v + "</li>";
    $("#u1").append(temp); //在尾部添加
});

3.2、prepend

说明：向每个匹配的元素内部前置内容。

1
2
3
4
5
$("#a1").click(function(){
    var v = $("#t1").val();
    var temp = "<li>" + v + "</li>";
    $("#u1").prepend(temp); //在前置添加
});

四、外部插入

4.1、after

说明：在每个匹配的元素之后插入内容。

1
2
3
4
5
$("#a1").click(function(){
    var v = $("#t1").val();
    var temp = "<li>" + v + "</li>";
    $("#u1").after(temp); //在当前标签的外部的后面插入
});

 4.2、before

说明：在每个匹配的元素之前插入内容。

1
2
3
4
5
$("#a1").click(function(){
    var v = $("#t1").val();
    var temp = "<li>" + v + "</li>";
    $("#u1").before(temp); //在当前标签的外部的之前插入
});

 五、删除

5.1、remove

说明：从DOM中删除所有匹配的元素。

1
2
3
4
$("#a2").click(function(){
    var index = $("#t1").val();
    $("#u1 li").eq(index).remove(); //删除所有内容，包括标签
});

 5.2、empty

说明：删除匹配的元素集合中所有的子节点。

1
2
3
4
$("#a2").click(function(){
    var index = $("#t1").val();
    $("#u1 li").eq(index).empty()；//只清空内容，不删除标签
});

六、复制

6.1、clone

说明：克隆匹配的DOM元素并且选中这些克隆的副本。

1
2
3
4
5
$("#a3").click(function(){
    var index = $("#t1").val();
    var v = $("#u1 li").eq(index).clone(); //复制当前标签
    $("#u1").append(v);
});

七、搞个大栗子

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <input id="i1" type="text">
 9     <input id="i2" type="button" value="添加">
10     <input id="i3" type="button" value="删除">
11     <input id="i4" type="button" value="清除">
12     <input id="i5" type="button" value="复制">
13 
14     <ul id="u1">
15         <li>1</li>
16          <li>2</li>
17          <li>3</li>
18     </ul>
19     <script src="jq.js"></script>
20     <script>
21         $("#i2").click(function(){
22             var v=$("#i1").val()
23             var tmp="<li>"+v +"</li>"
24 //            $("#u1").append(tmp)
25             $("#u1").prepend(tmp)
26 //            $("#u1").after(tmp)
27 //            $("#u1").before(tmp)
28         });
29 
30         $("#i3").click(function(){
31             var i=$("#i1").val();
32             console.log(i);
33             $("#u1 li").eq(i).remove();
34             console.log($("#ul li"))
35         });
36 
37         $("#i4").click(function(){
38             var i=$("#i1").val()
39             $("#u1 li").eq(i).empty()
40         })
41 
42         $("#i5").click(function(){
43             var i=$("#i1").val();
44            var v= $("#u1 li").eq(i).clone()
45             $("#u1").append(v)
46         })
47 
48 
49     </script>
50 </body>
51 </html>

 

posted @ 2018-05-24 10:06  东郭仔  阅读(109)  评论(0)    收藏  举报