jQuery ialah objek koleksi Selepas mencari koleksi elemen yang ditentukan melalui kaedah $(), satu siri operasi boleh dilakukan. Selepas $(), ini bermakna objek koleksi sudah ditentukan Apakah yang perlu dilakukan jika anda perlu menambah elemen baharu pada koleksi ini nanti? jQuery menyediakan kaedah tambah untuk ini, yang digunakan untuk mencipta objek jQuery baharu
, elemen itu ditambahkan pada set elemen yang dipadankan
Hujah untuk menambah() boleh menerima hampir mana-mana $(), termasuk ungkapan pemilih jQuery, elemen DOM atau rujukan serpihan HTML.
Lihat sahaja kes:
Operasi: Pilih semua elemen li, dan kemudian tambah elemen p pada koleksi li
<ul> > <li>senarai item 1</li>
<li>senarai item 3</li>
</ul>
<p>Elemen p baharu</ p>
Proses 1: Lulus pemilih
$('li').add('p')
Proses 2: Lulus Elemen dom
$('li').add(document.getElementsByTagName('p')[0])
Cara lain ialah membuat teg P secara dinamik dan menambahkannya pada koleksi , dan kemudian masukkannya ke dalam kedudukan yang ditentukan, tetapi ini mengubah susunan elemen itu sendiri
$('li').add('<p>Elemen p baharu</p>'). kedudukan sasaran)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 150px;
}
.left div {
width: 150px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>add方法()</h2>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<p>新的p元素</p>
</div>
</div>
<div class="right"></div>
<br/>
<button>点击：add传递元素标签</button>
<button>点击：add传递html结构</button>
<script type="text/javascript">
$("button:first").click(function() {
//把p元素添加到li的合集中
$('li').add('p').css('background', 'red')
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//把html结构'<p>新的p元素</p>'
//加入到li的合集中，为了能够在页面上显示
//需要再重新appendTo到指定的节点处
//值得注意：整个结构位置都改变了
$('li').add('<p>新的p元素</p>').appendTo($('.right'))
})
</script>
</body>
</html>
bahagian seterusnya
