masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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>
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)  492837 permainan