一、DOM的分類：
1.DOM core
2.HTML-DOM
3.CSS-DOM
二、css操作
語法：
$("#div1").css(“color”,“red”);
$("#div1").css({“color”:“red”,“margin”:“5px”});
//添加樣式
$("#div1").addClass(“div1_style”);
//移除樣式
$("#div1").removClass(“div1_style”);
三、jQuery操作文本：
1.html():
語法：
獲取值：var val_html = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?div1").html(); …("#div1").html(“值”);
2.text():
語法：
獲取值：var val_text = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?div1").text(); …("#div1").text(“值”);
3.text和html的區別：
（1）都是操作文本的方法
（2）html可以解析html的標簽，text不可以解析。
四、獲取表單的值：
語法：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?inp").val(); 賦…("#inp").val(“值”);
五、節點與屬性操作：
1.創建節點：
var $new_Node = $("<li>第n個li</li>");2.插入節點：內部插入：（1）append()：向所選元素的后面插入節點（2）appendTo():與append的用法不一樣，但是效果一樣。eg:$(“ul”).append($ne{w}_{N}ode);($new_Node).appendTo(“ul”);
（3）perpend()：向所選擇元素的前面插入節點。
（4）perpendTo():與perpend的效果一樣，但是用法不一樣。
eg:$("ul").perpend($new_Node);
($ne{w}_{N}ode).perpendTo("ul");外部插入：（1）after():向所選元素的后面插入（2）insertAfter():與after的用法不一樣但是效果是一樣的。eg:$(“ul”).after($ne{w}_{N}ode);($new_Node).insertAfter(“ul”);
（3）before():向所選元素的前面插入節點
（4）insertBefore():與before的語法不一樣，但是效果一樣。
eg:$("ul").before($new_Node);
($ne{w}_{N}ode).insertBefore("ul");3.刪除節點：1.使用remove刪除，可以直接刪除節點。2.使用empty()刪除，但是只能清空內容eg:$(“li:eq(0)”).remove();
$(“li:eq(0)”).empty();
4.替換節點：
1.replaceWith():將所選的元素替換成新的元素
2.replaceAll():與replaceWith的效果一樣，用法不一樣。
eg:
$("li:eq(0)").replaceWith($new_Node);
($new_Node).replaceAll(“li:eq(0)”);
六、設置元素的屬性和給元素賦值：
1.attr()
語法：
獲取值：var im_val = $("img").attr("width");賦值：$(“img”).attr({width:“500”,height:“500”});
七、遍歷子元素：
1.獲取緊鄰其后的一個同輩元素：next()
eg:$("li:eq(0)").next().css("color","red");2.獲取緊鄰其前的一個同輩元素:prev();eg:$(“li:eq(2)”).prev().css(“color”,“red”);
3.獲取緊鄰其后的所有同輩元素：nextAll();
eg:$("li:eq(0)").nextAll().css("color","red");4.獲取緊鄰其前的所有同輩元素：prevAll()eg:$(“li:eq(4)”).prevAll().css(“color”,“red”);
5.獲取所有的同輩元素:silbings()
eg:$("li").sibling().css("color","red");八、獲取前輩元素：1.parent():獲取其父親元素。eg:$(“li”).parent().css(“background”,“red”);
2.parent().parent():獲取其爺爺的元素
eg:$("li").parent().parent().css("background","red");3.parents():獲取根元素，htmleg:$(“li”).parents().css(“background”,“red”);

總結

以上是生活随笔為你收集整理的第四章使用jQuery操作DOM元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。