此賬號為華為雲開發者社區官方運營賬號，提供全面深入的雲計算前景分析、豐富的技術乾貨、程序樣例，分享華為雲前沿資訊動態
本文分享自華為雲社區《【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():將對象的後代元素全部清空，但是保留當前對象以及其屬性節點
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/228111.html
微信掃一掃 
支付寶掃一掃 
