jQuery Chaining

Dengan jQuery, tindakan/kaedah boleh dipautkan bersama.

Chaining membolehkan kami menjalankan berbilang kaedah jQuery (pada elemen yang sama) dalam satu pernyataan.


jPautan kaedah pertanyaan

Sehingga kini, kami telah menulis satu pernyataan jQuery pada satu masa (satu selepas lain).

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 gelongsor ke atas, kemudian gelongsor 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>

Jalankan dan cuba


Kami juga boleh menambah berbilang panggilan kaedah jika perlu .

Petua: Apabila memautkan, baris kod menjadi kucar-kacir. Walau bagaimanapun, sintaks jQuery tidak begitu ketat; anda boleh menulisnya dalam format yang anda mahu, termasuk pemisah baris dan lekukan.

Menulis seperti berikut juga 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>

Cuba jalankannya

Petua: jQuery akan membuang ruang tambahan dan menganggapnya sebagai satu baris panjang kod untuk melaksanakan baris kod di atas.



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","red") .slideUp(2000) .slideDown(2000); }); }); </script> </head> <body> <p id="p1">php中文网(php.cn)</p> <button>点我</button> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus