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

Temui rahsia penapis jQuery: dedahkan ciri yang disertakan

PHPz
Lepaskan: 2024-02-28 08:21:03
asal
1187 orang telah melayarinya

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");
    Salin selepas log masuk
  2. :last: Pilih elemen padanan terakhir

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

    : pada kedudukan genap atau ganjil

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

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

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

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

    $("div:gt(3)").hide();
    $("div:lt(2)").show();
    Salin selepas log masuk

2. Penapis kandungan

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

    $("div:contains('jQuery')").css("color", "green");
    Salin selepas log masuk

  2. :anak kosong Pilih elemen kosong

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

    3. Penapis penglihatan

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

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

    IV Penapis atribut

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

    nilai elemen

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

    $("[href]").css("color", "blue");
    Salin selepas log masuk

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

    $("[type='text']").css("border", "1px solid gray");
    Salin selepas log masuk
    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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan