DOM操作

1.append在div1的內部最後追加一個圖片

　　$("#div1").append("<img src=‘........‘/>");

2.appendTo把一個圖片追加到div1的內部最後

　　$("<img src=‘.........‘/>").appendTo("#div1");

3.prepend、prependTo內部最前方插入

　　$("#div1").prepend("<img src=‘.........‘/>");
　　$("<img src=‘........‘/>").prependTo("#div1");

4.after、insertAfter在div2的外部，後面插入節點

　　$("#div1").after("<p>這是一個div</p>");
　　$("<p>這是一個div</p>").insertAfter("#div1");

5.before、insertBefore在div1的外部，前面插入節點

　　$("#div1").before("<p>這是一個div</p>");
　　$("<p>這是一個div</p>").insertBefore("#div1");

6.wrap為每一個選中的節點，都套一層父節點

　　$("div").wrap("<section></section>");

7.wrapAll將選中的所有節點包裹在同一個父節點中

　　$("div").wrapAll("<section></section>");

8.unwrap刪除選中節點的父節點

　　$("#div1 p").unwrap();

9.wrapInner將選中節點中的所有子元素包裹在一個新的父節點中 ，新的父節點依然是當前元素節點的子節點

　　$("#div1").wrapInner("<div></div>");

10.replaceWith、replaceAll將所有選中節點重新替換為新的節點

　　$("div p").replaceWith("<span>1</span>");
　　$("<span>1</span>").replaceAll("div p");

11.empty清空當前節點中的內容，但會保留當前節點標簽

　　$("#div1").empty();

12.remove刪除當前節點以及當前節點的所有子節點

　　[remove和detachde的區別]
　　使用remove刪除的節點，如果恢復以後，將不再保留節點所綁定的事件
　　使用detach刪除的節點，在節點恢復以後，可以保留節點所綁定的事件

　　$("#div1").remove();
　　$("#div1").detach();

13.clone
　　[JS中cloneNode()與JQ中clone()的區別]
　　1.cloneNode() 如果不傳參數或者參數傳入false，表示只克隆當前節點，不克隆子節點；
　　2.clone() 無論傳入true還是false都會克隆當前節點以及所有子節點
　　傳入true表示克隆節點的同時將包括節點所綁定的事件。
　　否則，只克隆節點而不克隆事件。
　　第二個參數可以傳入true或者false表示是否克隆子節點

　　$("#div1").clone().empty().insertBefore("button:eq(0)");

屬性操作

1.attr設置節點的屬性

　　$("#div1").attr("class","cls cls2 cls3");

　傳入對象，以鍵值對的形式同時設置多對屬性。 （常用）

　　$("#div1").attr({
　　　　"class":$("#div1").attr("class")+" cls1",
　　　　"name":"name1",
　　　　"style":"font-size:24px;color:yellow;"
　　});

.attr取到節點的屬性

　　console.log($("#div1").attr("id"));

2.removeAttr刪除節點屬性

　　$("#div1").removeAttr("class");

3.prop和attr一樣，都可以對節點屬性進行讀取和設置

　　[兩者不同]
　　在讀取屬性名="屬性值"的屬性時，attr將返回屬性值和undefined：而prop將返回true或false。
　　也就是說，attr要取到的屬性，必須是在標簽上已經寫明的屬性，否則無法取到。

　　console.log($("input:eq(0)").attr("disable"));
　　console.log($("input:eq(0)").prop("disable"));
　　$("input:eq(0)").removeProp("disable");

4.addClass在原有class 的基礎上新增class名

　　$("#div1").addClass("cls0000");

5.removeClass刪除指定的class名稱。其余未刪除的class名，依然保留

　　$("#div1").removeClass("cls");

6.toggleClass切換class：如果有指定class就刪除，如果沒有就新增。

　　$("button").click(function(){
　　　　$("#div1").toggleClass("div1");
　　});

7.html([val|fn]) 取到或設置節點中的html代碼

8.text([val|fn]) 取到或設置節點中的文本

9.val([val|fn|arr]) 取到或設置表單元素的value值

CSS操作

1.css()給節點添加css樣式，屬於行級樣式表權限

　　$("#div1").css("color","green");

同時給一個節點添加 多對樣式

　　$("#div1").css({
　　　　"color":"green",
　　　　"font-size":"36px"
　　});

通過回調函數返回值修改樣式

　　$("button:eq(0)").click(function(){
　　　$("#div1").css({
　　　　　　"color":"green",
　　　　　　"font-size":function(index,value){
　　　　　　　　var n=parseInt(value)+1;
　　　　　　　　return n +"px";
　　　　　}
　　　　});
　　});

2.height、width取到或者設置寬高。只含width/height

　　$("#div1").height(400);
　　$("#div1").width("400px");

3.innerHeight、innerWidth取到節點的寬高+padding。不包含border和margin

　　console.log($("#div1").innerHeight());
　　console.log($("#div1").innerWidth());

4.outerHeight、outerWidth不傳參數，表示寬高+padding+border
傳入true，表示寬高+padding+border+margin

　　console.log($("#div1").outerHeight());
　　console.log($("#div1").outerWidth(true));

5.offset返回一個節點相對於瀏覽器左上角的偏移量
返回結果為一個對象{top:20,left:20}

　　console.log($("#div1").offset());

6.position返回一個節點，相對於父容器的偏移量。
　　註意：
　　① 使用此方法，要求父元素必須是定位元素。如果父元素不是定位元素，則依然是相對於瀏覽器左上角進行測量。
　　② 此方法，測量偏移時，將不考慮margin。而會將margin視為當前容器的一部分

　　console.log($("#div1").position());

7.scrollTop()：設置或取到指定節點的滾動條位置

　　console.log($(document).scrollTop());

JQuery：DOM操作、屬性操作、CSS操作的常用方法