Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan jquery untuk menukar teks pada klik
Kaedah pelaksanaan: 1. Gunakan pernyataan "$("button").click(function(){})" untuk mengikat acara klik pada elemen butang dan tetapkan fungsi pemprosesan acara; fungsi pemprosesan , tetapkan pernyataan "elemen object.text("new text")" atau "object.html("new text")" untuk mengubah suai teks.
Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.2.1, komputer Dell G3.
Gunakan jquery untuk menukar teks pada klik
1 Tetapkan acara klik
Gunakan click( ) Ikat acara klik pada elemen butang dan tetapkan fungsi pemprosesan acara
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
//点击事件发生后，执行的代码
});
});
</script>
</head>
<body>
<button>修改所有p元素的文本内容</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>2. Dalam fungsi pemprosesan acara, gunakan text() atau html() untuk mengubah suai kandungan teks daripada elemen yang ditentukan
kaedah text() menetapkan atau mengembalikan kandungan teks elemen yang dipilih.
kaedah html() menetapkan atau mengembalikan kandungan (innerHTML) elemen yang dipilih.
$(document).ready(function() {
$("button").click(function() {
$("p").text("Hello world!");
});
});
$(document).ready(function() {
$("button").click(function() {
$("p").html("Hello!");
});
});
Arahan:
html() mendapat semua kandungan di dalam elemen, manakala text() hanya mendapat kandungan teks
html() boleh menetapkan kandungan termasuk tag, manakala text() hanya boleh menetapkan kandungan teks (tidak termasuk Label ).
$(document).ready(function() {
$("button").click(function() {
$("p").html("Hello <b>world!</b>");
});
});
[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]
Atas ialah kandungan terperinci Bagaimana untuk menggunakan jquery untuk menukar teks pada klik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!