DOM 中有一個非常重要的功能，就是節點模型，也就是 DOM 中的“M”。頁面中的元素結構就是通過這種節點模型來互相對應著的，我們只需要通過這些節點關系，可以創建、插入、替換、克隆、刪除等等一些列的元素操作。
老規矩，喏，給你圖
一、獲取/設置節點的屬性
1.1 獲取元素節點 $(" ").attr("屬性值")
用此方法獲取到的屬性只能獲取第一個,如果想獲取集合中元素的全部屬性，需要遍歷整個集合，至于遍歷，后面會講到，不要急，雞尾酒和辣條都會有的，哇咔咔~
1.3 設置元素指定屬性的屬性值
1.設置單個屬性
attr("屬性名","屬性值")
$(".box").attr("title","我設置的");
$(".box").attr("myattr","定義");//給集合中的所有元素設置屬性和屬性值
2.設置多個屬性的屬性值
attr({"屬性名1"："屬性值1","屬性名2"："屬性值2"})
$(".box").attr({"title":"111","my":"222"})
3.prop() 獲取checked select readOnly
獲取checked select readOnly屬性的時候 可以用prop().只有true和false
$(":checkbox").prop("checked",true)
1.4 移除屬性
$(" ").removeProp("屬性")：用來刪除由.prop()方法設置的屬性集
$(" ").removeAttr("屬性")：從每一個匹配的元素中刪除一個屬性
二、HTML代碼/文本/值
用來獲取和設置標簽的內容，文本等的
2.1 $(" ").html()
相當于js中的innerHTML
用來取得第一個匹配元素的html內容
設置文本內容：把設置的文本內容寫在括號里，就相當于傳入參數，改變了文本的內容。
$("div").html("<button>點我</button>")
2.2 $(" ").text()
相當于js中的innerText
用來取得所有匹配元素文本內容
設置：把設置的文本內容寫在括號里，就相當于傳入參數，改變了文本的內容。
$("div").text("123")
2.3 $(" ").val()
相當于js中的value
用來獲得所有匹配元素的當前值
設置：把設置的文本內容寫在括號里，就相當于傳入參數，改變了文本的內容。
$("textarea").val($("#city").val()
三、常用的css相關的屬性
3.1 $(" ").offset()
獲取匹配元素在當前視口的相對偏移。
設置：把參數以json的形式寫在括號里
$("#parent").offset({left:300,top:300});//offset 可以獲取
3.2 $(" ").position()
獲取匹配元素相對父元素（非靜態:設置了定位）的偏移。
設置
$("#son").position();//position 只可以獲取 不能設置
3.3 $(" ").height()
取得匹配元素當前計算的高度值（px）。
設置：把參數寫在括號里
$("#parent").height(300)
3.4 $(" ").width()
取得匹配元素當前計算的寬度值（px）。
設置：把參數寫在括號里
$("#parent").width(300)
四、節點操作
4.1創建元素節點
把創建的標簽以字符串的方式直接寫在$()里面即可
var $Div = $("<div class='box'></div>");
4.2插入元素節點
1.在所有孩子列表的末尾插入
第一種：父節點.append(子節點)
$("body").append($Div)
第二種：子節點.appendTo(父節點)
$Div.appendTo($("body"))
2.在所有孩子的首部插入
第一種：父節點.prepend(子節點)
$("body").prepend($div)
第二種：子節點.prependTo(父節點)
$div.prependTo("body")
3.在每個匹配的元素之后插入內容
舊節點.after(新節點)
$("#p1").after($p)
4.把所有匹配的元素插入到另一個、指定的元素元素集合的后面。
新節點.insertAfter(舊節點)
$p.insertAfter($("#p1"))
5.在每個匹配的元素之前插入內容。
舊節點.before(新節點)
$("#p1").before( "<p>p</p>" )
6.把所有匹配的元素插入到另一個、指定的元素元素集合的前面。
新節點.insertBefore(舊節點)
$("<p>p</p>").insertBefore("#p1")
4.3移除節點
$(" ").remove()：從DOM中刪除所有匹配的元素。
$(".del").remove(#d2)：找出class為del的元素，然后篩選出id為d2的元素把其移除
$(".del").detach():從DOM中刪除所有匹配的元素。
$(".del").empty():刪除匹配的元素集合中所有的子節點。
記：
remove() 移除節點之后，會保存jQuery對象，不會保存該對象上添加的事件
detach() 移除節點之后，會保存jQuery對象并保存該對象上添加的事件
五、克隆節點
clone(true|false)
傳入參數true，同時克隆該節點關聯的事件
$("button").click(function(){
var $clone=$("div").clone(true);
$clone.appendTo($("body"));
})
$("div").click(function(){
$(this).css("background-color","green")
})
六、替換節點
舊節點.replaceWith(新節點)
新節點.replaceAll(舊節點)
所有匹配的節點都可以替換
七、包裹節點
wrap()：把所有匹配的元素用其他元素的結構化標記包裹起來。
$("button:eq(0)").click(function(){
//把匹配到的每一個span標簽用p表現包裹起來
$("span").wrap("<p></p>")
})
運行結果
unwrap() 不用傳參數：把所有匹配的元素的父節點去掉
$("button:eq(1)").click(function(){
//把匹配到的每一個span標簽的父節點去掉
$("span").unwrap()
})
運行結果
**wrapAll() **：將所有匹配的元素用單個元素包裹起來
$("button:eq(2)").click(function(){
//把匹配到的每一個span標簽用一個p標簽包裹起來
$("span").wrapAll("<p></p>")
})
運行結果
wrapInner():將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來
$("button:eq(3)").click(function(){
//把匹配到的每一個span標簽用一個p標簽包裹起來
$("span").wrapInner("<b></b>")
})
運行結果：把span標簽里面的文本加粗顯示
八、遍歷DOM樹
8.1父子關系
**children() **：取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。
parent()：獲取匹配到的每一個節點的父節點
8.2祖先節點
parents()：取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通過一個可選的表達式進行篩選。
closest("篩選條件")：從元素本身開始，逐級向上級元素匹配，并返回最先匹配的元素
8.3兄弟節點
prev():前一個兄弟
prevAll()：前面所有的兄弟
next()：后一個兄弟
nextAll()：后面所有的兄弟節點
siblings()：除本身以外的所有的兄弟節點
8.4find("篩選條件")
把匹配到的每一個元素的后代在進行一次篩選
**來來來~記住了么？復習一下
//父子關系
//01 children() 獲取匹配到的每一個節點的子節點
//$("ul:first li").wrapInner("<b></b>")
console.log($("ul").children());//r.fn.init[6]
//02 parent() 獲取匹配到的每一個節點的父節點
console.log($("li").parent());//r.fn.init[2]
//祖先節點
//03 parents() 獲取祖先節點 起點 父節點
console.log($("li").parents());//r.fn.init[4]
//具體要求可寫在括號里傳參進去
//表格操作：($(this).parents("tr")
//04 closest("篩選條件") 起點 當前節點
console.log($("li:first").parents(".test"));//在父節點開始找.test
console.log($("li:first").closest(".test"));//從當前節點找距離最近的.test
//兄弟關系
//01 前一個兄弟 prev();
console.log($("#test").prev())
//02 前面所有的兄弟 prevAll()
console.log($("#test").prevAll())
//03 后一個兄弟節點 next()
console.log($("#test").next())
//04 后面的所有兄弟
console.log($("#test").nextAll())
//05 所有兄弟 siblings()
console.log($("#test").siblings())
//find("篩選條件")
//把匹配到的每一個元素的后代在進行一次篩選
console.log($("ul").find("#test"));
****s
本來已經寫完，點擊發送卡死，再次打開啥都沒了，著急忙慌，在瀏覽器的瀏覽記錄里找到了寫的一半的文章，還算萬幸，好了，今天到這里，好記性不如敲鍵盤，溫馨提示小伙伴寫東西記得隨時保存！
累不累？講個笑話放松一下咯愛笑的孩紙運氣都不會太差
某程序員對書法十分感興趣，退休后決定在這方面有所建樹。于是花重金購買了上等的文房四寶。一日，飯后突生雅興，一番磨墨擬紙，并點上了上好的檀香，頗有王羲之風范，又具顏真卿氣勢，定神片刻，潑墨揮毫，鄭重地寫下：hello world
任何時間不要吝嗇你的贊美，喜歡就點贊咯~
