淺談jQuery中 wrap() wrapAll() 與 wrapInner()的差異
今晚看書的時候發(fā)現(xiàn)jQuery有三個包裹節(jié)點的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索結果 W3School的文檔說明是排第一的。
可是,W3School的解釋是這樣的:
jQuery 文檔操作 - wrap() 方法
wrap() 方法把每個被選元素放置在指定的 HTML 內容或元素中。
jQuery 文檔操作 - wrapAll() 方法
wrapAll() 在指定的 HTML 內容或元素中放置所有被選的元素。
jQuery 文檔操作 - wrapInner() 方法
wrapInner() 方法使用指定的 HTML 內容或元素,來包裹每個被選元素中的所有內容 (inner HTML)。
我讀的書少,看見這樣的解釋不能立即解決我的困惑真的很煩。
還是動手最實際。
這是用來比較的原代碼:
<p>我是占位子的。</p>
<p>我是占位子的。</p>
wrap()方法
$("p").wrap("<strong></strong>");
結果:
從圖中可以看出strong標簽包圍了每個匹配的p標簽。
wrapAll()方法
$("p").wrapAll("<strong></strong>");
結果:
從圖中可以看出strong標簽把全部匹配的p標簽一下子全都包圍了。
wrapInner()方法
$("p").wrapInner("<strong></strong>");
結果:
從圖中可以看出strong標簽內嵌入每個匹配的p標簽里面。
當然,最后看起來,三個方法的效果是一樣的。
點到即止。
以上就是個人對于jQuery中 wrap() wrapAll() 與 wrapInner()的差異分析了,僅僅是個人的一些理解,大神請略過。
相關文章
jQuery動畫效果-fadeIn fadeOut淡入淺出示例代碼
jQuery動畫效果淡入淺出想必大家都有見到過吧,其實很很簡單,通過fadeIn fadeOut方法便可輕松實現(xiàn),具體如下,喜歡的朋友可以參考下,希望對大家有所幫助2013-08-08jquery實現(xiàn)根據瀏覽器窗口大小自動縮放圖片的方法
這篇文章主要介紹了jquery實現(xiàn)根據瀏覽器窗口大小自動縮放圖片的方法,涉及jquery操作頁面元素屬性與樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07jQuery的animate函數(shù)實現(xiàn)圖文切換動畫效果
animate()在jquery中作為一個方法,可用于創(chuàng)建動畫效果,jquery中的animate()方法讓那個頁面增加了很好的視覺效果2015-05-05jquery UI實現(xiàn)autocomplete在獲取焦點時得到顯示列表功能示例
這篇文章主要介紹了jquery UI實現(xiàn)autocomplete在獲取焦點時得到顯示列表功能,結合實例形式分析了jquery UI實現(xiàn)autocomplete事件響應及顯示下拉列表功能操作技巧,需要的朋友可以參考下2019-06-06