Penjelasan terperinci tentang kaedah prepend() dalam jQuery

Penjelasan terperinci tentang kaedah prepend() dalam jQuery_jquery

WBOY

Lepaskan： 2016-05-16 15:45:52

asal

1699 orang telah melayarinya

Kaedah prepend() memasukkan elemen yang ditentukan ke dalam permulaan elemen padanan Fungsinya pada asasnya sama dengan kaedah prependTo() Satu-satunya perbezaan adalah dalam sintaks, walaupun bentuk sintaks pada dasarnya adalah sama.

Berikut ialah pengenalan kepada struktur tatabahasa:

Salin kod Kod adalah seperti berikut:

$(selector).prepend(kandungan)

Senarai parameter:

demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.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("被加添的内容");
 })
})
</script>
</head>
<body>
<div>前面要添加内容:</div>
<button>点击查看效果</button>
</body>
</html>

Salin selepas log masuk

Penjelasan terperinci tentang prepend() 2:

fungsi prepend() digunakan untuk menambahkan kandungan yang ditentukan pada kedudukan permulaan dalam setiap elemen padanan.

Kandungan yang ditentukan boleh menjadi: rentetan html, elemen DOM (atau tatasusunan), objek jQuery, fungsi (nilai pulangan).

Kebalikan daripada fungsi ini ialah fungsi append(), yang digunakan untuk menambahkan kandungan yang ditentukan pada kedudukan akhir di dalam setiap elemen padanan.

Fungsi ini tergolong dalam objek jQuery (contoh).

Tatabahasa

Salin kod Kod adalah seperti berikut:

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

Parameter

sokongan baharu jQuery 1.4: kandungan parameter1 boleh menjadi fungsi. prepend() akan merentasi dan melaksanakan fungsi ini berdasarkan semua elemen padanan, dan ini dalam fungsi akan menunjuk kepada elemen DOM yang sepadan.

prepend() juga akan menghantar dua parameter kepada fungsi : parameter pertama ialah indeks elemen semasa dalam elemen padanan dan parameter kedua ialah kandungan html dalaman semasa elemen (innerHTML ). Nilai pulangan fungsi ialah kandungan yang perlu dilampirkan pada elemen (boleh menjadi rentetan html, elemen DOM atau objek jQuery).

Nota: Hanya parameter pertama boleh menjadi fungsi tersuai untuk pelaksanaan traversal. Jika parameter seterusnya juga merupakan fungsi, kaedah toString()nya dipanggil, ditukar kepada rentetan dan dianggap sebagai kandungan html.
Nilai pulangan

Nilai pulangan fungsi prepend() adalah daripada jenis jQuery, mengembalikan objek jQuery semasa itu sendiri (untuk memudahkan pengaturcaraan gaya rantai).

NotaNota: Jika kandungan yang dilampirkan ialah beberapa elemen dalam halaman semasa, maka elemen ini akan hilang daripada kedudukan asalnya. Pendek kata, ini adalah operasi bergerak, bukan operasi salinan.

Contoh & Arahan

Fungsi

prepend() digunakan untuk menambahkan kandungan pada kedudukan permulaan di dalam setiap elemen padanan:

<p><!--插入到p元素内部的起始位置-->段落文本1<span></span></p>
<p><!--插入到p元素内部的起始位置-->段落文本2<span></span></p>

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

Salin selepas log masuk

Sila ambil perhatian perbezaan antara fungsi prepend() dan fungsi prependTo():

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

// 将$B追加到$A中
$A.prepend( $B ); // 返回$A
// 将$A追加到$B中
$A.prependTo( $B ); // 返回表示追加内容的jQuery对象( 匹配所有$B内部开头追加的$A元素 )

Salin selepas log masuk

Ambil kod HTML berikut sebagai contoh:

<p id="n1">
 <span id="n2">CodePlayer</span> 
</p>
<p id="n3">
 <label class="move">Hello World</label>
</p>
<p id="n4">
 <i>测试内容</i>
</p>

Salin selepas log masuk

Kod sampel jQuery berikut digunakan untuk menunjukkan penggunaan khusus fungsi prepend():

var $n1 = $("#n1");
//将一个strong标记追加到n1内部的起始位置
$n1.prepend( '<strong>追加内容</strong>' );


//将所有的label元素和i元素追加到n1内部的起始位置
//原来位置的label元素和i元素会消失(相当于是移动到n1内部的起始位置)
$n1.prepend( document.getElementsByTagName("label"), $("i") );

//为每个p元素内部的起始位置追加一个span元素，html内容根据索引而有所不同
var $p = $("p");
$p.prepend( function(index, html){
 return '<span>追加元素' + (index + 1) + '</span>'; 
} );

Salin selepas log masuk

Jalankan kod

prepend() akan menambahkan kandungan pada teg permulaan elemen kontena yang ditentukan tanpa menambah sebarang aksara ruang kosong tambahan Kod html yang lengkap selepas kod di atas dilaksanakan adalah seperti berikut (tiada pelarasan pada format):

<p id="n1"><span>追加元素1</span><label class="move">Hello World</label><i>测试内容</i><strong>追加内容</strong>
 <span id="n2">CodePlayer</span> 
</p>
<p id="n3"><span>追加元素2</span>
 
</p>
<p id="n4"><span>追加元素3</span>
 
</p>

Salin selepas log masuk