jQuery中prepend（）方法使用詳解

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

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

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

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

復(fù)制代碼代碼如下:

$(selector).prepend(content)

參數(shù)列表:

demo：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.fzitv.net/" />
<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>點(diǎn)擊查看效果</button>
</body>
</html>

prepend()詳解二：

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

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

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

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

語(yǔ)法

復(fù)制代碼代碼如下:

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

參數(shù)

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

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

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

prepend()函數(shù)的返回值為jQuery類型，返回當(dāng)前jQuery對(duì)象本身(以便于進(jìn)行鏈?zhǔn)斤L(fēng)格的編程)。

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

示例&說(shuō)明

prepend()函數(shù)用于將每個(gè)匹配元素內(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>

請(qǐng)注意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對(duì)象( 匹配所有$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>測(cè)試內(nèi)容</i>
</p>

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

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


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

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

運(yùn)行代碼

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

<p id="n1"><span>追加元素1</span><label class="move">Hello World</label><i>測(cè)試內(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>

您可能感興趣的文章: