Tulis program jQuery pertama anda
Tulis atur cara
Buat halaman html, perkenalkan perpustakaan kelas jQuery dan tulis kod berikut:
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<title>Hello World jQuery!</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="divMsg">Hello jQuery!</div>
<input id="btnShow" type="button" value="show" />
<input id="btnHide" type="button" value="hidden" /><br/>
<input id="btnChange" type="button" value="change content is Hello World, too!"/>
<script>
$("#btnShow").bind("click", function(event) {
$("#divMsg").show();
});
$("#btnHide").bind("click", function(event) {
$("#divMsg").hide();
});
$("#btnChange").bind("click", function(event) {
$("#divMsg").html("Hello World, too!");
});
</script>
</body>
</html>Kesannya adalah seperti berikut:
Terdapat tiga butang pada halaman, yang masing-masing mengawal paparan, menyembunyikan dan mengubah suai kandungan Hello World.
Contoh ini menggunakan:
(1) pemilih ID jQuery: $("#btnShow") (2) Fungsi mengikat acara: bind() (3) Tunjukkan dan sembunyikan Fungsi: tunjukkan( ) dan hide() (4) Berfungsi untuk mengubah suai html di dalam elemen: html()
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
