jquery DOM操作
Posted 不是一般的菜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery DOM操作相关的知识，希望对你有一定的参考价值。
上一篇文章是记录了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等相关方法，下次有空再记录下。
以上是关于jquery DOM操作的主要内容，如果未能解决你的问题，请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段