淺談jQuery中 wrap() wrapAll() 與 wrapInner()的差異
今晚看書(shū)的時(shí)候發(fā)現(xiàn)jQuery有三個(gè)包裹節(jié)點(diǎn)的方法，百度了一下jQuery wrap() / wrapAll() / wrapInner()，果然搜索結(jié)果 W3School的文檔說(shuō)明是排第一的。
可是，W3School的解釋是這樣的：
jQuery 文檔操作 - wrap() 方法
wrap() 方法把每個(gè)被選元素放置在指定的 HTML 內(nèi)容或元素中。
jQuery 文檔操作 - wrapAll() 方法
wrapAll() 在指定的 HTML 內(nèi)容或元素中放置所有被選的元素。
jQuery 文檔操作 - wrapInner() 方法
wrapInner() 方法使用指定的 HTML 內(nèi)容或元素，來(lái)包裹每個(gè)被選元素中的所有內(nèi)容 (inner HTML)。
我讀的書(shū)少，看見(jiàn)這樣的解釋不能立即解決我的困惑真的很煩。
還是動(dòng)手最實(shí)際。
這是用來(lái)比較的原代碼：
<p>我是占位子的。</p>
<p>我是占位子的。</p>
wrap()方法
$("p").wrap("<strong></strong>");
結(jié)果：
從圖中可以看出strong標(biāo)簽包圍了每個(gè)匹配的p標(biāo)簽。
wrapAll()方法
$("p").wrapAll("<strong></strong>");
結(jié)果：
從圖中可以看出strong標(biāo)簽把全部匹配的p標(biāo)簽一下子全都包圍了。
wrapInner()方法
$("p").wrapInner("<strong></strong>");
結(jié)果：
從圖中可以看出strong標(biāo)簽內(nèi)嵌入每個(gè)匹配的p標(biāo)簽里面。
當(dāng)然，最后看起來(lái)，三個(gè)方法的效果是一樣的。
點(diǎn)到即止。
以上就是個(gè)人對(duì)于jQuery中 wrap() wrapAll() 與 wrapInner()的差異分析了，僅僅是個(gè)人的一些理解，大神請(qǐng)略過(guò)。
相關(guān)文章
jQuery實(shí)用小技巧_輸入框文字獲取和失去焦點(diǎn)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery實(shí)用小技巧_輸入框文字獲取和失去焦點(diǎn)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
Tipso是一款基于jQuery的Tooltip提示框插件，他提供了眾多參數(shù)，如顯示動(dòng)畫(huà)持續(xù)時(shí)間、背景顏色、文本顏色、顯示位置、加載ajax內(nèi)容、回調(diào)函數(shù)等等。2015-05-05
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)出現(xiàn)隱藏層文字鏈接的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)出現(xiàn)隱藏層文字鏈接的方法,涉及jQuery鼠標(biāo)hover事件的響應(yīng)及頁(yè)面元素的動(dòng)態(tài)處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了jQuery中slideUp()方法用法,以實(shí)例形式分析了slideUp()方法的功能、定義及具體使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jWiard 基于JQuery的強(qiáng)大的向?qū)Э丶榻B
jWiard 基于JQuery的強(qiáng)大的向?qū)Э丶榻B，需要的朋友可以參考下。2011-10-10
一個(gè)簡(jiǎn)單的jquery彈出框代碼實(shí)現(xiàn)，點(diǎn)擊鏈接彈出模式對(duì)話(huà)框，任意點(diǎn)擊網(wǎng)頁(yè)的其它地方可以關(guān)閉彈出框，可以自定義透明度，簡(jiǎn)單實(shí)用的jquery彈出框效果。2015-04-04
JQuery開(kāi)發(fā)的數(shù)獨(dú)游戲代碼
08年的時(shí)候裝上ubuntu試用了一下，發(fā)現(xiàn)里面自帶了一個(gè)數(shù)獨(dú)游戲，索性自己用jquery做了一個(gè)數(shù)獨(dú)游戲。2010-10-10
JQuery 實(shí)現(xiàn)文件下載的常用方法分析
這篇文章主要介紹了JQuery 實(shí)現(xiàn)文件下載的常用方法,結(jié)合實(shí)例形式分析了jQuery的GET方式、POST方式及HTML5 Blob對(duì)象等常見(jiàn)的文件下載機(jī)制、原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2019-10-10
jquery跟隨屏幕滾動(dòng)效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery跟隨屏幕滾動(dòng)效果的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-04-04
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)儀表盤(pán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04