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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。