輕松掌握jQuery中wrap()與unwrap()函數(shù)的用法
更新時(shí)間：2016年05月24日 17:09:01 投稿：goldensun
wrap()能夠?qū)⒅付℉TML元素包裹DOM結(jié)構(gòu),與之相反unwrap()函數(shù)則是將DOM去掉^^下面讓我們來以兩個(gè)小例子輕松掌握jQuery中wrap()與unwrap()函數(shù)的用法:)
wrap()
wrap()函數(shù)可以接受任何字符串或?qū)ο?，可以傳遞給$()工廠函數(shù)來指定一個(gè)DOM結(jié)構(gòu)。這種結(jié)構(gòu)可以嵌套了好幾層深，但應(yīng)該只包含一個(gè)核心的元素。每個(gè)匹配的元素都會(huì)被這種結(jié)構(gòu)包裹。該方法返回原始的元素集，以便之后使用鏈?zhǔn)椒椒ā?br />
eg：
//在當(dāng)前頁面內(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è)段落包裹起來
# 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應(yīng)用實(shí)例分享_實(shí)現(xiàn)手風(fēng)琴特效
下面小編就為大家分享一篇jquery應(yīng)用實(shí)例_實(shí)現(xiàn)手風(fēng)琴特效的示例代碼。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
彈窗效果想必大家都有見到過吧，在本文將為大家介紹下使用juery框架來寫個(gè)適合新手學(xué)習(xí)的彈窗效果2013-11-11
jQuery實(shí)現(xiàn)常見的隱藏與展示列表效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)常見的隱藏與展示列表效果,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及針對(duì)頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-06-06
jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法,涉及針對(duì)表單提交時(shí)的判斷方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
jQuery實(shí)現(xiàn)根據(jù)類型自動(dòng)顯示和隱藏表單
這篇文章主要給大家分享了jQuery實(shí)現(xiàn)根據(jù)類型自動(dòng)顯示和隱藏表單的代碼，非常的簡單實(shí)用，僅僅10行代碼，推薦給大家，希望能給大家一些提示。2015-03-03
jQuery.extend 函數(shù)的詳細(xì)用法
jQuery.extend 函數(shù)的詳細(xì)用法，學(xué)習(xí)jquery的朋友可以參考下2012-06-06
jQuery html表格排序插件tablesorter使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery html表格排序插件tablesorter的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery實(shí)現(xiàn)的簡單在線計(jì)算器功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單在線計(jì)算器功能,結(jié)合完整實(shí)例形式分析了jQuery實(shí)現(xiàn)簡單四則運(yùn)算的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁面元素屬性的動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-11-11