Contoh penggunaan gaya elemen tetapan menggunakan jQuery_jquery

Contoh dalam artikel ini menerangkan penggunaan jQuery untuk menetapkan gaya elemen. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

CSS ialah sebahagian daripada halaman yang tidak boleh dipisahkan jQuery juga menyediakan beberapa kaedah praktikal yang berkaitan dengan CSS. Dalam artikel sebelumnya, addClass() telah digunakan untuk menambah gaya css pada elemen. Di sini kami terutamanya memperkenalkan cara jQuery menetapkan gaya halaman. Termasuk menambah, memadam, menukar dinamik, dsb.

1. Tambah dan padamkan kategori css.

Salin kod Kod adalah seperti berikut:

$(function() {
//Tambah berbilang kategori CSS pada masa yang sama
$("img").addClass("css1 css2");
});

Contohnya, kod di atas menambah dua gaya, css1 dan css2, pada elemen img

removeClass sepadan dengan kaedah addClass, dan contoh tidak akan diulang di sini.

2 Beralih secara dinamik antara kategori.

Banyak kali, bergantung pada status operasi pengguna, anda mahu gaya beberapa elemen bertukar antara kategori tertentu, kadangkala addClass() kategori, kadangkala removeClass() kategori, Jq menyediakan toggleClass(nama) terus untuk melakukan ini Operasi yang serupa.

Salin kod Kod adalah seperti berikut:

$(function() {
$("p").klik(fungsi() {
$(this).toggleClass("css1");
})
});

Kod di atas melaksanakan penukaran berterusan gaya css1 apabila mengklik pada elemen P. Kaedah toggleClass(name) hanya boleh menetapkan satu kategori css. Berbilang css tidak boleh ditukar.

3. Dapatkan dan tetapkan gaya secara langsung.

Sama persis dengan kaedah attr(), jQuery menyediakan kaedah css() untuk mendapatkan dan menetapkan gaya elemen secara langsung, seperti menggunakan css(nama) untuk mendapatkan nilai gaya gaya tertentu. Tetapkan berbilang gaya secara serentak melalui senarai css (sifat) dan tetapkan gaya tertentu elemen melalui css (nama, nilai).

Contohnya: ubah suai tanda warna dengan menetapkan acara alih tetikus dan keluar tetikus untuk mencetuskan css(nama,nilai).

Salin kod Kod adalah seperti berikut:

$(function() {
$("p"). mouseover(function() {
$(this).css("warna", "merah");
});
$("p").mouseout(function() {
$(this).css("warna", "hitam");
});
});

Kaedah css menyediakan atribut kelegapan. Dan serasi dengan pelbagai pelayar.

Ubah suai contoh di atas dan tetapkan nilai ketelusan unsur p melalui peristiwa tetikus.

Salin kod Kod adalah seperti berikut:

$(function() {
$("p"). mouseover(function() {
$(this).css("opacity", "0.5");
});
$("p").mouseout(function() {
$(this).css("opacity", "1");
});
});

Selain itu, kaedah hasClass(name) disediakan dalam css untuk menentukan sama ada sesuatu elemen mempunyai set kategori css tertentu. Mengembalikan nilai Boolean. Contohnya:

Salin kod Kod adalah seperti berikut:

$("li:last").hasClass("css1")

Menyatakan sama ada atribut css li terakhir mengandungi kelas css1. dan

Salin kod Kod adalah seperti berikut:

$("li:last").is(".css1" )

Kod mempunyai kesan yang sama.

Melihat kod sumber jQuery, kaedah hasClass ialah kaedah is().

Salin kod Kod adalah seperti berikut:

hasClass: function(selector) {
kembalikan this.is("." pemilih);
}

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.