淺談jQuery中 wrap() wrapAll() 與 wrapInner()的差異
今晚看書的時(shí)候發(fā)現(xiàn)jQuery有三個(gè)包裹節(jié)點(diǎn)的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索結(jié)果 W3School的文檔說明是排第一的。
可是,W3School的解釋是這樣的:
jQuery 文檔操作 - wrap() 方法
wrap() 方法把每個(gè)被選元素放置在指定的 HTML 內(nèi)容或元素中。
jQuery 文檔操作 - wrapAll() 方法
wrapAll() 在指定的 HTML 內(nèi)容或元素中放置所有被選的元素。
jQuery 文檔操作 - wrapInner() 方法
wrapInner() 方法使用指定的 HTML 內(nèi)容或元素,來包裹每個(gè)被選元素中的所有內(nèi)容 (inner HTML)。
我讀的書少,看見這樣的解釋不能立即解決我的困惑真的很煩。
還是動(dòng)手最實(shí)際。
這是用來比較的原代碼:
<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)然,最后看起來,三個(gè)方法的效果是一樣的。
點(diǎn)到即止。
以上就是個(gè)人對于jQuery中 wrap() wrapAll() 與 wrapInner()的差異分析了,僅僅是個(gè)人的一些理解,大神請略過。
相關(guān)文章
jQuery動(dòng)畫效果-fadeIn fadeOut淡入淺出示例代碼
jQuery動(dòng)畫效果淡入淺出想必大家都有見到過吧,其實(shí)很很簡單,通過fadeIn fadeOut方法便可輕松實(shí)現(xiàn),具體如下,喜歡的朋友可以參考下,希望對大家有所幫助2013-08-08jquery實(shí)現(xiàn)根據(jù)瀏覽器窗口大小自動(dòng)縮放圖片的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)根據(jù)瀏覽器窗口大小自動(dòng)縮放圖片的方法,涉及jquery操作頁面元素屬性與樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07jQuery的animate函數(shù)實(shí)現(xiàn)圖文切換動(dòng)畫效果
animate()在jquery中作為一個(gè)方法,可用于創(chuàng)建動(dòng)畫效果,jquery中的animate()方法讓那個(gè)頁面增加了很好的視覺效果2015-05-05淺談jquery設(shè)置和獲得checkbox選中的問題
下面小編就為大家?guī)硪黄獪\談jquery設(shè)置和獲得checkbox選中的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08jQuery實(shí)現(xiàn)網(wǎng)站添加高亮突出顯示效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)網(wǎng)站添加高亮突出顯示效果的方法,涉及jQuery針對頁面元素與樣式的操作技巧,需要的朋友可以參考下2015-06-06jquery UI實(shí)現(xiàn)autocomplete在獲取焦點(diǎn)時(shí)得到顯示列表功能示例
這篇文章主要介紹了jquery UI實(shí)現(xiàn)autocomplete在獲取焦點(diǎn)時(shí)得到顯示列表功能,結(jié)合實(shí)例形式分析了jquery UI實(shí)現(xiàn)autocomplete事件響應(yīng)及顯示下拉列表功能操作技巧,需要的朋友可以參考下2019-06-06