怎樣做到節(jié)能減排 如何做到節(jié)能減排
2024-07-02
網(wǎng)站首頁
手機版
更新時間：2024-07-02 18:01:29作者：未知
???此賬號為華為云開發(fā)者社區(qū)官方運營賬號，提供全面深入的云計算前景分析、豐富的技術干貨、程序樣例，分享華為云前沿資訊動態(tài)
本文分享自華為云社區(qū)《【JQuery框架】超詳細DOM操作看這一篇就夠了！》，原文作者：灰小猿 。
今天來和大家分享有關jQuery框架中DOM操作的相關技術，又是一個堪稱DOM“全家桶”系列的講解，建議收藏關注認真學習！
在進行內容操作時，對于設置和獲取元素的內容使用同一個函數(shù)進行操作，設置元素內容時直接在函數(shù)中傳入?yún)?shù)即可。
作用：獲取/設置元素的標簽體內容
// 獲取mydiv的標簽體內容var divValue = $("#mydiv").html()// 設置mydiv的標簽體內容var divValue = $("#mydiv").html(“你好”)
作用：獲取/設置元素的標簽體純文本內容
// 獲取mydiv文本內容var divText = $("#mydiv").text()// 設置mydiv文本內容var divText = $("#mydiv").text(“你好”)
作用：獲取/設置元素的value屬性值
// 獲取myinput 的value值var value = $("#myinput").val()// 設置myinput 的value值var value = $("#myinput").val(“你好”)
關于上述代碼的實際演示如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script ></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>
作用：獲取/設置元素的屬性
//獲取北京節(jié)點的name屬性值var bj = $("#bj").attr("name");alert(bj);//設置北京節(jié)點的name屬性的值為dabeijing$("#bj").attr("name", "dabeijing");//新增北京節(jié)點的discription屬性 屬性值是didu$("#bj").attr("discription", "didu");//刪除北京節(jié)點的name屬性并檢驗name屬性是否存在
作用：刪除屬性
//刪除北京節(jié)點的name屬性并檢驗name屬性是否存在$("#bj").removeAttr("name");
作用：獲取/設置元素的屬性
//獲得hobby的的選中狀態(tài)var hobby_type = $("#hobby").prop("checkbox");
作用：刪除屬性
//刪除hobby的CheckBox屬性var hobby_type = $("#hobby").removeProp("checkbox");
作用：添加class屬性值
//<input type="button" value=" addClass" id="b2"/>//給one標簽增加屬性$("#b2").click(function () { $("#one").addClass("second");});
作用：刪除class屬性值//<input type=
//<input type="button" value="removeClass" id="b3"/>//刪除one標簽的class屬性$("#b3").click(function () { $("#one").removeClass("second");});
作用：切換class屬性
//<input type="button" value=" 切換樣式" id="b4"/>//為one標簽的class樣式進行切換，有class屬性就刪除，沒有就添加$("#b4").click(function () { $("#one").toggleClass("second");});
在這里對該函數(shù)做一個詳細的介紹：
如toggleClass(“one”):
* 判斷如果元素對象上存在class=”one”，則將屬性值one刪除掉。 如果元素對象上不存在class=”one”，則添加
作用，修改元素屬性
//<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")});
作用：父元素將子元素追加到末尾
樣例：對象1.append(對象2): 將對象2添加到對象1元素內部，并且在末尾
作用：父元素將子元素追加到開頭
樣例：對象1.prepend(對象2):將對象2添加到對象1元素內部，并且在開頭
樣例：對象1.appendTo(對象2):將對象1添加到對象2內部，并且在末尾
樣例：對象1.prependTo(對象2):將對象1添加到對象2內部，并且在開頭
作用：添加元素到元素后邊
樣例：對象1.after(對象2)： 將對象2添加到對象1后邊。對象1和對象2是兄弟關系
作用：添加元素到元素前邊
樣例：對象1.before(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關系
樣例：對象1.insertAfter(對象2)：將對象1添加到對象2后邊。對象1和對象2是兄弟關系
樣例：對象1.insertBefore(對象2)： 將對象1添加到對象2前邊。對象1和對象2是兄弟關系
作用：移除元素
樣例：對象.remove():將對象刪除掉
作用：清空元素的所有后代元素。
樣例：對象.empty():將對象的后代元素全部清空，但是保留當前對象以及其屬性節(jié)點