cari
  • Log masuk
  • Daftar
Penetapan semula kata laluan berjaya

Ikuti proiects vou berminat dengan andi aet terbaru mengenai mereka

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:

QQ截图20161021134933.png


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()

fail baharu
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>第一个简单的jQuery程序</title> <style type="text/css"> div{ padding:8px 0px; font-size:12px; text-align:center; border:solid 1px #888; } </style> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("div").html("在php中文网学习,才是最好的学习途径。"); }); </script> </head> <body> <div></div> </body> </html>
Tetapkan Semula Kod
Operasi automatik
serahkan
Pratonton Clear