輕松掌握jQuery中wrap()與unwrap()函數(shù)的用法
wrap()
wrap()函數(shù)可以接受任何字符串或?qū)ο?,可以傳遞給$()工廠函數(shù)來(lái)指定一個(gè)DOM結(jié)構(gòu)。這種結(jié)構(gòu)可以嵌套了好幾層深,但應(yīng)該只包含一個(gè)核心的元素。每個(gè)匹配的元素都會(huì)被這種結(jié)構(gòu)包裹。該方法返回原始的元素集,以便之后使用鏈?zhǔn)椒椒ā?br />
eg:
//在當(dāng)前頁(yè)面內(nèi)追加換行標(biāo)簽和指定的HTML內(nèi)容 function w( html ){ document.body.innerHTML += "<br/>" + html; } var name = "Hello"; function foo( a, b ){ w( this.name ); w( a + b ); } // 直接調(diào)用 foo( 1, 2 ); // Hello // 3 var obj = { name: "CodePlayer", age: 18 }; var proxy = $.proxy( foo, obj, 5, 10 ); // 代理調(diào)用foo()函數(shù),此時(shí)其內(nèi)部的this指向?qū)ο髈bj proxy(); // CodePlayer // 15 運(yùn)行代碼
unwrap()
這個(gè)函數(shù)將移出元素的父元素。這能快速取消 .wrap()方法的效果。匹配的元素(以及他們的同輩元素)會(huì)在DOM結(jié)構(gòu)上替換他們的父元素。
eg:
用ID是"content"的div將每一個(gè)段落包裹起來(lái)
# HTML 代碼: <div> <p>Hello</p> <p>cruel</p> <p>World</p> </div> # jQuery 代碼: $("p").unwrap()
結(jié)果:
<p>Hello</p> <p>cruel</p> <p>World</p>
相關(guān)文章
jQuery $.get 的妙用 訪問(wèn)本地文本文件
當(dāng)頁(yè)面文件.html作為本地文件打開(即IE路徑為file:///開頭的)的時(shí)候,需要訪問(wèn)本地文本文件的內(nèi)容時(shí)2012-07-07使用jQuery解決IE與FireFox下createElement方法的差異
使用jQuery解決IE與FireFox下createElement方法的差異。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11jquery簡(jiǎn)單實(shí)現(xiàn)圖片切換效果的方法
這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)圖片切換效果的方法,涉及jQuery鏈?zhǔn)讲僮骷皥D片操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05jQuery實(shí)現(xiàn)的自定義輪播圖功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義輪播圖功能,結(jié)合實(shí)例形式詳細(xì)分析了輪播圖的原理、實(shí)現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下2018-12-12jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果,效果非常美觀大方,通過(guò)鼠標(biāo)hover事件及頁(yè)面元素的遍歷與樣式操作實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-08-08springmvc接收jquery提交的數(shù)組數(shù)據(jù)代碼分享
這篇文章主要介紹了springmvc接收jquery提交的數(shù)組數(shù)據(jù)代碼分享,還是比較不錯(cuò)的,這里分享給大家,供需要的朋友參考。2017-10-10學(xué)習(xí)jquery必備 api中英文對(duì)照的chm手冊(cè) 下載
學(xué)習(xí)jquery必備 api中英文對(duì)照的chm手冊(cè) 下載...2007-05-05