寫代碼培廓,沒案例,簡直就是耍流氓春叫,為了方便大家學習交流肩钠,每個知識點都會配上對應的案例!文章最下邊有福利喲....
jQuery節(jié)點創(chuàng)建與屬性的處理
創(chuàng)建節(jié)點:$("
")
創(chuàng)建為本節(jié)點:$("
我是文本節(jié)點
")
創(chuàng)建為屬性節(jié)點:$("
我是文本節(jié)點
")
例子:var div = $("
動態(tài)創(chuàng)建DIV元素節(jié)點
")
$body.append(div)
DOM內部插入append()與appendTo()
append(content)向每個匹配的元素內部追加內容暂殖,這個操作與對指定的元素執(zhí)行原生的appendChild方法价匠,將它們添加到文檔中的情況類似。
appendTo(content)把所有匹配的元素追加到另一個呛每、指定的元素集合中踩窖,實際上,使用這個方法是顛倒了常規(guī)的$(A).append(B)的操作晨横,即不是把B追加到A中洋腮,而是把A追加到B中。
DOM外部插入after()與before()
.after(content) 在匹配元素集合中的每個元素后面插入指定內容手形,作為兄弟節(jié)點
.before(content) 在匹配的元素前面插入內容
1啥供、before與after都是用來對相對選中元素外部增加相鄰的兄弟節(jié)點
2、2個方法都是都可以接收HTML字符串库糠,DOM 元素滤灯,元素數(shù)組,或者jQuery對象曼玩,用來插入到集合中每
個匹配元素的前面或者后面
3鳞骤、2個方法都支持多個參數(shù)傳遞after(div1,div2,....)
DOM內部插入prepend()與prependTo()
.prepend() 向每個匹配元素的內部前置內容 和append()類型
.prependTo() 把所有匹配的元素前置到另一個指定的元素集合中
四個區(qū)別:
append()向每個匹配的元素內部追加內容
prepend()向每個匹配的元素內部前置內容
appendTo()把所有匹配的元素追加到另一個指定元素的集合中
prependTo()把所有匹配的元素前置到另一個指定的元素集合中
DOM外部插入insertAfter()與insertBefore()
insertBefore() 在目標元素前面插入集合中每個匹配的元素(不支持多參數(shù))
insertAfter() 在目標元素后面插入集合中每個匹配的元素(不支持多參數(shù))
.before()和.insertBefore()實現(xiàn)同樣的功能。主要的區(qū)別是語法——內容和目標的位置黍判。 對于
before()選擇表達式在函數(shù)前面豫尽,內容作為參數(shù),而.insertBefore()剛好相反顷帖,內容在方法前面美旧,它將
被放在參數(shù)里元素的前面
例:$(".test1").before('
before,在匹配元素之前增加
')
$('
測試insertBefore方法增加
').insertBefore($(".test1"))
DOM節(jié)點刪除之empty()
empty()這個方法不僅移除子元素(和其他后代元素),同樣移除元素里的文本
例:$('.hello').empty() //刪除.hello里邊的所有內容
DOM節(jié)點刪除之remove()的有參用法和無參用法
remove與empty一樣贬墩,都是移除元素的方法榴嗅,但是remove會將元素自身移除,同時也會移除元素內部的一切陶舞,包括綁定的事件及與該元素相關的jQuery數(shù)據嗽测。
例:$('.hello').remove()
$("p").remove(":contains('3')")//找到包含3文本的節(jié)點刪除
DOM節(jié)點刪除之保留數(shù)據的刪除操作detach()
detach()讓一個web元素托管。即從當前頁面中移除該元素,但保留這個元素的內存模型對象唠粥。
例: $("p:first").detach()
DOM拷貝clone()
.clone()方法深度 復制所有匹配的元素集合疏魏,包括所有匹配元素、匹配元素的下級元素晤愧、文字節(jié)點大莫。
.clone(ture) 表示不僅僅克隆節(jié)點,還把附帶的數(shù)據和事件一并克隆了官份!
1只厘、clone()方法時,在將它插入到文檔之前舅巷,我們可以修改克隆后的元素或者元素內容羔味,
$(this).clone().css('color','red') 表示增加了一個顏色
2、通過傳遞true悄谐,將所有綁定在原始元素上的事件處理函數(shù)復制到克隆元素上
3介评、clone()方法是jQuery擴展的库北,只能處理通過jQuery綁定的事件與數(shù)據
4爬舰、元素數(shù)據(data)內對象和數(shù)組不會被復制,將繼續(xù)被克隆元素和原始元素共享寒瓦。深復制的所有數(shù)據情屹,需要手動復制每一個
例: $(".aaron1").on('click', function() {
$(".left").append( $(this).clone().css('color','red') )
})//只克隆節(jié)點不克隆事件
DOM替換replaceWith()和replaceAll()
.replaceWith( newContent ):用提供的內容替換集合中所有匹配的元素并且返回被刪除元素的集合
例:$("p:eq(1)").replaceWith('替換第二段的內容')
.replaceAll( target ) :用集合的匹配元素替換每個目標元素 目標和源和replaceWith相反
例:$('替換第二段的內容').replaceAll('p:eq(1)')
DOM包裹wrap()方法
.wrap( wrappingElement ):在集合中匹配的每個元素周圍包裹一個HTML結構,即增加父元素
p元素
增加:$('p').wrap('
') 變成了
p元素
.wrap( function ) :一個回調函數(shù)杂腰,返回用于包裹匹配元素的 HTML 內容或 jQuery 對象
例:$('p').wrap(function() {
return '
'; //與第一種類似垃你,只是寫法不一樣
})
DOM包裹unwrap()方法
unwarp()方法 ,作用與wrap方法是相反的喂很。將匹配元素集合的父級元素刪除惜颇,保留自身(和兄弟元素,如果存在)在原來的位置少辣。
例:$('p').unwarp(); //刪除p的父節(jié)點
DOM包裹wrapAll()方法
.wrapAll( wrappingElement ):給集合中匹配的元素增加一個外面包裹HTML結構
.wrapAll( function ) :一個回調函數(shù)凌摄,返回用于包裹匹配元素的 HTML 內容或 jQuery 對象通過回調的方式可以單獨處理每一個元素
例:$('p').wrapAll('
') 結果:
p元素
p元素
//給所有的p增加父元素,增加一個漓帅,不是每個單獨增加父元素
$('p').wrapAll(function() {
return '
';
})該方法返回結果是:
p元素
p元素
什么情況锨亏? 兩個例子中的結果為什么不一樣呢?小伙伴們自己查查咋回事呢忙干?
注意:.wrapAll()函數(shù)可以接受任何字符串或對象器予,可以傳遞給$()工廠函數(shù)來指定一個DOM結構。這種
結構可以嵌套多層捐迫,但是最內層只能有一個元素乾翔。所有匹配元素將會被當作是一個整體,在這個整體的外部用指定的 HTML 結構進行包裹施戴。
DOM包裹wrapInner()方法
.wrapInner( wrappingElement ):給集合中匹配的元素的內部末融,增加包裹的HTML結構
例:
p元素
p元素
執(zhí)行:$('div').wrapInner('')變成了:
p元素
p元素
.wrapInner( function ) :允許我們用一個callback函數(shù)做參數(shù)钧惧,每次遇到匹配元素時,該函數(shù)被執(zhí)行勾习,返回一個DOM元素浓瞪,jQuery對象,或者HTML片段巧婶,用來包住匹配元素的內容
例:$('div').wrapInner(function() {
return '';
})
學累了吧乾颁,來點實惠的?
下面推薦一下我學習前端編程的技術交流群艺栈,大家如果不知道怎么學習HTML5的可以來我的前端群250777811英岭,源碼已上傳群文件,不管你是小白還是大牛湿右,小編都歡迎诅妹,群不定期分享干貨,歡迎初學和進階中的小伙伴
1+1=毅人?
不要往下看了吭狡,下面真的沒內容了
.......
.......
哈哈 ,適可而止吧
前端javascript學習群4994115298