Ringkasan kaedah biasa jquery dan contoh penggunaan_jquery

mouserout()/mouserout()

Peristiwa mouseover/mouseout dicetuskan apabila tetikus memasuki/meninggalkan unsur atau unsur turunannya.
Acara alih tetikus paling kerap digunakan bersama-sama dengan acara keluar tetikus.

Disebabkan mekanisme menggelegak, peristiwa mouseover/mouserout selalunya dicetuskan secara tidak sengaja apabila tidak diperlukan, menyebabkan beberapa masalah skrip.

masuk tetikus()/mouseleave()

mouseenter/mouseleave dicetuskan apabila dan hanya apabila tetikus memasuki elemen yang dipilih Ia tidak akan dicetuskan apabila tetikus melalui mana-mana elemen kanak-kanak. Tidak kira sama ada elemen sasaran mempunyai anak.

focusin() dan focusout()

.focusin(): Peristiwa ini dicetuskan apabila elemen atau sub-elemennya menerima fokus
.focusout(): Peristiwa ini dicetuskan apabila elemen atau elemen anaknya kehilangan fokus

Tidak seperti kaedah focus(), kaedah focusin() juga dicetuskan apabila mana-mana elemen anak mendapat fokus.

Salin kod Kod adalah seperti berikut:

fokus pada api

fokus pada api

$( "p" ).focusin(function() {
$( ini ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
});

eq() dan dapatkan()

.get(): Dapatkan elemen DOM yang sepadan melalui objek jQuery.
.eq(): Membina objek jQuery baharu daripada elemen koleksi

eq mengembalikan objek jQuery, dan mendapatkan mengembalikan objek DOM. Contohnya:

$( "li" ).get( 0 ).css("warna", "merah"); //Ralat
$( "li" ).eq( 0 ).css("warna", "merah"); //Betul
Jadi, apakah objek DOM dan apakah objek jQuery?

Objek DOM ialah objek yang diperoleh menggunakan js, dan objek juqery ialah objek yang diperoleh menggunakan pemilih perpustakaan kelas jQuery.

Contohnya: var $obj = $("div");//objek jQuery

Kaedah get pada asasnya menukar objek jQuery kepada objek DOM, tetapi css milik pembina jQuery, dan kaedah ini tidak wujud dalam DOM Jika kita perlu menggunakan kaedah jQuery, kita mesti menulis seperti ini:

Salin kod Kod adalah seperti berikut:

var li = $("li").get(0);
$(li).css("warna","hitam");//Balut dengan $

penapis()

kaedah penapis(): Tapis set elemen yang sepadan dengan ungkapan yang ditentukan.
Kaedah ini digunakan untuk mengecilkan skop pemadanan. Pisahkan berbilang ungkapan dengan koma.

penapis(ungkapan): (String|Fungsi) Jika parameter ialah rentetan, pemilih jQuery dirumus untuk mengalih keluar semua elemen yang tidak sepadan dengan pemilih daripada set pembungkusan, hanya meninggalkan elemen yang sepadan dengan Elemen ; digunakan untuk menentukan kriteria penapis jika hujah adalah fungsi. Fungsi ini dipanggil sekali untuk setiap elemen dalam set pembalut Sebarang elemen yang mengembalikan palsu daripada panggilan fungsi akan dipadamkan daripada set pembalut.

Kod berikut bermaksud: kekalkan elemen pertama dan elemen dengan kelas pilihan

Kod HTML:

Salin kod Kod adalah seperti berikut:

Hello

Hello Again

Dan Lagi

Kod jQuery:

Salin kod Kod adalah seperti berikut:

$("p").filter(".dipilih, :first")

Keputusan:

Salin kod Kod adalah seperti berikut:

Hello

,

Dan Lagi

Lihat satu lagi contoh fungsi, fungsi digunakan sebagai koleksi elemen ujian. Ia menerima indeks parameter, iaitu indeks elemen dalam koleksi jQuery. Dalam fungsi, ini merujuk kepada elemen DOM semasa.

Kod HTML:

Salin kod Kod adalah seperti berikut:

1. Hello

Apa khabar?

Kod jQuery:

Salin kod Kod adalah seperti berikut:

$("p").penapis(fungsi(indeks) {
kembalikan $("ol", ini).length == 0;
});

Keputusan:

Salin kod Kod adalah seperti berikut:

Apa khabar?

Kaedah .bind(), .live() dan .delegate()

.bind(): Cara paling asas untuk mengikat pengendali acara ialah menggunakan kaedah .bind(). Ia sama dengan kaedah live(), menerima dua parameter:

.bind(jenis acara, pengendali acara)

Dua cara untuk mengikat pengendali acara:

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
$('.mydiv').bind('klik',ujian);
ujian fungsi(){

alert("Hello World!");
}
});

Pengendali acara juga boleh menggunakan fungsi tanpa nama, seperti yang ditunjukkan di bawah:

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
          $("#mydiv").bind("klik",fungsi(){
alert("Hello World!");
})
});

.live(): Satu-satunya perbezaan antara kaedah langsung dan kaedah bind ialah .live() bukan sahaja bertindak pada elemen yang sedia ada dalam DOM, tetapi juga bertindak pada elemen yang mungkin wujud (dijana secara dinamik) dalam masa depan

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
          $('.box').live('klik',function(){
                 $(this).clone().appendTo('.container');
});
});

                                                                                                                                                      

Kelemahan menggunakan kaedah langsung untuk mengikat acara ialah ia tidak boleh menggunakan panggilan berantai. Adakah terdapat kaedah yang bukan sahaja boleh mengikat acara seperti kaedah langsung tetapi juga menyokong panggilan berantai? Jawapannya ialah kaedah perwakilan di bawah.

kaedah perwakilan(): Tambahkan satu atau lebih pengendali acara pada elemen yang ditentukan (elemen anak bagi elemen yang dipilih),

Dan tentukan fungsi untuk dijalankan apabila peristiwa ini berlaku. Bermula dengan jQuery 1.7, .delegate() telah digantikan dengan kaedah .on().

Sintaks:

$(selector).delegate(childSelector,jenis acara,fungsi)

Perihalan parameter:

Pemilih kanak-kanak diperlukan. Menentukan satu atau lebih elemen anak yang mana pengendali acara dilampirkan.

acara diperlukan. Menentukan satu atau lebih acara untuk dilampirkan pada elemen. Berbilang nilai acara dipisahkan oleh ruang. Mesti acara yang sah.

fungsi diperlukan. Menentukan fungsi untuk dijalankan apabila peristiwa berlaku.

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
          $('.container').delegate('.box','click',function(){
                 $(this).clone().appendTo('.container');
});
});

delegate() akan digunakan dalam dua situasi berikut:

1. Jika anda mempunyai elemen induk dan perlu menambahkan acara pada elemen anaknya, anda boleh menggunakan delegate() Kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

$("ul").delegate("li", "click", function(){

$(this).hide();

});

2. Apabila elemen tidak tersedia dalam halaman semasa, anda boleh menggunakan delegate()

kaedah end()

kaedah end(): Dipanggil dalam rantai arahan jquery untuk kembali ke set pembungkusan sebelumnya.
Setiap kaedah penapis ditolak ke tindanan. Apabila kita perlu kembali ke keadaan sebelumnya, kita boleh menggunakan end() untuk melakukan operasi pop untuk kembali ke keadaan sebelumnya dalam tindanan.

Kaedah

end() menamatkan operasi penapis terbaharu dalam rantaian semasa dan memulihkan set elemen padanan kepada keadaan sebelumnya.

Salin kod Kod adalah seperti berikut: