jQuery中的DOM操作
DOM操作的分類
DOM操作分為3個方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。
JavaScript中的getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法,這些都是DOM Core的組成部分。
each()
為每個匹配元素規(guī)定運行的函數(shù)。返回 false 可用于及早停止循環(huán)。
$(selector).each(function(index,element))
參數(shù)描述:
index - 選擇器的 index 位置
element - 當前的元素(也可使用 "this" 選擇器)
html():設(shè)置或返回所選元素的內(nèi)容(等同于js中的innerHTML)
text():設(shè)置或返回所選元素的文本內(nèi)容(等同于js中的innerText)
val():設(shè)置或返回表單字段的值(等同于js中的value)
獲取元素的屬性
attr(name)
設(shè)置元素的屬性
1 attr(key,value) 設(shè)置指定key屬性的屬性值為value
語法:$(selector).attr(attribute,value)
2 設(shè)置多個屬性/值對
語法:$(selector).attr({attribute:value, attribute:value ...})
刪除元素的屬性
removeAttr(name)? : 刪除指定的屬性
操作元素的樣式
1、直接設(shè)置樣式屬性:? css()方法
2、獲取樣式和設(shè)置樣式
獲?。?(“#nav”).attr(“class”)
設(shè)置:$(“#nav”).attr(“class”,”nav2”)
3、增加樣式
addClass(class)
說明:參數(shù)class為樣式名稱,也可以同時增加多個樣式,只需要用空格將其隔開即可。
addClass(class1 class2…)
4、移除樣式
removeClass([class])
可選。規(guī)定要移除的 class 的名稱。如需移除若干類,請使用空格來分隔類名。如果不設(shè)置該參數(shù),則會移除所有類。
5、樣式切換
toggleClass(class)
說明:參數(shù)class為樣式名稱。其功能是當元素中含有名稱為class的樣式時,刪除該樣式,否則,增加該樣式。
6、判斷是否含有某個樣式
hasClass(class)
說明:參數(shù)class為樣式名稱。該方法用來判斷元素中是否含有某個class,如果有,則返回true,
否則返回false。
attr()和addClass()的區(qū)別

創(chuàng)建節(jié)點
語法:$(html字符串) 創(chuàng)建Dom節(jié)點,并返回一個jQuery對象 Eg: $(“搜狐”)
append()
向每個匹配的元素內(nèi)部追加內(nèi)容。(類似appendChild)
語法:$(selector).append(content)
content:必需。規(guī)定要插入的內(nèi)容(可包含 HTML 標簽)。
appendTo()
appendTo() 方法在被選元素的結(jié)尾(仍然在內(nèi)部)插入指定內(nèi)容。 (和append()方法顛倒)
語法:$(content).appendTo(selector)
content : 必需。規(guī)定要插入的內(nèi)容(可包含 HTML 標簽)。
prepend()
向每個匹配的元素內(nèi)部前置內(nèi)容。
語法: $(selector).prepend(content)
content:必需。規(guī)定要插入的內(nèi)容(可包含 HTML 標簽)。
prependTo()
把所有匹配的元素前置到另一個、指定的元素元素集合中。
語法: $(content).prependTo(selector)
after()
在每個匹配的元素之后插入內(nèi)容。
insertAfter()
把所有匹配的元素插入到另一個、指定的元素元素集合的后面。(顛倒了常規(guī)的$(A).after(B)的操作)
before()
在每個匹配的元素之前插入內(nèi)容。
insertBefore()
把所有匹配的元素插入到另一個、指定的元素集合的前面。
clone()
生成被選元素的副本,包含子節(jié)點、文本和屬性。
語法:$(selector).clone(includeEvents)
includeEvents 可選。布爾值。規(guī)定是否復制元素的所有事件處理。默認地,副本中不包含事件處理器。
empty()
刪除匹配的元素集合中所有的子節(jié)點。將節(jié)點清空
remove()
刪除選中的節(jié)點,并返回被刪除的節(jié)點對象,可以繼續(xù)使用被刪除的對象。
replaceWith(content)
將選中的元素替換成content
wrap(html)
將所選的元素用指定的html包裹起來 $("strong").wrap("");//用元素把元素包裹起來
wrapInner(html)
將所選的元素的子內(nèi)容用指定的html包裹起來
wrapAll()
語法: $(selector).wrapAll(wrapper)
該方法會將所有匹配的元素用一個元素來包裹。他不同于wrap()方法,wrap()方法是將所有的元素進行單獨的包裹。
君樂雨兮啟傘枝,
君樂晝兮林蔽日,
君樂風兮欄帳起,
君樂吾兮吾心噬。