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

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

jQuery - Kaedah rantaian

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]