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ù)是獲取一個屬性的值揪垄，傳兩個參數(shù)是設(shè)置屬性穷吮，要設(shè)置多個屬性可以傳入一個對象。
prop()比較適合用于設(shè)置和獲取html元素的固有屬性饥努，而attr()比較適合設(shè)置和獲取自定義屬性酒来。
最主要的區(qū)別是表單元素的屬性，比如checked和selected肪凛，這也是固有屬性堰汉，這種通常我會希望如果沒有設(shè)置或者用戶操作沒有選中則返回false，設(shè)置了或者選中了則返回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()
此方法用來追加樣式拱烁，在匹配元素原有類名基礎(chǔ)之上追加一個類名生蚁，$('p').addClass('active')
removeClass()
刪除類名，當不傳參數(shù)時是刪除匹配元素對象的所有類名戏自，$('p').removeClass();就是刪除所有p元素的所有類名邦投。
也可以刪除指定類名，$('p').removeClass('high');刪除所有p元素的high類名擅笔。
toggleClass()
替換類名志衣，即如果傳入的類名存在便刪除屯援，如果不存在就追加，$('p').toggleClass('active')
hasClass()
判斷匹配的元素對象中是否還有某個類名念脯，返回的是布爾值狞洋，$('p').hasClass('active')
設(shè)置和獲取內(nèi)容
html()
用于讀取和設(shè)置匹配元素的html內(nèi)容，和innerHTML方法的效果類似绿店。不傳參數(shù)即是獲取吉懊。
text()
用于讀取和設(shè)置匹配元素的文本內(nèi)容，和innerText方法類似假勿，但是text()兼容所有瀏覽器惕它，而innerText不兼容firefox。
val()
用于讀取和設(shè)置文本框废登、下拉列表、單選框郁惜、多選框元素的值堡距，其中如果元素為多選，則會返回一個包含所有選擇的值的數(shù)組兆蕉。
如果不傳參數(shù)則是獲取值羽戒，傳入?yún)?shù)是設(shè)置元素的值，由于val()專門針對表單元素虎韵，所以可以對下拉列表易稠、單選框、多選框進行操作包蓝。
$('#multiple').val('選項二'); //讓下拉列表默認選擇第二個選項驶社，參數(shù)就是選項的文本內(nèi)容
$(':checbox').val(['check2','check3']) // 多選框，默認選擇第二和第三項测萎，多個參數(shù)用數(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ù)工闺，第一個是屬性乍赫，第二個是屬性值則可以設(shè)置匹配元素的css樣式，也可以直接傳入一個對象陆蟆。對于帶-符號的屬性要用駝峰的寫法雷厂，并且屬性最好加上引號。
width()叠殷、height()
直接獲取匹配元素的寬度和高度改鲫，不帶單位，而且這里獲取的寬高和css設(shè)置無關(guān)林束，是元素在頁面中實際的寬高像棘。
也可以傳遞一個值設(shè)置高度和寬度，值的格式是字符串壶冒。
offset()
獲取元素在當前視窗的相對偏移讲弄，返回值是一個對象，即top和left依痊，只對可見元素有效避除。
position()
獲取元素相對于最近的一個position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點的相對偏移，也是返回一個對象并且又top和left胸嘁。
scrollTop()瓶摆、scrollLeft()
獲取元素的滾動條距頂端的距離和距左側(cè)的距離。
可以給這兩個方法指定一個參數(shù)性宏，控制元素的滾動條滾動到指定位置群井。
