上一篇文章是记录了jquery中选择器的作用，这里只要记录下jquery中的DOM操作，还是按照上篇的格式来。
下面是测试用的html代码，接下来DOM的操作会在下面的代码下进行。
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等相关方法，下次有空再记录下。
时间： 2024-09-30 21:09:38