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