masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

jQuery - Kaedah rantaian

Pautan Kaedah jQuery

Sehingga kini, kami telah menulis pernyataan jQuery satu demi satu (satu demi satu).

Walau bagaimanapun, terdapat teknik yang dipanggil chaining yang membolehkan kami menjalankan berbilang arahan jQuery pada elemen yang sama, satu demi satu.

Petua: Dengan cara ini, penyemak imbas tidak perlu mencari elemen yang sama beberapa kali.

Untuk memautkan tindakan, anda hanya menambah tindakan itu pada tindakan sebelumnya.

Contoh berikut memaut css(), slideUp() dan slideDown() bersama-sama. Elemen "p1" mula-mula akan bertukar merah, kemudian meluncur ke atas, kemudian ke bawah: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>
<body>
<p id="p1">php中文网!!</p>
<button>点我</button>
</body>
</html>

Petua: Apabila memaut, baris kod akan kelihatan buruk. Walau bagaimanapun, sintaks jQuery tidak begitu ketat; anda boleh menulisnya dalam format yang anda mahu, termasuk pemisah baris dan lekukan.

Menulis seperti ini juga akan berfungsi dengan baik: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
  });
});
</script>
</head>
<body>
<p id="p1">php中文网!!</p>
<button>点我</button>
</body>
</html>

jQuery akan membuang ruang kosong tambahan dan melaksanakan baris kod di atas sebagai satu baris kod yang panjang.

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function() { $("button").click(function(){ $("#p1").css("color","blue").slideUp(3000).slideDown(3000); $("#panel").slideToggle("slow"); }); }); </script> <style type="text/css"> #panel { padding:50px; display:none; } </style> </head> <body> <p id="p1">php中文网!!</p> <div id="panel">Hello world!</div> <button>点我</button> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492875 permainan