jQuery中 wrap() wrapAll() 與 wrapInner()的區(qū)別

MyFaith 發(fā)布于2019-08-21 10:21 / 2001人閱讀

摘要：文檔操作方法方法使用指定的內容或元素，來包裹每個被選元素中的所有內容。這是用來比較的原代碼我是占位子的。方法結果從圖中可以看出標簽包圍了每個匹配的標簽。當然，最后看起來，三個方法的效果是一樣的。

今晚看書的時候發(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)。

我讀的書少，看見這樣的解釋不能立即解決我的困惑真的很煩。

還是動手最實際。

這是用來比較的原代碼：

我是占位子的。

wrap()方法

$("p").wrap("");

結果：

從圖中可以看出strong標簽包圍了每個匹配的p標簽。

wrapAll()方法

$("p").wrapAll("");

結果：

從圖中可以看出strong標簽把全部匹配的p標簽一下子全都包圍了。

wrapInner()方法

$("p").wrapInner("");

結果：

從圖中可以看出strong標簽內嵌入每個匹配的p標簽里面。

當然，最后看起來，三個方法的效果是一樣的。

點到即止。

云服務器 GPU云服務器中SP與DP的區(qū)別 javascript和jquery的區(qū)別 jquery和javascript的區(qū)別空間與域名的區(qū)別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85371.html

jQuery DOM節(jié)點的復制、替換

摘要：拷貝克隆節(jié)點是的常見操作，提供一個方法，專門用于處理的克隆方法深度復制所有匹配的元素集合，包括所有匹配元素匹配元素的下級元素文字節(jié)點。拷貝clone() 克隆節(jié)點是DOM的常見操作，jQuery提供一個clone方法，專門用于處理dom的克隆 .clone()方法深度復制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節(jié)點。 clone方法比較簡單就是克隆節(jié)點，但是需...

jindong 2019-08-21 11:54 評論0 收藏0
jQuery基礎（二）DOM篇

摘要：將匹配元素集合的父級元素刪除，保留自身和兄弟元素，如果存在在原來的位置。方法查找指定元素集合中每一個元素的同輩元素。每次回調函數(shù)執(zhí)行時，會傳遞當前循環(huán)次數(shù)作為參數(shù)從開始計數(shù)。 DOM節(jié)點的創(chuàng)建先介紹下需要用到的瀏覽器提供的一些原生的方法（這里不處理低版本的IE兼容問題）創(chuàng)建流程比較簡單，大體如下：創(chuàng)建節(jié)點(常見的：元素、屬性和文本) 添加節(jié)點的一些屬性加入到文檔中流程中涉及的一...

Harpsichord1207 2019-08-22 10:42 評論0 收藏0
JQuery干貨篇之插入元素

摘要：在匹配元素集合中的每個元素后面插入參數(shù)所指定的內容，作為其兄弟節(jié)點。當需要移走一個元素，不久又將該元素插入時，這種方法很有用。實例從中移除集合中匹配元素的所有子節(jié)點。 JQuery干貨篇之插入元素本次使用的html,css還是我上一篇的源代碼，詳情請看上一篇文章分類插入子元素：append,prepend ,appendTo,prependTo 封裝包裹元素：wrap,wrap...

jemygraw 2019-08-29 12:27 評論0 收藏0
JQuery干貨篇之插入元素

摘要：在匹配元素集合中的每個元素后面插入參數(shù)所指定的內容，作為其兄弟節(jié)點。當需要移走一個元素，不久又將該元素插入時，這種方法很有用。實例從中移除集合中匹配元素的所有子節(jié)點。 JQuery干貨篇之插入元素本次使用的html,css還是我上一篇的源代碼，詳情請看上一篇文章分類插入子元素：append,prepend ,appendTo,prependTo 封裝包裹元素：wrap,wrap...

songze 2019-08-20 15:58 評論0 收藏0