首頁 > web前端 > js教程 > 主體

jQuery.replaceAll() 函數實例詳解

巴扎黑
發布: 2017-06-24 14:35:06
原創
1488 人瀏覽過

replaceAll()函數用來使用目前匹配元素來取代掉所有的目標元素。

該函數屬於jQuery物件(實例)。

語法

jQuery 1.2 新增此函數。

jQueryObject.replaceAll( target )

參數

參數

說明

target    String/Element/jQuery/Array類型被取代的目標元素,這些元素將被目前匹配元素取代掉。    

如果參數target為字串#,則將其視為jQuery選擇器。

傳回值

replaceAll()函數的回傳值為jQuery類型,傳回表示取代內容的jQuery物件。

與被替換掉的節點關聯的所有資料和事件處理器也將同時移除。

注意:如果目前jQuery物件匹配的某個元素是頁面上的元素,則該元素將從原來位置上消失,這相當於一個移動操作,而不是一個複製操作。

範例&說明

replaceAll()函數用於使用當前匹配元素替換掉所有的目標元素:

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<script type="text/javascript">
$(&#39;<em></em>&#39;).replaceAll( "p" );
// 其返回值就是匹配替换内容(两个&#39;<em></em>&#39;)的jQuery对象
</script>
<!--以下是jQuery代码执行后的html内容-->
<em></em>
<em></em>
登入後複製

請注意replaceAll()和replaceWith()函數之間的差異:

var $A = $("s1");
var $B = $("s2");
// 将$B替换成$A
$A.replaceAll( $B ); // 返回表示替换内容的jQuery对象( 匹配替换掉$B的所有$A元素 )
// 将$A替换成$B
$A.replaceWith( $B ); // 返回$A
登入後複製

請參考下面這段HTML程式碼(原HTML程式碼):

<p id="n1">
    <span id="n2">foo</span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
    <span id="n5">bar</span>
</p>
<div id="n6"></div>
登入後複製

以下jQuery範例程式碼,用於示範replaceAll()函數的具體用法:

// 用em元素替换掉所有的span元素
$(&#39;<em class="new">替代元素</em>&#39;).replaceAll( "span" );
// 用n4替换掉n6
// n4将从原位置上消失(替换到n6的位置)
$("#n4").replaceAll( $("#n6") );
登入後複製

以下是jQuery程式碼執行後的html內容(格式未作任何調整):

<p id="n1">
    <em class="new">替代元素</em>    
</p>
<p id="n3">
    
    <em class="new">替代元素</em>
</p>
<label id="n4">[label#n4]</label>
登入後複製

以上是jQuery.replaceAll() 函數實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!