Bagaimana untuk mendapatkan nama kelas semasa dalam jquery

jQuery ialah perpustakaan JavaScript popular yang menyediakan beberapa kaedah yang sangat mudah untuk bekerja dengan elemen HTML dan interaksi halaman. Dalam kebanyakan kes, kita perlu mendapatkan nama kelas bagi elemen semasa untuk melaksanakan pelbagai operasi, seperti menambah, memadam atau menukar nama kelas. Artikel ini akan menerangkan cara menggunakan jQuery untuk mendapatkan nama kelas semasa dan memberikan beberapa contoh.

1. Kaedah asas untuk mendapatkan nama kelas semasa

Untuk mendapatkan nama kelas elemen semasa, anda boleh menggunakan kaedah .attr() jQuery dan lulus "kelas" sebagai parameter:

var className = $("element").attr("class");

Di mana "elemen" ialah rentetan pemilih jQuery, yang boleh menjadi mana-mana pemilih CSS yang sah, seperti nama kelas, ID, nama teg, dsb. Kod ini akan mengembalikan rentetan yang mengandungi semua nama kelas bagi elemen semasa, dipisahkan oleh ruang.

Sebagai contoh, kita mempunyai kod HTML berikut:

<div class="box small"></div>

Kita boleh menggunakan kod berikut untuk mendapatkan nama kelas bagi elemen semasa:

var className = $("div.box.small").attr("class");
console.log(className); // 输出 "box small"

2. Gunakan atribut classList untuk mendapatkan nama kelas semasa

Selain menggunakan kaedah .attr() jQuery, anda juga boleh menggunakan atribut classList JavaScript asli untuk mendapatkan nama kelas semasa, contohnya:

var className = $("element")[0].classList;

Antaranya, "[0]" menukar objek jQuery ialah nod DOM. Kod ini akan mengembalikan objek DOMTokenList yang mengandungi semua nama kelas, menjadikannya mudah untuk menambah, memadam dan menukar nama kelas.

Sebagai contoh, kami mempunyai kod HTML berikut:

<div class="box small"></div>

Kami boleh menggunakan kod berikut untuk mendapatkan nama kelas elemen semasa:

var classList = $("div.box.small")[0].classList;
console.log(classList); // 输出 ["box", "small"]

3 nama kelas

1. Tambahkan nama kelas

Untuk menambah nama kelas melalui jQuery, anda boleh menggunakan kaedah .addClass(). Contohnya:

$("element").addClass("new-class");

di mana "kelas baharu" ialah nama kelas yang akan ditambah. Kod ini akan menambah nama kelas yang dipanggil "kelas baharu" pada elemen semasa.

Sebagai contoh, kami mempunyai kod HTML berikut:

<div class="box small"></div>

Kita boleh menggunakan kod berikut untuk menambah nama kelas baharu:

$("div.box.small").addClass("big");

Ini akan menambah nama pada elemen semasa Untuk nama kelas "besar", kod HTML yang dikemas kini adalah seperti berikut:

<div class="box small big"></div>

2. Padamkan nama kelas

Untuk memadamkan nama kelas melalui jQuery, anda boleh menggunakan kaedah .removeClass(). Contohnya:

$("element").removeClass("old-class");

di mana "kelas lama" ialah nama kelas yang akan dipadamkan. Kod ini akan mengalih keluar kelas bernama "kelas lama" daripada elemen semasa.

Sebagai contoh, kami mempunyai kod HTML berikut:

<div class="box small"></div>

Kami boleh menggunakan kod berikut untuk mengalih keluar nama kelas:

$("div.box.small").removeClass("small");

Ini akan mengalih keluar nama kelas daripada elemen semasa. small" nama kelas, kod HTML yang dikemas kini adalah seperti berikut:

<div class="box"></div>

3. Tukar nama kelas

Untuk menukar nama kelas melalui jQuery, anda boleh menggunakan .toggleClass( ) kaedah. Contohnya:

$("element").toggleClass("class1 class2");

Antaranya, "class1 class2" ialah nama kelas yang akan ditukar dan beberapa nama kelas dipisahkan oleh ruang. Kod ini akan bertukar antara dua nama kelas dalam elemen semasa, mengalih keluarnya jika ia sudah wujud dalam elemen semasa, jika tidak menambahnya.

Sebagai contoh, kami mempunyai kod HTML berikut:

<div class="box small"></div>

Kami boleh menggunakan kod berikut untuk bertukar antara dua nama kelas:

$("div.box.small").toggleClass("small big");

Ini akan mengalih keluar kelas bernama " small" nama kelas dan tambah nama kelas bernama "big", kod HTML yang dikemas kini adalah seperti berikut:

<div class="box big"></div>

4. Contoh aplikasi

Berikut adalah beberapa contoh untuk menunjukkan cara Menggunakan jQuery untuk mendapatkan nama kelas semasa:

1. Keluarkan nama kelas semasa apabila mengklik elemen:

$("div").click(function() {
  var className = $(this).attr("class");
  console.log(className);
});

2 Tukar gaya bar navigasi apabila tetingkap ditatal:

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop >= 100) {
    $("nav").addClass("fixed-top");
  } else {
    $("nav").removeClass("fixed-top");
  }
});

3. Kemas kini tajuk imej apabila menukar imej dalam karusel:

$(".carousel-item").on("slide.bs.carousel", function() {
  var captionText = $(this).find(".carousel-caption h4").text();
  var className = $(this).attr("class");
  console.log("当前类名：" + className);
  $(".slider-title").text(captionText);
});

Ringkasan

Melalui artikel ini, kami belajar cara menggunakan jQuery untuk mendapatkan nama kelas semasa dan digunakan beberapa contoh untuk menunjukkan cara melakukannya. Nama kelas semasa boleh diperolehi terus melalui kaedah .attr() dan atribut .classList boleh digunakan untuk menambah, memadam dan menukar nama kelas dengan mudah. Mempunyai pengetahuan ini memudahkan untuk bekerja dengan elemen dan gaya HTML semasa menulis kod JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nama kelas semasa dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!