title: 《鋒利的jQuery》三、jQuery的DOM操作
date: 2017-07-03 09:23:54
tags: 鋒利的jQuery

插入節(jié)點

append()

向每個匹配的元素內(nèi)部追加內(nèi)容 $('p').append('<b>你好</b>');結(jié)果為<p>一個p元素<b>你好</b></p>。

appendTo()

將所有的匹配元素追加到指定的元素中，和append是相反的。$('<b>你好</b>').appendTo('p');結(jié)果為<p>一個p元素<b>你好</b></p>。

prepend()

向每個匹配的元素內(nèi)部前置內(nèi)容 $('p').prepend('<b>你好</b>') 結(jié)果為 <p><b>你好</b>一個p元素</p>。

prependTo()

將所有匹配的元素前置到指定的元素中。和prepend是相反的。 $('<b>你好</b>').prependTo('p') 結(jié)果為 <p><b>你好</b>一個p元素</p>。

after()

在每個匹配的元素之后插入內(nèi)容。$('p').after('<b>你好</b>') 結(jié)果為 <p>一個p元素</p><b>你好</b>

insertAfter()

將所有匹配的元素插入到指定元素的后面，和after是相反的。$('<b>你好</b>').insertAfter('p') 結(jié)果為 <p>一個p元素</p><b>你好</b>

before()

在每個匹配的元素之前插入內(nèi)容。 $('p').before('<b>你好</b>') 結(jié)果為 <b>你好</b><p>一個p元素</p>

insertBefore()

將所有匹配的元素插入到指定的元素的前面，和before是相反的。$('<b>你好</b>').insertBefore('p') 結(jié)果為 <b>你好</b><p>一個p元素</p>

刪除節(jié)點

remove()

刪除匹配元素本身和所有后代節(jié)點。返回值是所有刪除的節(jié)點的引用，因此可以在以后再使用這些刪除的元素。

$('ul li:eq(1)').remove() 獲取第2個<li>元素節(jié)點后，將它從網(wǎng)頁中刪除。

該方法還可以傳遞參數(shù)，通過參數(shù)選擇性的刪除元素。

$('ul li').remove('li[title!="菠蘿"]'); 將<li>元素中屬性title不等于菠蘿的<li>元素刪除。

detach()

和remove()一樣也是從DOM中去掉匹配的元素，但是不會從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。和remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會保留下來。

empty()

empty()并不是刪除節(jié)點，而是清空節(jié)點，清空匹配元素的所有后代節(jié)點。

$('ul li:eq(1)').empty() 獲取第2個<li>元素節(jié)點后，清空此元素里的內(nèi)容。

復制節(jié)點

clone()

通過clone()克隆一個節(jié)點，默認不可隆節(jié)點的事件，需要傳參數(shù)true就可以同時復制節(jié)點中綁定的事件。

替換節(jié)點

replaceWith() 和 replaceAll()

替換節(jié)點是replaceWith()和replaceAll()。如果在替換之前，已經(jīng)為元素綁定事件，替換后原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件。

$('p').replaceWith('<span>替換為span元素</span>') 將頁面中的p元素替換為span元素。

$('<span>替換為span元素</span>').replaceAll('p') 用span元素去替換頁面中的p元素。

包裹節(jié)點

wrap()

將匹配的每個元素用其他標記包裹起來，而且它不會破壞原始文檔的語義。

$('strong').wrap('<b></b>'); 用<b>標簽把<strong>元素包裹起來。結(jié)果為<b><strong></strong></b> <b><strong></strong></b> <b><strong></strong></b>。

wrapAll()

將所有匹配的元素用一個標簽包裹起來。

$('strong').wrapAll('<b></b>'); 用<b>標簽把頁面中所有<strong>元素包裹起來。結(jié)果為<b><strong></strong> <strong></strong> <strong></strong></b>。

wrapInner()

將匹配的每個元素的子內(nèi)容用其他標簽包裹起來。

