jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery創建元素節點或文本節點或屬性節點、jQuery插入節點、jQuery刪除節點、jQuery復制節點、jQuery替換節點、jQuery包裹節點、jQuery屬性操作、jQuery樣式操作、jQuery設置和獲取HTML、文本和值、jQuery遍歷節點
jQuery操作DOM的總結分享，個人學習筆記!分享的總結不一定很詳細，不會每個方法的用法及詳細描述及說明，只是一個概述!
說說我的個人想法：
很多時候，我們在開發JS特效的時候，腦子里沒有想法，看到問題，第一想到的是思考怎么用那些常用的jQuery方法來解決問題，一些好用的方法及超簡單的方法往往被忽略或者以前系統的學習過jQuery但一時忘記了!所以要牢牢知道jQuery到底有哪些方法，至于此方法怎么用我們可以不知道!大不了多花些時間百度下!多用幾次就記住了!
注：從全局出發，吃透jQuery都能干什么，都有什么方法!至于方法怎么使用，我們可以查詢!
1、創建元素節點或文本節點或屬性節點
方法：$(html);
描述：創建一個DOM對象，并將這個DOM對象包裝成一個jQuery對象后返回。
代碼：$("ul").append($("<li title="屬性節點" >文本節點</li>"));
2、插入節點
| 方法 | 描 述 |
| append() | 向每個匹配的元素內部追加內容。注：在內部元素的最后面追加 |
| appendTo() | 將所有匹配的元素追加到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是將B追加到A中，而是將A追加到B中。 |
| prepend() | 向每個匹配的元素內部前置內容。注：在內部元素的最前面追加 |
| prependTo() | 將所有匹配的元素前置到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).prepend(B)的操作，即不是將B前置到A中，而是將A前置到B中。 |
| after() | 在每個匹配的元索之后插入內容。 |
| insertAfler() | 將所有匹配的元素插入到指定元素的后面。實際上，使用該方法是顛倒了常規的$(A).after(B)的操作，即不是將B插入到A后面，而是將A插入到B后面。 |
| before() | 在每個匹配的元素之前插入內容。 |
| insertBefore() | 將所有匹配的元素捅入到指定的元素的前面。實際上，使用該方法是顛倒了常規的$(A).before(B)的操作，即不是將B插入到A前面，而是將A插入到B前面。 |
3、刪除節點
| 方法 | 描 述 |
| remove() | 當某個節點用remove()方法刪除后，該節點所包含的所有后代節點將同時被刪除。這個方法的返回值是一個指向已被刪除的節點的引用，因此可以在以后再使用這些元素。 |
| detach() | detach()和remove()一樣，也是從DOM中去掉所有匹配的元素。但需要注意的是，這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數據都會保留下來。 |
| empty() | 嚴格地講，empty()方法并不是刪除節點，而是清空節點，它能清空元素中的所有后代節點。 |
4、復制節點
方法：clone()
語法格式：clone(true)
描述：其中參數設置為true就可以復制元素的所有事件的處理。
代碼：
var kelong = $("ul").clone();//克隆好的對象
kelong.addClass("yangshi");//添加個css樣式，還可以使用jQuery其他方法進一步操作,很方便
$("p").append(kelong);
5、替換節點
方法：replaceWith()和replaceAll()
描述：將所有選擇的元素替換成指定的html和dom元素。其中參數被選擇替換的內容。replaceWith() 與replaceAll() 方法都可以實現元素節點的替換，二者最大的區別在于替換字符的順序。
$("p")replaceWith("元素")和$("元素").replaceAll("p")只是順序相反，效果是一樣的。
注：一旦完成替換，被替換元素中的全部事件都將消失，需要在新元素上重新綁定事件。
6、包裹節點
| 方法 | 描 述 |
| wrap() | 代碼： |
| wrapAll() | 該方法會將所有匹配的元素用一個元素來包裹。它不同于wrap()方法，wrap()方法是將所有的元素進行單獨的包裹。 |
| wrapInner() | 該方法將每一個匹配的元素的子內容（包括文本節點）用其他結構化的標記包裹起來。 |
7、屬性操作
| 方法 | 描 述 |
| attr()、prop() | 設置或返回匹配元素的屬性和值。 |
| removeAttr()、removeProp() | 從所有匹配的元素中移除指定的屬性。 |
8、樣式操作
| 方法 | 描 述 |
| attr() | 獲取樣式和設置樣式。$("img").attr("width","180"); |
| addClass() | 追加樣式，向匹配的元素添加指定的類名。 |
| removeClass() | 移除樣式，從所有匹配的元素中刪除全部或者指定的類。$("div").addClass("yangshi") |
| toggleClass() | 切換樣式。 |
| hasClass() | 判斷是否含有某個樣式。 |
9、設置和獲取HTML、文本和值
| 方法 | 描述 |
| html() | 返回或設置被選元素的內容。$("p").html("Hello <b>world</b>!"); |
| text() | 讀取或者設置某個元素中的文本內容。 |
| val() | 設置和獲取元素的值。 |
10、遍歷節點
| 方法 | 描述 |
| children() | 獲取匹配元素的子元素集合。 |
| next() | 獲取匹配元素后面緊鄰的同輩元素。 |
| prev() | 獲取匹配元素前面緊鄰的同輩元素。 |
| siblings() | 獲取匹配元素前后所有的同輩元素。 |
| closest() | 獲取最近的匹配元素,首先檢查當前元素是否匹配，如果匹配則直接返回元素本身，如果不匹配則向上查找元素，逐級向上直到找到匹配選擇器元素。 |
| parent() | 獲取集合中每個匹配元素的父級元素。 |
| parents() | 獲取集合中每個匹配元素的祖先元素。 |
| 其他 | find()filter()nextAll()prevAll() |
11、CSS-DOM操作
| 方法 | 描述 |
| css() | 獲取和設置style對象的各種屬性。$("p").css("color","red");$("p").css({"color":"red","font-size":"30px"}); |
| height() | 獲取和設置元素高度。 |
| width() | 獲取和設置元素寬度。 |
| offset() | 獲取元素在當前視窗的相對偏移，返回的對象包括兩個屬性，即top和left。 |
| position() | 獲取元素相對于最近的一個(position樣式屬性設置為relative或者absolute的)祖父節點的相對偏移，返回的對象包括兩個屬性，即top和left。 |
| scrollTop() | 獲取元素的滾動條距頂端的距離。 |
| scrollLef() | 獲取元素的滾動條距左側的距離。 |
總結
以上是生活随笔為你收集整理的jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery 事件方法大全
- 下一篇： 2017年html5行业报告,云适配发布