Rumah >hujung hadapan web >tutorial js >Temui rahsia penapis jQuery: dedahkan ciri yang disertakan

Temui rahsia penapis jQuery: dedahkan ciri yang disertakan

PHPz
PHPzasal
2024-02-28 08:21:031215semak imbas

Temui rahsia penapis jQuery: dedahkan ciri yang disertakan

jQuery ialah perpustakaan JavaScript yang popular untuk memudahkan manipulasi DOM dan pengendalian acara. Dalam jQuery, penapis ialah alat berkuasa yang boleh membantu pembangun memilih elemen pada halaman yang perlu dimanipulasi dengan tepat. Artikel ini akan meneroka misteri penapis jQuery, mendedahkan fungsi yang terkandung di dalamnya dan memberikan contoh kod konkrit.

1. Penapis asas

  1. :first: Pilih elemen padanan pertama

    $("p:first").css("color", "red");
  2. :last: Pilih elemen padanan terakhir

    $("p:last").css("font-weight", "bold");
  3. :ddee
  4. :ddee

    : pada kedudukan genap atau ganjil

    $("tr:even").css("background-color", "lightgray");
    $("tr:odd").css("background-color", "lightblue");

  5. :eq(): Pilih elemen pada kedudukan indeks yang ditentukan

    $("li:eq(2)").css("text-decoration", "underline");

  6. :gt() / :lt(): Pilih elemen yang lebih besar daripada indeks yang ditentukan Elemen diposisikan

    $("div:gt(3)").hide();
    $("div:lt(2)").show();

2. Penapis kandungan

  1. :mengandungi(): Pilih elemen yang mengandungi teks yang ditentukan

    $("div:contains('jQuery')").css("color", "green");

  2. :anak kosong Pilih elemen kosong

    : mempunyai ()
  3. : pilih elemen yang mengandungi unsur -unsur kanak -kanak tertentu
  4. $("p:empty").text("这是一个空段落");
    e

    3. Penapis penglihatan

: kelihatan /: tersembunyi
    : pilih elemen yang kelihatan atau tersembunyi
  1. $("ul:has(li)").css("border", "1px solid black");
    e

    : animasi
  2. : Pilih elemen yang sedang melaksanakan kesan animasi
  3. $("div:hidden").show();
    $("div:visible").hide();

    IV Penapis atribut

[atribut]
    : Pilih elemen dengan atribut yang ditentukan
  1. $("div:animated").stop();

    nilai elemen

  2. =nilai
  3. ] yang nilai atributnya sama dengan nilai yang ditentukan

    $("[href]").css("color", "blue");

  4. [attribute!=value]
  5. : Pilih elemen yang nilai atributnya tidak sama dengan nilai yang ditentukan

    $("[type='text']").css("border", "1px solid gray");

    Dengan menggunakan jenis penapis yang berbeza ini, pembangun boleh menjadi lebih Fleksibel mengendalikan elemen pada halaman untuk mencapai pelbagai kesan dinamik dan fungsi interaktif. Fungsi berkuasa dan sintaks ringkas penapis jQuery adalah salah satu sebab popularitinya, dan ia juga menyediakan kemudahan dan kecekapan yang hebat kepada pembangun.
Ringkasnya, penapis jQuery ialah alat yang sangat berguna yang boleh membantu pembangun dengan cepat dan tepat memilih elemen DOM dan melaksanakan operasi yang sepadan. Melalui penapis asas, kandungan, keterlihatan dan atribut yang diperkenalkan dalam artikel ini, pembangun boleh memahami dan menggunakan fungsi penapis jQuery secara lebih komprehensif, dengan itu meningkatkan kecekapan dan tahap teknikal pembangunan bahagian hadapan. Saya harap artikel ini akan membantu pembaca dan membawa lebih banyak inspirasi dan amalan aplikasi tentang penapis jQuery.

Atas ialah kandungan terperinci Temui rahsia penapis jQuery: dedahkan ciri yang disertakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn