Kaedah JQuery untuk melaksanakan tetapan gaya, menambahkan, mengalih keluar dan menukar_jquery

Contoh dalam artikel ini menerangkan cara JQuery melaksanakan tetapan gaya, menambahkan, mengalih keluar dan menukar. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Dengan JQuery, operasi gaya elemen akan menjadi sangat mudah. Mari kita lihat cara menggunakan JQuery untuk mendapatkan, menetapkan, menambah, memadam dan operasi lain pada gaya elemen.

Mendapatkan dan menetapkan gaya

Kedua-dua mendapatkan kelas dan kelas tetapan boleh dilakukan menggunakan kaedah attr(). Sebagai contoh, gunakan kaedah attr() untuk mendapatkan kelas elemen p Kod JQuery adalah seperti berikut:

var p_class = $("p").attr("class");
//获取p元素的class

Gunakan kaedah attr() untuk menetapkan kelas elemen p Kod JQuery adalah seperti berikut:

$("p").attr("'class", "high");
//设置p元素的class为 "high"

Dalam kebanyakan kes, ia menggantikan kelas asal dengan kelas baharu dan bukannya menambahkan kelas baharu kepada kelas asal.

Tambah gaya

Apakah itu kelas tambahan? Jika kelas asal elemen p ialah myClass, maka selepas menambah kelas bernama tinggi, atribut kelas menjadi "myClass high", iaitu superposisi dua gaya myClass dan high. JQuery menyediakan kaedah addClass() khas untuk menambah gaya. Untuk menjadikan contoh lebih mudah difahami, mula-mula tambah satu lagi set gaya dalam teg gaya:

.high{ color:red; }
.another{ font-style:italic; color:blue; }

Kemudian tambah butang "Tambah kelas" pada halaman web Kod acara butang adalah seperti berikut:

$("#btn_3").click(function(){
  $("#nm_p").addClass("another");
  // 追加样式
});

Akhir sekali, apabila anda mengklik butang "Tambah kelas", gaya elemen p akan bertukar kepada condong, dan fon merah sebelumnya juga akan bertukar kepada biru. Pada masa ini, elemen p mempunyai dua nilai kelas pada masa yang sama, iaitu "tinggi" dan "satu lagi". Terdapat dua peruntukan berikut dalam CSS.

1. Jika berbilang nilai kelas ditambahkan pada elemen, ia adalah bersamaan dengan menggabungkan gaya mereka.
2. Jika kelas yang berbeza menetapkan atribut gaya yang sama, yang kedua menggantikan yang pertama.

Dalam contoh di atas, ia bersamaan dengan menambah gaya berikut pada elemen p:

color : red;  /* 字体颜色设置红色*/ 
font-style:italic; 
color:blue;

Dalam gaya di atas, terdapat dua atribut "warna", dan atribut "warna" yang terakhir akan menimpa atribut "warna" sebelumnya, jadi nilai atribut "warna" terakhir ialah "biru" dan bukannya "merah".

Alih keluar gaya

Jika pengguna ingin memadamkan nilai kelas tertentu apabila dia mengklik butang, dia boleh menggunakan kaedah removeClass(), yang bertentangan dengan kaedah addClass() Fungsinya adalah untuk memadam semua atau elemen yang ditentukan daripada elemen padanan. Sebagai contoh, anda boleh menggunakan kod JQuery berikut untuk memadam kelas dengan nilai "tinggi" dalam elemen p:

$("p").removeClass("high");
//移除p元素中值为"high"的class

Jika anda ingin memadam kedua-dua kelas elemen p, anda perlu menggunakan kaedah removeClass() dua kali Kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

$("p").removeClass("high").removeClass ("lain ");

JQuery menyediakan cara yang lebih mudah. Berbilang nama kelas boleh dipadamkan dengan ruang Kod adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

$("p").removeClass("high another");

Selain itu, anda juga boleh menggunakan ciri kaedah removeClass() untuk mencapai kesan yang sama. Apabila ia tidak mengambil parameter, semua nilai kelas akan dipadamkan Kod JQuery adalah seperti berikut:

$("p").removeClass();
//移除p元素的所有class

Tukar gaya

Terdapat kaedah toggle() dalam JQuery Kod JQuery adalah seperti berikut:

toggleBtn.toggle(function(){
  //元素显示 代码③
}, function(){
  //元素隐藏 代码④
})

Fungsi kaedah

toggle() di sini adalah untuk melaksanakan dua fungsi kod ③ dan kod ④ secara bergilir-gilir Jika elemen itu dipaparkan pada asalnya, kemudian sembunyikannya: jika elemen itu pada asalnya tersembunyi, kemudian paparkannya. Pada masa ini, kaedah toggle() terutamanya mengawal penukaran tingkah laku berulang.

Selain itu, JQuery juga menyediakan kaedah toggleClass() untuk mengawal penukaran gaya berulang. Mengalih keluar nama kelas jika wujud, menambahnya jika nama kelas tidak wujud. Sebagai contoh, lakukan kaedah toggleClass() pada elemen p.

$("p").toggleClass("another");
//重复切换类名“another”

Apabila butang "Tukar Gaya" diklik secara berterusan, nilai kelas elemen p akan berulang kali bertukar antara "myClass" dan "myClass another".

Tentukan sama ada gaya tertentu disertakan

hasClass() boleh digunakan untuk menentukan sama ada sesuatu elemen mengandungi kelas tertentu. Jika ya, ia mengembalikan benar, jika tidak ia mengembalikan palsu. Sebagai contoh, anda boleh menggunakan kod berikut untuk menentukan sama ada elemen p mengandungi kelas "lain":

Salin kod Kod adalah seperti berikut:

$("p").hasClass("another");

Kaedah ini dihasilkan untuk meningkatkan kebolehbacaan kod. Di dalam JQuery, kaedah is() sebenarnya dipanggil untuk melengkapkan fungsi ini. Kaedah ini bersamaan dengan kod berikut:

Salin kod Kod adalah seperti berikut:

$("p").is(".another"); //is ("." kelas);

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.