一、DOM分類：
1.DOM core
2.Html-DOM
3.CSS-DOM
二、css樣式
$(this).css(“font-size”,“25px”);
$(this).css({“font-size”:“30px”,“color”:“white”});
$("#div3").addClass(“div3_style”);

//移除樣式 $("#div3").removeClass("div3_style"); //切換樣式toggleClass $("#div3").toggleClass("div3_style");//判斷是否有該樣式hasClassif($("#div3").hasClass("div3_style")){alert("有");}else{alert("沒有");}

三、///html操作
1.html，獲取元素內的html內容,包含內部的標簽
console.log($("#div3").html());

//給元素賦值 $("#div1").html("這是第一個div"); 2.text，獲取元素的文本內容console.log($("#div3").text());//使用text給元素賦值（不會解析內部標簽，而html會解析內部標簽）$("#div1").text("<li>text賦值</li>"); 3.獲取表單的value值alert($("#inp").val());//給表單賦值$("#inp").val("張三");

四、jQuery中的節點操作
//1.創建節點
var nodes = $(“

• No.6
• ”);
  //2.插入節點（內部插入）
  //(1)append,給最后插入節點
  KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?div3 ul").appen…("#div3 ul"));
  //(3)prepend,在元素的內部前面插入節點
  KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?div3 ul").prepe…("#div3 ul"));
  //(5)外部插入，after,給元素外部的后面插入節點
  KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?div3 ul").after…("#div3 ul"));
  //(7)外部插入，before,給元素外部的前面插入節點
  KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?div3 ul").befor…("#div3 ul"));
  //3.刪除節點remove
  $("#div3 li:eq(1)").remove();
  //4.刪除節點empty
  $("#div3 li:eq(0)").empty();
  //5.替換節點replaceWith
  KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?div3 li:first")…("#div3 li:first"));
  //7.復制節點
  var fu = $("#div3 li:first").clone(true);
  KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?div3 ul").appen…("#inp").attr(“value”));
  //2.設置屬性
  KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?inp").attr("val…("#inp").removeAttr(“value”);
  六、節點遍歷
  //1.獲取子節點children
  var chi = $("#div3").children().children().length;
  console.log(chi);
  //2.獲取下一個節點
  var i = $("#div3 li:first").next().text();
  alert(i); //輸出No.2
  //3.獲取上一個節點
  var p = $("#div3 li:last").prev().text();
  alert§; //輸出No.4
  //4.siblings，獲取同輩元素
  $("#div3 li:eq(2)").siblings().css(“background”,“red”);
  //5.parent，獲取父輩元素
  $("#div3 li:first").parent().css(“background”,“red”);
  //6.parents，獲取祖先元素 $("#div3 li:first").parents().css("background","red"); //7.遍歷節點each $("#div3 ul").each(function(){console.log($(this).text()); });

總結

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

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