## 插入節點 插入節點分為在節點內部插入和作為同級（兄弟）節點插入： ~~~JavaScript //在被選元素內部作為子節點插入到最后 $("#first").append("aaaa"); //$("<b>baidu</b>").appendTo("p");、 //在被選元素內部作為子節點插入到第一位 $("#fruit").prepend("<li>芒果</li>"); //$("<li>西瓜</li>").prependTo("#fruit"); //在被選元素之后作為兄弟節點插入到后面 $("#fruit").after("<a href='#'>baidu</a>"); //$("<a href='#'>baidu</a>").insertAfter("#second"); //在被選元素之前作為兄弟節點插入到前面 $("#fruit").before("<a href='#'>360</a>"); //$("<a href='#'>360</a>").insertBefore("#second"); ~~~ ## 刪除節點 刪除節點同樣分為內部節點清空和選中節點刪除 ~~~JavaScript //清空被選元素所有的子節點，返回選中的元素 $("#first").empty(); //eq(index)方法：返回對應索引為index的對象 //用于刪除被選元素，返回被刪除的元素 $("#fruit li:eq(1)").remove(); //用于刪除被選元素，返回被刪除的元素 var a = $("#fruit li:eq(1)").detach(); a.appendTo("ul"); ~~~ ## 復制節點和替換節點 注意使用append和prepend等方法時，是直接移動元素！！！ ~~~JavaScript //append，perpend等方法其實是將節點移動到某個地方 $("#fruit li:eq(1)").appendTo("#copy"); //為無序列表中的橘子添加事件監聽 //JS中的監聽addEventListener("click",function() {}) //jQuery中的監聽事件 $("#fruit li:eq(1)").click(function() { alert("hahaha"); }) //clone()方法可以復制節點，并返回被復制的節點。 //傳入true可以將選中節點的事件也復制過來 $("#fruit li:eq(1)").clone(true).appendTo("#copy"); //replaceWith()方法可以用于替換元素 $("#fnext").replaceWith("<span>happy,everyday</span>") //$("<span>happy,everyday</span>").replaceAll("#flast") ~~~ ## 包裹節點 包裹節點通常是與wrap有關 ~~~JavaScript //wrap可以將選中的每個節點用標簽包裹起來，這個標簽通常是開始和閉合標簽共同使用，要注意尖括號 $("p").wrap("<div></div>"); //wrapAll會將所有的選中標簽用同一個標簽包裹起來，有時會產生一些意想不到的情況，盡量少用 $("#first p").wrapAll("<div></div>"); //wrapInner會將選中節點的子節點使用標簽包裹起來，這個標簽通常也是開始和閉合標簽共同使用 $("p").wrapInner("<div></div>"); ~~~ ## 操作元素的屬性 使用attr可以用來操作元素的屬性 ~~~JavaScript //使用attr方法獲取屬性值 console.log($("#lastSpan").attr("data-say")); //使用attr方法設置單獨一個屬性值 $("#lastSpan").attr("data-say","info-name"); //使用attr方法設置多個屬性值，傳入一個json格式的數據 $("#lastSpan").attr({"style":"color:red;background-color:yellow","data-say":"info"}); //刪除屬性removeAttr $("#lastSpan").removeAttr("style"); ~~~ ## 操作元素的樣式 使用attr和class相關的方法來操作元素的樣式 ~~~JavaScript //使用attr來修改class屬性和style屬性，以達到修改樣式的效果 $("#first").attr("class","red"); //$("#first").attr("class","size red"); //addClass用于追加類名 $("#first").addClass("size"); //removeClass刪除全部或者指定的類名 $("#first").removeClass("red"); //toggleClass實現類名的切換，存在則刪除，不存在則添加 $("#first").toggleClass('size'); //hasClass判斷選中的元素中是否存在類名 $("#first").hasClass('size'); //css():可以直接用于獲取和設置匹配元素的樣式 console.log($("#second").css("background-color")); $("#second").css("background-color","red"); $("#second").css({"background-color":"red","font-size":30}); ~~~