jQuery中prepend（）方法使用詳解

更新時間：2015年08月11日 10:04:42 作者：一落葉而知秋

prepend（）方法可以將指定元素插入匹配元素內(nèi)部開頭，主要用到content和selector參數(shù)，這篇文章主要給大家介紹jQuery中prepend（）方法使用，需要的朋友可以參考下

prepend（）方法將指定元素插入匹配元素按內(nèi)部的開頭，其作用和prependTo（）方法基本相同，只在語法上有差別，雖然說在語法形式上看基本相同。

下面介紹下語法結(jié)構(gòu):

$(selector).prepend(content)

參數(shù)列表:

demo：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dhdzp.com/" />
<title>腳本之家</title>
<style type="text/css">
div{
 height:200px;
 width:200px;
 border:1px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
 $("div").prepend("被加添的內(nèi)容");
 })
})
</script>
</head>
<body>
<div>前面要添加內(nèi)容:</div>
<button>點擊查看效果</button>
</body>
</html>

prepend()詳解二：

prepend()函數(shù)用于向每個匹配元素內(nèi)部的起始位置追加指定的內(nèi)容。

指定的內(nèi)容可以是：html字符串、DOM元素(或數(shù)組)、jQuery對象、函數(shù)(返回值)。

與該函數(shù)相對的是append()函數(shù)，用于向每個匹配元素內(nèi)部的末尾位置追加指定的內(nèi)容。

該函數(shù)屬于jQuery對象(實例)。

語法

復制代碼代碼如下:

jQueryObject.prepend( content1 [, content2 [, contentN ]] )

參數(shù)

jQuery 1.4 新增支持：參數(shù)content1可以為函數(shù)。prepend()將根據(jù)匹配的所有元素遍歷執(zhí)行該函數(shù)，函數(shù)中的this將指向?qū)?yīng)的DOM元素。

prepend()還會為函數(shù)傳入兩個參數(shù)：第一個參數(shù)就是當前元素在匹配元素中的索引，第二個參數(shù)就是該元素當前的內(nèi)部html內(nèi)容(innerHTML)。函數(shù)的返回值就是需要為該元素追加的內(nèi)容(可以是html字符串、DOM元素、jQuery對象)。

注意：只有第一個參數(shù)可以為自定義函數(shù)，用于遍歷執(zhí)行。如果之后的參數(shù)也為函數(shù)，則調(diào)用其toString()方法，將其轉(zhuǎn)為字符串，并視為html內(nèi)容。
返回值

prepend()函數(shù)的返回值為jQuery類型，返回當前jQuery對象本身(以便于進行鏈式風格的編程)。

注意：如果追加的內(nèi)容是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這是一個移動操作，而不是復制操作。

示例&說明

prepend()函數(shù)用于將每個匹配元素內(nèi)部的起始位置追加內(nèi)容：

<p><!--插入到p元素內(nèi)部的起始位置-->段落文本1<span></span></p>
<p><!--插入到p元素內(nèi)部的起始位置-->段落文本2<span></span></p>

<script type="text/javascript">
$("p").prepend( '<!--插入到p元素內(nèi)部的起始位置-->' ); 
</script>

請注意prepend()函數(shù)和prependTo()函數(shù)的區(qū)別：

var $A = $("s1");
var $B = $("s2");

// 將$B追加到$A中
$A.prepend( $B ); // 返回$A
// 將$A追加到$B中
$A.prependTo( $B ); // 返回表示追加內(nèi)容的jQuery對象( 匹配所有$B內(nèi)部開頭追加的$A元素 )

以下面這段HTML代碼為例：

<p id="n1">
 <span id="n2">CodePlayer</span> 
</p>
<p id="n3">
 <label class="move">Hello World</label>
</p>
<p id="n4">
 <i>測試內(nèi)容</i>
</p>

以下jQuery示例代碼用于演示prepend()函數(shù)的具體用法：

var $n1 = $("#n1");
//將一個strong標記追加到n1內(nèi)部的起始位置
$n1.prepend( '<strong>追加內(nèi)容</strong>' );


//將所有的label元素和i元素追加到n1內(nèi)部的起始位置
//原來位置的label元素和i元素會消失(相當于是移動到n1內(nèi)部的起始位置)
$n1.prepend( document.getElementsByTagName("label"), $("i") );

//為每個p元素內(nèi)部的起始位置追加一個span元素，html內(nèi)容根據(jù)索引而有所不同
var $p = $("p");
$p.prepend( function(index, html){
 return '<span>追加元素' + (index + 1) + '</span>'; 
} );

運行代碼

prepend()會將內(nèi)容追加到指定容器元素的開始標記之后，不會額外添加任何空白字符，上述代碼執(zhí)行后的完整html代碼如下(格式未作任何調(diào)整)：

<p id="n1"><span>追加元素1</span><label class="move">Hello World</label><i>測試內(nèi)容</i><strong>追加內(nèi)容</strong>
 <span id="n2">CodePlayer</span> 
</p>
<p id="n3"><span>追加元素2</span>
 
</p>
<p id="n4"><span>追加元素3</span>
 
</p>

您可能感興趣的文章: