Perbincangan tentang senario aplikasi praktikal lelaran jQuery-tutorial js-php.cn

Perbincangan tentang senario aplikasi praktikal lelaran jQuery

WBOY

Lepaskan： 2024-02-29 08:54:04

asal

627 orang telah melayarinya

Perbincangan tentang senario aplikasi praktikal lelaran jQuery

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas dalam pembangunan web Ia menyediakan banyak kaedah mudah untuk mengendalikan elemen HTML, mengendalikan acara, melaksanakan kesan animasi, dsb. Dalam pembangunan web sebenar, fungsi lelaran jQuery sangat biasa digunakan Dengan menggelung elemen dalam koleksi, kita boleh melakukan pelbagai operasi pada mereka untuk mencapai kesan interaktif yang kompleks. Artikel ini akan meneroka senario aplikasi praktikal lelaran jQuery dan menyediakan contoh kod khusus.

1. Merentasi elemen secara berulang

Dalam pembangunan web, selalunya perlu untuk beroperasi pada sekumpulan elemen, seperti menambahkan acara klik pada semua butang, mengubah suai gaya semua perenggan, dsb. Pada masa ini, kita boleh menggunakan kaedah .each() yang disediakan oleh jQuery untuk merentasi elemen ini dan melaksanakan operasi kelompok. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 迭代示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <script>
    $(document).ready(function() {
      $("button").each(function(index) {
        $(this).text("按钮" + (index + 1));
        $(this).css("background-color", "yellow");
      });
    });
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menggunakan kaedah .each() untuk menggelungkan semua elemen butang dan menetapkan kandungan teks dan warna latar belakang yang berbeza untuknya.

2. Menapis elemen secara berulang

Kadangkala, kita perlu menapis elemen mengikut syarat tertentu dan hanya beroperasi pada elemen yang memenuhi syarat. jQuery menyediakan kaedah .filter() untuk mencapai fungsi ini. Berikut ialah contoh:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 迭代示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
    <li>苹果</li>
  </ul>
  <script>
    $(document).ready(function() {
      $("li").filter(function() {
        return $(this).text() === "苹果";
      }).css("color", "red");
    });
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menggunakan kaedah .filter() untuk menapis elemen li yang kandungan teksnya ialah "epal" dan menetapkan warna teksnya kepada merah.

3 Lelaran ke atas tatasusunan

Selain memanipulasi elemen DOM, jQuery juga boleh mengulangi tatasusunan JavaScript. Sebagai contoh, kita boleh menggunakan kaedah $.each() untuk merentasi tatasusunan dan memproses setiap elemen. Berikut ialah contoh:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 迭代示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul id="fruits"></ul>
  <script>
    $(document).ready(function() {
      const fruits = ["苹果", "香蕉", "橙子"];
      $.each(fruits, function(index, value) {
        $("#fruits").append("<li>" + value + "</li>");
      });
    });
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menggelung melalui tatasusunan buah menggunakan kaedah $.each() dan menambah setiap nama buah pada senarai ul.

Melalui perbincangan senario aplikasi praktikal dan contoh kod khusus di atas, kita dapat melihat fungsi berkuasa lelaran jQuery, yang boleh memudahkan operasi kami pada koleksi dan tatasusunan elemen, meningkatkan kecekapan pembangunan dan membawa lebih banyak kemungkinan kepada pembangunan web. Saya harap artikel ini dapat membantu pembaca, terima kasih kerana membaca!

Atas ialah kandungan terperinci Perbincangan tentang senario aplikasi praktikal lelaran jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!