摘要：今天來和大家分享有關jQuery框架中DOM操作的相關技術，又是一個堪稱DOM“全家桶”系列的講解，建議收藏關注認真學習！
本文分享自華為雲社區《【JQuery框架】超詳細DOM操作看這一篇就夠了！》，原文作者：灰小猿 。
今天來和大家分享有關jQuery框架中DOM操作的相關技術，又是一個堪稱DOM“全家桶”系列的講解，建議收藏關注認真學習！
一、內容操作
在進行內容操作時，對於設置和獲取元素的內容使用同一個函數進行操作，設置元素內容時直接在函數中傳入參數即可。
1. html()
作用：獲取/設置元素的標簽體內容
// 獲取mydiv的標簽體內容 var divValue = $("#mydiv").html() // 設置mydiv的標簽體內容 var divValue = $("#mydiv").html(“你好”)
2. text()
作用：獲取/設置元素的標簽體純文本內容
// 獲取mydiv文本內容 var divText = $("#mydiv").text() // 設置mydiv文本內容 var divText = $("#mydiv").text(“你好”)
3. val()
作用：獲取/設置元素的value屬性值
// 獲取myinput 的value值 var value = $("#myinput").val() // 設置myinput 的value值 var value = $("#myinput").val(“你好”)
關於上述代碼的實際演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function (){
// 獲取myinput 的value值
var value = $("#myinput").val()
// alert(value);
// 獲取mydiv的標簽體內容
var divValue = $("#mydiv").html()
alert(divValue);
// 獲取mydiv文本內容
var divText = $("#mydiv").text()
// alert(divText)
});
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="張三" /><br />
<div id="mydiv"><p><a href="#">標題標簽</a></p></div>
</body>
</html>
二、屬性操作
（1）通用屬性操作
1. attr():
作用：獲取/設置元素的屬性
//獲取北京節點的name屬性值 var bj = $("#bj").attr("name"); alert(bj); //設置北京節點的name屬性的值為dabeijing $("#bj").attr("name", "dabeijing"); //新增北京節點的discription屬性 屬性值是didu $("#bj").attr("discription", "didu"); //刪除北京節點的name屬性並檢驗name屬性是否存在
2. removeAttr()
作用：刪除屬性
//刪除北京節點的name屬性並檢驗name屬性是否存在 $("#bj").removeAttr("name");
3. prop()
作用：獲取/設置元素的屬性
//獲得hobby的的選中狀態 var hobby_type = $("#hobby").prop("checkbox");
4. removeProp()
作用：刪除屬性
//刪除hobby的CheckBox屬性 var hobby_type = $("#hobby").removeProp("checkbox");
5.attr和prop區別
- 如果操作的是元素的固有屬性，則建議使用prop
- 如果操作的是元素自定義的屬性，則建議使用attr
（2）對class屬性操作
1. addClass()
作用：添加class屬性值
//<input type="button" value=" addClass" id="b2"/> //給one標簽增加屬性 $("#b2").click(function () { $("#one").addClass("second"); });
2. removeClass()
作用：刪除class屬性值//<input type=
//<input type="button" value="removeClass" id="b3"/> //刪除one標簽的class屬性 $("#b3").click(function () { $("#one").removeClass("second"); });
3. toggleClass()
作用：切換class屬性
//<input type="button" value=" 切換樣式" id="b4"/> //為one標簽的class樣式進行切換，有class屬性就刪除，沒有就添加 $("#b4").click(function () { $("#one").toggleClass("second"); });
在這里對該函數做一個詳細的介紹：
如toggleClass("one"):
* 判斷如果元素對象上存在class="one"，則將屬性值one刪除掉。 如果元素對象上不存在class="one"，則添加
4. css()
作用：修改元素屬性
//<input type="button" value=" 通過css()獲得id為one背景顏色" id="b5"/> $("#b5").click(function () { var backgroundColor = $("#one").css("backgroundColor"); alert(backgroundColor); }); //<input type="button" value=" 通過css()設置id為one背景顏色為綠色" id="b6"/> $("#b6").click(function () { $("#one").css("backgroundColor","green") });
三、CRUD操作
1. append()
作用：父元素將子元素追加到末尾
樣例：對象1.append(對象2): 將對象2添加到對象1元素內部，並且在末尾
2. prepend()
作用：父元素將子元素追加到開頭
樣例：對象1.prepend(對象2):將對象2添加到對象1元素內部，並且在開頭
3. appendTo()
樣例：對象1.appendTo(對象2):將對象1添加到對象2內部，並且在末尾
4. prependTo()
樣例：對象1.prependTo(對象2):將對象1添加到對象2內部，並且在開頭
5. after()
作用：添加元素到元素后邊
樣例：對象1.after(對象2)： 將對象2添加到對象1后邊。對象1和對象2是兄弟關系
6. before()
作用：添加元素到元素前邊
樣例：對象1.before(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關系
7. insertAfter()
樣例：對象1.insertAfter(對象2)：將對象1添加到對象2后邊。對象1和對象2是兄弟關系
8. insertBefore()
樣例：對象1.insertBefore(對象2)： 將對象1添加到對象2前邊。對象1和對象2是兄弟關系
9. remove()
作用：移除元素
樣例：對象.remove():將對象刪除掉
10. empty()
作用：清空元素的所有后代元素。
樣例：對象.empty():將對象的后代元素全部清空，但是保留當前對象以及其屬性節點