Bagaimana untuk menukar kandungan tag dalam jquery

青灯夜游
Lepaskan: 2022-11-02 19:23:32
asal
1927 orang telah melayarinya

Dua kaedah pengubahsuaian: 1. Gunakan pemilih jquery untuk mendapatkan objek tag h, dan gunakan text() untuk mengubah suai kandungan teks objek tersebut ialah "$("selector").text(" kandungan baharu" ;"; 2. Gunakan pemilih jquery untuk mendapatkan objek tag h, dan gunakan html() untuk mengubah suai kandungan objek (kandungan teks dan tag HTML), dengan sintaks "$(" pemilih").html("kandungan baharu"); ".

Bagaimana untuk menukar kandungan tag <h> dalam jquery

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

Dua cara untuk menukar kandungan teg dengan jquery

Kaedah 1: Gunakan teks() untuk menukar kandungan teks

text() boleh menetapkan kandungan teks elemen, yang boleh ditukar dengan hanya menetapkan kandungan teks kepada nilai baharu.

Langkah pengubahsuaian:

  • Gunakan pemilih jquery untuk mendapatkan objek teg h (h1~h6)

$("选择器")
Salin selepas log masuk
Salin selepas log masuk
  • Gunakan text() untuk mengubah suai kandungan objek yang diperoleh

对象.text("新内容")
Salin selepas log masuk

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("h1,h2,h3,h4").text("修改后的新文本内容");
				});
			});
		</script>
	</head>
	<body>

		<button>改变所有h元素的文本内容</button>
		<h1>这是一个大标题。</h1>
		<h2>这是另一个标题。</h2>
		<h3>这是另一个标题。</h3>
		<h4>这是另一个段落。</h4>

	</body>
</html>
Salin selepas log masuk

Bagaimana untuk menukar kandungan tag <h> dalam jquery

Kaedah 2: Gunakan html() untuk menukar kandungan teg

Kandungan yang boleh ditetapkan atau dikembalikan oleh html() ialah kandungan yang mengandungi teks dan teg HTML.

Langkah pengubahsuaian:

  • Gunakan pemilih jquery untuk mendapatkan objek teg h (h1~h6)

$("选择器")
Salin selepas log masuk
Salin selepas log masuk
  • Gunakan html() untuk mengubah suai kandungan objek yang diperoleh

对象.html("新内容")
Salin selepas log masuk

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("h1").html("修改后的新文本内容");
					$("h2,h3,h4").html(&#39;<span style="color: red;">修改后的新文本内容</span>&#39;);
				});
			});
		</script>
	</head>
	<body>
		<button>改变所有h元素的文本内容</button>
		<h1>这是一个大标题。</h1>
		<h2>这是另一个标题。</h2>
		<h3>这是另一个标题。</h3>
		<h4>这是另一个段落。</h4>

	</body>
</html>
Salin selepas log masuk

Bagaimana untuk menukar kandungan tag <h> dalam jquery

Pengetahuan lanjutan: Perbandingan antara html() dan text()

html() mendapat semua kandungan di dalam elemen, manakala text() hanya mendapat kandungan teks.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(function () {
            var strHtml = $("p").html();
            var strText = $("p").text();
            $("#txt1").val(strHtml);
            $("#txt2").val(strText);
        })
    </script>
	</head>
	<body>
		<p><strong style="color:hotpink">PHP中文网</strong></p>
		html()是:<input id="txt1" type="text" /><br />
		text()是:<input id="txt2" type="text" />
	</body>
</html>
Salin selepas log masuk

Bagaimana untuk menukar kandungan tag <h> dalam jquery

Perbezaan antara dua kaedah html() dan text() boleh dibandingkan dengan jelas daripada jadual berikut.

kod HTML html() text()
Tapak web PHP Cina
Bahasa Cina PHP laman web tapak web PHP Cina
< ;div> tapak web PHP Cina
HTML代码 html() text()
PHP中文网
PHP中文网 PHP中文网
PHP中文网
PHP中文网 PHP中文网
(空字符串)
Tapak web PHP Cina tapak web PHP Cina
(rentetan kosong)

[Pembelajaran yang disyorkan: tutorial video jQuery, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk menukar kandungan tag dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan