Perkara yang perlu digunakan semasa memuatkan halaman jquery menggunakan acara pemilihan

jQuery ialah perpustakaan JavaScript yang sangat popular dalam pembangunan bahagian hadapan, yang boleh memanipulasi dokumen HTML dan gaya CSS dengan cepat dan mudah. Dalam jQuery, pemilih adalah fungsi yang sangat penting dan biasa digunakan, di mana anda boleh memilih elemen pada halaman dan kemudian beroperasi padanya.

jQuery menyediakan pelbagai pemilih yang boleh memilih elemen berdasarkan nama teg mereka, nama kelas, nilai ID, nilai atribut, dsb. Apabila halaman dimuatkan, kami biasanya melakukan pemprosesan khas pada elemen tertentu, seperti menunjukkan atau menyembunyikan elemen tertentu atau peristiwa mengikat.

Dalam kes ini, anda boleh menggunakan pemilih jQuery dan mengikat acara. Berikut ialah beberapa acara dan pemilih yang biasa digunakan.

1. Peristiwa penyiapan pemuatan halaman

Dalam jQuery, acara penyiapan pemuatan halaman boleh diikat menggunakan kaedah ready(), yang akan dilaksanakan sejurus selepas DOM dimuatkan. Kod sampel adalah seperti berikut:

$(document).ready(function() {
  // 页面加载完成后执行的代码
});

Selain itu, memandangkan ready() lazimnya digunakan, jQuery juga menyediakan bentuk ringkas:

$(function() {
  // 页面加载完成后执行的代码
});

Kedua-dua borang ini adalah setara sepenuhnya. Anda boleh melakukan tindakan tertentu selepas halaman selesai dimuatkan.

2. Pemilih

1. Pemilih asas

Pemilih asas ialah bentuk pemilih yang paling mudah, yang boleh berdasarkan nama teg, nama kelas dan nilai ID bagi elemen untuk memilih elemen.

Pilih elemen berdasarkan nama teg:

$('p') // 选择所有<p>元素</p>

Pilih elemen berdasarkan nama kelas:

$('.my-class') // 选择所有class属性值为my-class的元素

Pilih elemen berdasarkan nilai ID:

$('#my-id') // 选择ID值为my-id的元素

2. Pemilih atribut

Pemilih atribut boleh memilih elemen berdasarkan nilai atributnya Yang paling biasa digunakan ialah [class^="xxx"] dan [class$="xxx"].

Pilih elemen berdasarkan nama atribut dan nilai atribut:

$('input[type="text"]') // 选择所有type属性值为text的input元素

Pilih elemen berdasarkan permulaan nilai atribut:

$('div[class^="my-"]') // 选择class属性值以my-开头的所有div元素

Pilih elemen berdasarkan akhir nilai atribut:

$('a[href$=".pdf"]') // 选择href属性值以.pdf结尾的所有a元素

3. Pemilih hierarki

Pemilih hierarki boleh memilih elemen anak, elemen induk, elemen adik-beradik, dsb.

Pilih elemen anak bagi elemen:

$('ul li') // 选择所有ul元素下的li元素

Pilih elemen induk bagi elemen:

$('li').parent() // 选择所有li元素的父元素

Pilih elemen adik-beradik bagi elemen:

$('li').siblings() // 选择所有li元素的兄弟元素（不包括自己）

4. Pemilih borang

Pemilih borang boleh memilih elemen borang, termasuk kotak teks, kotak semak, butang radio, kotak lungsur, dsb.

Pilih semua elemen kotak teks:

$('input[type="text"]') // 选择所有type属性值为text的input元素

Pilih semua elemen kotak semak:

$('input[type="checkbox"]') // 选择所有type属性值为checkbox的input元素

Pilih semua elemen butang radio:

$('input[type="radio"]') // 选择所有type属性值为radio的input元素

Pilih semua elemen kotak lungsur:

$('select') // 选择所有select元素

3 Pengikatan acara

1 Acara klik

Acara klik ialah salah satu acara yang paling biasa digunakan boleh diikat melalui kaedah klik(). Kod sampel adalah seperti berikut:

$('button').click(function() {
  // 单击了button按钮后执行的代码
});

2 Acara klik dua kali

Acara klik dua kali merujuk kepada peristiwa mengklik dua kali dengan cepat pada elemen, yang boleh diikat melalui elemen. kaedah dblclick(). Kod sampel adalah seperti berikut:

$('button').dblclick(function() {
  // 双击了button按钮后执行的代码
});

3 Acara papan kekunci

Acara papan kekunci merujuk kepada peristiwa menekan atau melepaskan kekunci papan kekunci pada halaman, yang boleh dilakukan melalui kekunci() , keydown(), keyup() tiga kaedah untuk mengikat.

4. Acara tetikus

Acara tetikus merujuk kepada peristiwa seperti menggerakkan tetikus pada halaman, mengklik, mengklik dua kali, menekan, melepaskan, dll. Ia boleh dilakukan melalui mousemove() , mousedown() , mouseup(), mouseenter(), mouseleave(), hover() dan kaedah lain untuk mengikat.

5. Acara tatal halaman

Acara tatal merujuk kepada peristiwa yang dicetuskan apabila pengguna menatal halaman, yang boleh diikat melalui kaedah tatal().

Di atas ialah beberapa acara dan pemilih yang biasa digunakan, yang boleh membantu kami mencari elemen pada halaman dengan cepat dan melaksanakan pengikatan acara. Sudah tentu, jQuery juga menyediakan banyak fungsi dan kaedah lain, dan pembaca yang berminat boleh belajar dan meneroka sendiri.

Atas ialah kandungan terperinci Perkara yang perlu digunakan semasa memuatkan halaman jquery menggunakan acara pemilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!