jquery DOM操做（一）

时间 2019-12-14

标签 jquery dom 栏目 JQuery 繁體版

原文原文链接

　　上一篇文章是记录了jquery中选择器的做用，这里只要记录下jquery中的DOM操做，仍是按照上篇的格式来。css

　　下面是测试用的html代码，接下来DOM的操做会在下面的代码下进行。html

1     <body>
2         <p>你最喜欢的水果是?</p>
3         <ul>
4             <li>苹果</li>
5             <li>橘子</li>
6             <li>梨子</li>
7             <li>banana</li>
8         </ul>
9     </body>

 1         <script>
 2             $(function(){
 3                 var $newLi1 = $("<li>桃子</li>")//$(html),会根据传入的html建立一个DOM对象而且加工成jQuery对象后返回。;
 4                 var $newLi2 = $("<li>西瓜</li>");//上面这种方法传入的html格式是须要闭合的，而且标签是须要小写的。能够传入$("<li />")
 5                 var $newLi3 = $("<li title='猕猴桃'>猕猴桃</li>")//若是在在建立的html中包含属性或者特性也会体如今建立好的元素中
 6                 var $newLi4 = $("<li data-name='xwt'>葡萄</li>")
 7                 var $ul = $("ul");
 8                 $ul.append($newLi1);//append方法是向每一个匹配的元素内部追加内容（在结束标签的前面添加内容，添加的内容被元素包围）
 9                 $newLi2.appendTo($ul);//appendTo是将因此匹配的元素追加到传入元素的内部。和上面的方法大体相同，只是两个元素的位置改变了。
10                 $ul.prepend($newLi3);//prepend将匹配的元素头部追加元素。另外同append相同
11                 $newLi4.prependTo($ul);//prependTo将匹配的元素追加到传入的元素中。其余同appendTo
12                 $ul.after($("<button>测试</button>"));//after是在指定元素的后面（不是内部）添加相关的元素;insertAfter()方法颠倒了2个对象的位置。
13                 $("button").before("<button>测试1</button>");//特别注意：以上的每一个插入对象的方法(如append,prepend,after,before)参数能够是jquery对象，即$("XXX")，也能够是普通文本。
14                 $("<p>123</p>").insertBefore("button:first");//若是文本符合html语法，则建立相应的element，不然以文本插入
15                 $("li:first-child").after($("li:nth-child(2)"));//若是是操做已有的节点，这些方法也能够用于元素的移动。也可写成.after("li:nth-child(2)")
16                 var $lastLi = $("ul > li:last").remove();//移除最后一个ul中的li节点。若是不传参数则删除所有匹配的元素集合。删除后返回引用remove以前的对象，包含删除的元素。
17                 var $lastSecondLi = $("ul > li").detach(":last");//使用方法和remove基本相同。可是detach不会删除元素已经绑定的函数和附加数据
18                 $lastSecondLi.appendTo($ul);//添加回去删除的倒数第二个元素
19                 $ul.append($lastLi);//将已经删除掉的li元素从新添加回来。若是以前该元素绑定过函数或者附加数据，从新添加回去之后函数绑定失效，丢失附加数据
20                 $("ul > li:first").appendTo($ul);//appendTo方法简化上面2部。原理相同，先删除指定元素在添加回去
21                 $("button").empty();//empty()并非删除节点，而是清除元素的全部后代节点
22                 var $ul2 = $("ul").clone();//克隆当前的元素对象，可是该对象和克隆的对象是彻底不一样的2个对象。包括里面封装的DOM元素也是不用的。若是想复制其绑定事件,则用XX.clone(true);
23                 $("button").replaceWith($("<input type='checkbox'>"));//用括号中的元素替换前面的元素。绑定的事件会失效。replaceAll做用相同，颠倒2个元素的位置而已
24                 $("li").wrap("<strong></strong>");//会为每一个匹配的元素在外层包裹一个strong标签
25                 $("li").wrapAll($("<div></div>"));//会为匹配到的全部元素一块儿在外层包裹一个div。若是被包裹的多个元素之间有其余元素则会被放到包裹元素以后
26                 $("li").wrapInner("<span></span");//会为每一个匹配中的元素的子节点外边包裹一层标签
27             });
28         </script>

　　操做DOM元素的主要方法和功能都在注释中详细说明了。这里尚未介绍jquery操做属性和css等相关方法，下次有空再记录下。jquery