title: 《鋒利的jQuery》三、jQuery的DOM操作
date: 2017-07-03 09:23:54
tags: 鋒利的jQuery
插入節點
append()
向每個匹配的元素內部追加內容 $('p').append('<b>你好</b>');結果為<p>一個p元素<b>你好</b></p>。
appendTo()
將所有的匹配元素追加到指定的元素中，和append是相反的。$('<b>你好</b>').appendTo('p');結果為<p>一個p元素<b>你好</b></p>。
prepend()
向每個匹配的元素內部前置內容 $('p').prepend('<b>你好</b>') 結果為 <p><b>你好</b>一個p元素</p>。
prependTo()
將所有匹配的元素前置到指定的元素中。和prepend是相反的。 $('<b>你好</b>').prependTo('p') 結果為 <p><b>你好</b>一個p元素</p>。
after()
在每個匹配的元素之后插入內容。$('p').after('<b>你好</b>') 結果為 <p>一個p元素</p><b>你好</b>
insertAfter()
將所有匹配的元素插入到指定元素的后面，和after是相反的。$('<b>你好</b>').insertAfter('p') 結果為 <p>一個p元素</p><b>你好</b>
before()
在每個匹配的元素之前插入內容。 $('p').before('<b>你好</b>') 結果為 <b>你好</b><p>一個p元素</p>
insertBefore()
將所有匹配的元素插入到指定的元素的前面，和before是相反的。$('<b>你好</b>').insertBefore('p') 結果為 <b>你好</b><p>一個p元素</p>
刪除節點
remove()
刪除匹配元素本身和所有后代節點。返回值是所有刪除的節點的引用，因此可以在以后再使用這些刪除的元素。
$('ul li:eq(1)').remove() 獲取第2個<li>元素節點后，將它從網頁中刪除。
該方法還可以傳遞參數，通過參數選擇性的刪除元素。
$('ul li').remove('li[title!="菠蘿"]'); 將<li>元素中屬性title不等于菠蘿的<li>元素刪除。
detach()
和remove()一樣也是從DOM中去掉匹配的元素，但是不會從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。和remove()不同的是，所有綁定的事件、附加的數據等都會保留下來。
empty()
empty()并不是刪除節點，而是清空節點，清空匹配元素的所有后代節點。
$('ul li:eq(1)').empty() 獲取第2個<li>元素節點后，清空此元素里的內容。
復制節點
clone()
通過clone()克隆一個節點，默認不可隆節點的事件，需要傳參數true就可以同時復制節點中綁定的事件。
替換節點
replaceWith() 和 replaceAll()
替換節點是replaceWith()和replaceAll()。如果在替換之前，已經為元素綁定事件，替換后原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件。
$('p').replaceWith('<span>替換為span元素</span>') 將頁面中的p元素替換為span元素。
$('<span>替換為span元素</span>').replaceAll('p') 用span元素去替換頁面中的p元素。
包裹節點
wrap()
將匹配的每個元素用其他標記包裹起來，而且它不會破壞原始文檔的語義。
$('strong').wrap('<b></b>'); 用<b>標簽把<strong>元素包裹起來。結果為<b><strong></strong></b> <b><strong></strong></b> <b><strong></strong></b>。
wrapAll()
將所有匹配的元素用一個標簽包裹起來。
$('strong').wrapAll('<b></b>'); 用<b>標簽把頁面中所有<strong>元素包裹起來。結果為<b><strong></strong> <strong></strong> <strong></strong></b>。
wrapInner()
將匹配的每個元素的子內容用其他標簽包裹起來。
$('strong').wrapAll('<b></b>'); 元素<strong>內的內容被一對<b>標簽包裹了。結果為``<strong><b></b></strong> <strong><b></b></strong> <strong><b></b></strong>`。
屬性操作
attr()和prop()
用于獲取和設置屬性，只傳一個參數是獲取一個屬性的值，傳兩個參數是設置屬性，要設置多個屬性可以傳入一個對象。
prop()比較適合用于設置和獲取html元素的固有屬性，而attr()比較適合設置和獲取自定義屬性。
最主要的區別是表單元素的屬性，比如checked和selected，這也是固有屬性，這種通常我會希望如果沒有設置或者用戶操作沒有選中則返回false，設置了或者選中了則返回true。
// 用input這個標簽舉例子來看一下兩者主要區別
<input type="checkbox" name="" id="ipt"/>
console.log($("input").attr("checked")) // 打印undefined
console.log($("input").prop("checked")) // 打印false
<input type="checkbox" name="" id="ipt" checked/>
console.log($("input").attr("checked")) // 打印checked
console.log($("input").prop("checked")) // 打印true
removeAttr()和removeProp()
只需要傳一個參數，要刪除的屬性名。
removeAttr()會刪除整個屬性，而remobeProp()只會讓該屬性的值變為undefined，而且removeProp()對自定義屬性無效。
樣式操作
addClass()
此方法用來追加樣式，在匹配元素原有類名基礎之上追加一個類名，$('p').addClass('active')
removeClass()
刪除類名，當不傳參數時是刪除匹配元素對象的所有類名，$('p').removeClass();就是刪除所有p元素的所有類名。
也可以刪除指定類名，$('p').removeClass('high');刪除所有p元素的high類名。
toggleClass()
替換類名，即如果傳入的類名存在便刪除，如果不存在就追加，$('p').toggleClass('active')
hasClass()
判斷匹配的元素對象中是否還有某個類名，返回的是布爾值，$('p').hasClass('active')
設置和獲取內容
html()
用于讀取和設置匹配元素的html內容，和innerHTML方法的效果類似。不傳參數即是獲取。
text()
用于讀取和設置匹配元素的文本內容，和innerText方法類似，但是text()兼容所有瀏覽器，而innerText不兼容firefox。
val()
用于讀取和設置文本框、下拉列表、單選框、多選框元素的值，其中如果元素為多選，則會返回一個包含所有選擇的值的數組。
如果不傳參數則是獲取值，傳入參數是設置元素的值，由于val()專門針對表單元素，所以可以對下拉列表、單選框、多選框進行操作。
$('#multiple').val('選項二'); //讓下拉列表默認選擇第二個選項，參數就是選項的文本內容
$(':checbox').val(['check2','check3']) // 多選框，默認選擇第二和第三項，多個參數用數組形式設置。
遍歷節點
children()
此方法用來獲取匹配元素的所有子元素的個數，這個方法只考慮子元素而不考慮后代元素。
next()
獲取匹配元素后面緊鄰的同輩元素。
prev()
獲取匹配元素前面緊鄰的同輩元素。
siblings()
獲取匹配元素前后所有的同輩元素，不包含自己。
closest()
獲取最近的匹配元素，首先檢查當前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則逐級向上查找直到找到匹配元素，如果什么都沒找到返回一個空jQuery對象。
parent()、parents()
parent()是獲取匹配元素的父級元素，只返回一個節點。
parents()是獲取匹配元素的祖先元素，返回多個節點。
find()
搜索所有匹配元素下的指定的元素。
filter()
獲取匹配元素中符合參數表達式的元素，和find()不同的是find()是去后代中匹配，而filter()是在當前元素中去匹配。
還可以傳入一個函數，函數內部return一個判斷表達式，若為true，則返回表達式匹配的元素。
nextAll()
獲取匹配元素之后的所有同輩元素
prevAll()
獲取匹配元素之前的所有同輩元素
CSS-DOM
css()
傳入一個css屬性就可以獲取匹配元素的css屬性值，不論行內還是外部引用的都可以獲取。
傳入兩個參數，第一個是屬性，第二個是屬性值則可以設置匹配元素的css樣式，也可以直接傳入一個對象。對于帶-符號的屬性要用駝峰的寫法，并且屬性最好加上引號。
width()、height()
直接獲取匹配元素的寬度和高度，不帶單位，而且這里獲取的寬高和css設置無關，是元素在頁面中實際的寬高。
也可以傳遞一個值設置高度和寬度，值的格式是字符串。
offset()
獲取元素在當前視窗的相對偏移，返回值是一個對象，即top和left，只對可見元素有效。
position()
獲取元素相對于最近的一個position樣式屬性設置為relative或者absolute的祖父節點的相對偏移，也是返回一個對象并且又top和left。
scrollTop()、scrollLeft()
獲取元素的滾動條距頂端的距離和距左側的距離。
可以給這兩個方法指定一個參數，控制元素的滾動條滾動到指定位置。