$('strong').wrapAll('<b></b>'); 元素<strong>內(nèi)的內(nèi)容被一對<b>標簽包裹了。結(jié)果為``<strong><b></b></strong> <strong><b></b></strong> <strong><b></b></strong>`。

屬性操作

attr()和prop()

用于獲取和設置屬性，只傳一個參數(shù)是獲取一個屬性的值，傳兩個參數(shù)是設置屬性，要設置多個屬性可以傳入一個對象。

prop()比較適合用于設置和獲取html元素的固有屬性，而attr()比較適合設置和獲取自定義屬性。

最主要的區(qū)別是表單元素的屬性，比如checked和selected，這也是固有屬性，這種通常我會希望如果沒有設置或者用戶操作沒有選中則返回false，設置了或者選中了則返回true。

// 用input這個標簽舉例子來看一下兩者主要區(qū)別
<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()

只需要傳一個參數(shù)，要刪除的屬性名。

removeAttr()會刪除整個屬性，而remobeProp()只會讓該屬性的值變?yōu)閡ndefined，而且removeProp()對自定義屬性無效。

樣式操作

addClass()

此方法用來追加樣式，在匹配元素原有類名基礎之上追加一個類名，$('p').addClass('active')

removeClass()

刪除類名，當不傳參數(shù)時是刪除匹配元素對象的所有類名，$('p').removeClass();就是刪除所有p元素的所有類名。

也可以刪除指定類名，$('p').removeClass('high');刪除所有p元素的high類名。

toggleClass()

替換類名，即如果傳入的類名存在便刪除，如果不存在就追加，$('p').toggleClass('active')

hasClass()

判斷匹配的元素對象中是否還有某個類名，返回的是布爾值，$('p').hasClass('active')

設置和獲取內(nèi)容

html()

用于讀取和設置匹配元素的html內(nèi)容，和innerHTML方法的效果類似。不傳參數(shù)即是獲取。

text()

用于讀取和設置匹配元素的文本內(nèi)容，和innerText方法類似，但是text()兼容所有瀏覽器，而innerText不兼容firefox。

val()

用于讀取和設置文本框、下拉列表、單選框、多選框元素的值，其中如果元素為多選，則會返回一個包含所有選擇的值的數(shù)組。

如果不傳參數(shù)則是獲取值，傳入?yún)?shù)是設置元素的值，由于val()專門針對表單元素，所以可以對下拉列表、單選框、多選框進行操作。

$('#multiple').val('選項二');   //讓下拉列表默認選擇第二個選項，參數(shù)就是選項的文本內(nèi)容
$(':checbox').val(['check2','check3'])      // 多選框，默認選擇第二和第三項，多個參數(shù)用數(shù)組形式設置。

遍歷節(jié)點

children()

此方法用來獲取匹配元素的所有子元素的個數(shù)，這個方法只考慮子元素而不考慮后代元素。

next()

獲取匹配元素后面緊鄰的同輩元素。

prev()

獲取匹配元素前面緊鄰的同輩元素。

siblings()

獲取匹配元素前后所有的同輩元素，不包含自己。

closest()

獲取最近的匹配元素，首先檢查當前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則逐級向上查找直到找到匹配元素，如果什么都沒找到返回一個空jQuery對象。

parent()、parents()

parent()是獲取匹配元素的父級元素，只返回一個節(jié)點。

parents()是獲取匹配元素的祖先元素，返回多個節(jié)點。

find()

搜索所有匹配元素下的指定的元素。

filter()

獲取匹配元素中符合參數(shù)表達式的元素，和find()不同的是find()是去后代中匹配，而filter()是在當前元素中去匹配。

還可以傳入一個函數(shù)，函數(shù)內(nèi)部return一個判斷表達式，若為true，則返回表達式匹配的元素。

nextAll()

獲取匹配元素之后的所有同輩元素

prevAll()

獲取匹配元素之前的所有同輩元素

CSS-DOM

css()

傳入一個css屬性就可以獲取匹配元素的css屬性值，不論行內(nèi)還是外部引用的都可以獲取。

傳入兩個參數(shù)，第一個是屬性，第二個是屬性值則可以設置匹配元素的css樣式，也可以直接傳入一個對象。對于帶-符號的屬性要用駝峰的寫法，并且屬性最好加上引號。

width()、height()

直接獲取匹配元素的寬度和高度，不帶單位，而且這里獲取的寬高和css設置無關(guān)，是元素在頁面中實際的寬高。

也可以傳遞一個值設置高度和寬度，值的格式是字符串。

offset()

獲取元素在當前視窗的相對偏移，返回值是一個對象，即top和left，只對可見元素有效。

position()

獲取元素相對于最近的一個position樣式屬性設置為relative或者absolute的祖父節(jié)點的相對偏移，也是返回一個對象并且又top和left。

scrollTop()、scrollLeft()

獲取元素的滾動條距頂端的距離和距左側(cè)的距離。

可以給這兩個方法指定一個參數(shù)，控制元素的滾動條滾動到指定位置。