Gunakan jquery untuk melaksanakan fungsi pemilihan songsang

Dalam penghasilan halaman web, kita biasanya perlu memilih satu atau lebih elemen HTML untuk operasi atau paparan. Kadangkala, kita perlu melakukan operasi terbalik, iaitu pemilihan terbalik. Hari ini, kami akan memperkenalkan kaedah untuk melaksanakan fungsi pemilihan songsang menggunakan jQuery.

Pertama, kita perlu memahami pemilih dalam jQuery. Dalam jQuery, simbol $ mewakili jQuery, dan kita boleh memilih mana-mana elemen pada halaman dengan menggunakan fungsi $().

Pemilih jQuery biasa ialah:

1. Pemilih elemen: $("elemen")
2. Pemilih ID: $("#id")
3. Pemilih kelas: $(".class")
4. Pemilih atribut: $("[attrName='value']")
5. Pemilih elemen kanak-kanak: $ ("parentSelector > childSelector" )
6. Pemilih elemen keturunan: $("ancestorSelector descendantSelector")

Setelah memahami penggunaan asas pemilih, kita boleh mula melaksanakan pemilihan songsang Fungsian.

1. Dapatkan semua elemen

Pertama, kita perlu mendapatkan semua elemen dalam halaman. Anda boleh menggunakan pemilih * di sini untuk memilih semua elemen. Kodnya adalah seperti berikut:

var all = $("*");

2. Acara klik ikat

Kemudian, kita perlu mengikat acara klik pada setiap elemen Apabila elemen diklik, pemilihan adalah terbalik. Kita boleh menggunakan kaedah each() untuk mengulangi semua elemen yang dipilih dan menambah acara klik pada setiap elemen. Kodnya adalah seperti berikut:

all.each(function() {
  $(this).click(function() {
    $(this).toggleClass("selected");
  });
});

Di sini, kami menggunakan kaedah toggleClass() untuk menukar kelas elemen yang dipilih. Jika elemen asalnya mengandungi kelas yang dipilih, kaedah ini akan mengalih keluarnya, jika tidak ia akan menambah kelas.

3. Laksanakan fungsi pemilihan songsang

Akhir sekali, kita perlu melaksanakan fungsi pemilihan songsang, iaitu, pilih semua elemen yang tidak dipilih dan nyahpilih semua elemen yang dipilih. Kita boleh merentasi semua elemen apabila fungsi pemilihan songsang dicetuskan untuk menentukan sama ada elemen mengandungi kelas yang dipilih. Jika tidak, tambahkan kelas jika ia sudah mengandungi kelas, alih keluar kelas. Kodnya adalah seperti berikut:

function inverseSelect() {
  all.each(function() {
    if (!$(this).hasClass("selected")) {
      $(this).addClass("selected");
    } else {
      $(this).removeClass("selected");
    }
  });
}

Akhir sekali, kita boleh menyepadukan kod di atas bersama-sama untuk mendapatkan kod pelaksanaan fungsi anti-pilihan yang lengkap:

$(document).ready(function() {
  var all = $("*");

  all.each(function() {
    $(this).click(function() {
      $(this).toggleClass("selected");
    });
  });

  function inverseSelect() {
    all.each(function() {
      if (!$(this).hasClass("selected")) {
        $(this).addClass("selected");
      } else {
        $(this).removeClass("selected");
      }
    });
  }

  $("#inverseBtn").click(function() {
    inverseSelect();
  });
});

Kod di atas termasuk memilih semua elemen, klik mengikat peristiwa, dan pelaksanaan Proses lengkap menyahpilih fungsi dan menetapkan peristiwa pencetus butang. Kami hanya perlu menambah butang pada HTML dan menetapkan IDnya kepada inverseBtn, dan fungsi songsang boleh dicetuskan dengan mengklik butang.

Ringkasan:

jQuery ialah perpustakaan JavaScript yang berkuasa dengan API terbina dalam yang kaya Kami boleh menggunakannya untuk melaksanakan banyak fungsi menarik, seperti fungsi pemilihan songsang yang diperkenalkan hari ini. Melalui pengenalan artikel ini, anda telah mempelajari cara menggunakan pemilih jQuery, mengikat peristiwa dan melaksanakan fungsi pemilihan songsang saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Gunakan jquery untuk melaksanakan fungsi pemilihan songsang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!