Apakah kegunaan jquery untuk mengalih keluar elemen dom?-Soal Jawab bahagian hadapan-php.cn

Apakah kegunaan jquery untuk mengalih keluar elemen dom?

青灯夜游

Lepaskan： 2022-03-23 18:25:27

asal

2192 orang telah melayarinya

jquery menggunakan: 1. kaedah remove() untuk memadam elemen dom yang ditentukan dan semua kandungannya; 2. kaedah detach() untuk mengalih keluar elemen dom yang ditentukan dan semua kandungannya Padam, tetapi acara terikat tidak akan dipadamkan; 3. Kaedah kosong() boleh mengalih keluar elemen dom keturunan yang ditentukan.

Apakah kegunaan jquery untuk mengalih keluar elemen dom?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Dalam jQuery, jika anda ingin memadamkan elemen dom, kami mempunyai 3 kaedah berikut: remove(), detach() dan empty().

1. kaedah remove()

Kaedah remove() boleh memadamkan elemen dan semua kandungan di dalamnya.

$(selector).remove()

Salin selepas log masuk

Contoh:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
	$(function () {
            $("#btn").click(function () {
                $("li:nth-child(4)").remove();
            })
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

Salin selepas log masuk

$("li:nth-child(4)").remove() bermaksud memadamkan elemen li ke-4 di bawah elemen ul. Ingat, dalam jQuery, kecuali untuk dua pemilih: nth-child() dan :nth-of-type(), subskrip semua pemilih lain atau kaedah jQuery bermula dari 1. 0 bermula.

Apakah kegunaan jquery untuk mengalih keluar elemen dom?

2. kaedah detach()

Dalam jQuery, walaupun fungsi detach() dan remove() adalah serupa, kedua-dua Ia memadamkan elemen dan semua kandungannya, tetapi terdapat perbezaan yang jelas antara kedua-duanya. Kaedah

remove() digunakan untuk "sepenuhnya" mengalih keluar elemen. Apa yang dipanggil "lengkap" bermaksud bahawa bukan sahaja elemen akan dipadamkan, tetapi juga peristiwa yang terikat pada elemen akan dipadamkan; separuh lengkap" padamkan elemen. Apa yang dipanggil "separuh lengkap" bermaksud bahawa hanya elemen akan dipadamkan dan peristiwa yang terikat pada elemen tidak akan dipadamkan.
Contoh:

$(selector).detach()

Salin selepas log masuk

Dalam contoh ini, kami menambah acara klik untuk setiap elemen li, klik pada mana-mana elemen li dialog A kotak akan muncul. Selepas kami mengklik butang [Padam], item

jQuery

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
	$(function () {
            $("li").click(function () {
                alert("欢迎来到PHP中文网！")
            });
            $("#btn").click(function () {
                var $li = $("li:nth-child(4)").detach();
                $($li).appendTo("ul");
            });
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

Salin selepas log masuk

Tetapi pada masa ini, jika anda mengklik pada item

jQuery

, anda akan mendapati bahawa peristiwa klik terikat sebelum ini wujud dan dialog kotak akan muncul.

Apakah kegunaan jquery untuk mengalih keluar elemen dom?

3 kaedah kosong() Apakah kegunaan jquery untuk mengalih keluar elemen dom?

Dalam jQuery, kita boleh menggunakan kaedah kosong() untuk "kosongkan " "Sesetengah unsur keturunan.

Contoh:

$(selector).empty()

Salin selepas log masuk

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("#btn").click(function () {
                $("ul li:nth-child(4)").empty();
            });
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

Salin selepas log masuk

[Pembelajaran yang disyorkan:

tutorial video jQuery Apakah kegunaan jquery untuk mengalih keluar elemen dom? ,

bahagian hadapan web

】

Atas ialah kandungan terperinci Apakah kegunaan jquery untuk mengalih keluar elemen dom?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!