Selepas semalaman mencari dan mengisih, akhirnya saya menghasilkan set kaedah pemilihan penapis JQuery yang paling komprehensif. Semua kod diuji.

Kod HTML pertama

Kod JS

Objek 1.DOM dan set pembungkusan JQuery

1. Perkara yang anda dapat melalui document.getElementById(), document.getElementsByName(), dsb. ialah objek DOM atau set objek DOM yang pertama mendapat objek, dan yang terakhir mendapat set objek DOM

2. Jika anda ingin menggunakan fungsi yang disediakan oleh JQuery, anda mesti membina set pembungkusan JQuery terlebih dahulu Apa yang dikembalikan melalui $() ialah set pembungkusan JQuery.

2. Tukar set pembungkusan JQuery dan objek DOM antara satu sama lain

1. Objek DOM tidak boleh menggunakan kaedah atribut JQuery, tetapi objek DOM boleh ditukar menjadi set pembalut JQuery melalui $()

2. Set pembalut JQuery boleh menggunakan kaedah atribut beberapa objek DOM seperti .length, tetapi terdapat juga beberapa kaedah atribut yang tidak boleh digunakan seperti .value Anda boleh mendapatkan objek DOM yang sepadan dengan menambahkan kurungan segi empat sama dan indeks nilai selepas set pembalut JQuery

3. Ini juga merupakan objek DOM semasa setiap gelung atau apabila peristiwa dicetuskan

3. Simbol $ mewakili rujukan kepada objek JQuery dalam JQuery Terdapat empat kaedah teras JQuery

1.jQuery(html[,ownerDocument]): Buat elemen Dom secara dinamik berdasarkan rentetan asal HTML

2.jQuery ( elemen ): Merangkumkan satu atau lebih objek Dom ke dalam set pembungkusan jQuery, iaitu penukaran antara objek DOM di atas dan set pembungkusan JQuery

3.jQuery( panggil balik ): singkatan untuk $(document).ready()

4.JQuery(selector[,context]): Cari set pembungkusan JQuery yang memenuhi syarat dalam julat yang ditentukan Konteks ialah julat carian boleh menjadi set objek DOM atau set pembungkusan JQuery
Cari set pembalut JQuery
untuk elemen dengan id text11 dalam semua teg tr

================================ Pemilih jQuery ====================

1. Asas pemilih Asas

1. Pilih berdasarkan nama tag

2. Pilih
berdasarkan nilai id
3. Pilih berdasarkan nilai kelas

4. Pilih beberapa set pembungkusan JQuery yang memenuhi syarat pada masa yang sama Gunakan , untuk memisahkan syarat

5. Pilih semua elemen DOM

2. Hierarki

1. Dapatkan semua elemen dengan teks nilai id11 di bawahnya daripada semua tag tr

2. Dapatkan semua sub-elemen input langsung
di bawah semua tag td
3. Dapatkan elemen button11 kelas di belakang elemen dengan id text11 dan hanya dapatkan satu elemen yang memenuhi syarat. text11 dan button11 berada pada tahap yang sama

4. Dapatkan semua elemen dengan butang kelas11 di belakang elemen dengan id text11

3. Penapis Asas

1. Dapatkan elemen input pertama

2. Dapatkan elemen input terakhir

3. Dapatkan semua elemen input yang tidak dipilih

4. Kira elemen input pertama sebagai satu dan cari semua elemen input bernombor ganjil

5. Bermula dari input kedua, cari semua elemen input bernombor genap

6. Cari elemen input dengan indeks 1, dan nilai indeks bermula dari 0

7. Cari semua elemen input dengan indeks lebih besar daripada 0

8. Cari semua elemen input dengan indeks kurang daripada 2

9. Dapatkan semuaelemen tajuk
pada halaman

Salin kod Kod adalah seperti berikut:

var h_query=$(":header");

10. Dapatkan semua elemen yang melaksanakan kesan animasi

Salin kod Kod adalah seperti berikut:

var animated_query=$(":animasi");

4. Penapis Kandungan

1. Cari semua elemen h1 yang mengandungi "Hello World!" dalam semua kandungan html

Salin kod Kod adalah seperti berikut:

var h1_query=$("h1:contains('Hello world!')");

2. Dapatkan semua elemen td
yang tidak mengandungi sub-tag atau mempunyai kandungan html kosong

Salin kod Kod adalah seperti berikut:

var td_query=$("td:kosong");

3. Cari semua elemen td yang mengandungi sub-elemen input

Salin kod Kod adalah seperti berikut:

var td_query=$("td:has(input)");

4. Cari semua elemen td yang mengandungi sub-tag atau mempunyai kandungan html

Salin kod Kod adalah seperti berikut:

var td_query=$("td:parent");

5. Penapis Keterlihatan Penapis Keterlihatan

1. Cari semua elemen input tersembunyi

Salin kod Kod adalah seperti berikut:

var input_query=$("input:hidden");

2. Cari semua elemen input yang boleh dilihat

Salin kod Kod adalah seperti berikut:

var input_query=$("input:visible");

6. Penapis Atribut
1. Cari semua elemen input yang mengandungi atribut id

Salin kod Kod adalah seperti berikut:

var input_query=$("input[id]");

2. Cari elemen input yang nilai namanya ialah text11

Salin kod Kod adalah seperti berikut:

var input_query=$("input[name='text11']");

3. Cari semua elemen input yang nilai namanya tidak sama dengan text11

Salin kod Kod adalah seperti berikut:

var input_query=$("input[name!='text11']");

4. Cari elemen input yang nilai namanya bermula dengan teks

Salin kod Kod adalah seperti berikut:

var input_query=$("input[name^='text']");

5. Cari semua elemen input yang nilai namanya berakhir dengan 11

Salin kod Kod adalah seperti berikut:

var input_query=$("input[name$='11']");

6. Cari semua elemen input yang nilai namanya mengandungi ext

Salin kod Kod adalah seperti berikut:

var input_query=$("input[name*='ext']");

7. Cari semua elemen input yang mengandungi atribut id dan nilai nama mengandungi ext

Salin kod Kod adalah seperti berikut:

var input_query=$("input[id][name*='ext']");

7. Penapis Kanak-kanak

1 Cari semua elemen input diletakkan di kedudukan kedua antara semua elemen anak dalam elemen induk
Parameter dalam nth-child() adalah pilihan, genap dikira sebagai nombor genap di sini, dan kiraan ganjil di sini Sebarang bilangan n bermakna semua elemen input dengan elemen induk dipilih secara langsung berada di kedudukan pertama Elemen input dikira sebagai satu

Salin kod Kod adalah seperti berikut:

var input_query=$("input:nth-child(2)");

2. Cari semua elemen input yang menduduki tempat pertama antara semua elemen anak dalam elemen induk

Salin kod Kod adalah seperti berikut:

var input_query=$("input:first-child");

3. Cari semua elemen input yang terakhir antara semua elemen anak dalam elemen induk

Salin kod Kod adalah seperti berikut:

var input_query=$("input:last-child");

4. Cari semua elemen input yang merupakan satu-satunya elemen anak dalam elemen induk

Salin kod Kod adalah seperti berikut:

var input_query=$("input:only-child");

8. Borang pemilih borang

1. Cari semua elemen input

Salin kod Kod adalah seperti berikut:

var input_query=$(":input");

2. Cari semua elemen kotak teks

Salin kod Kod adalah seperti berikut:

var text_query=$(":text");

3. Cari semua elemen kotak kata laluan

Salin kod Kod adalah seperti berikut:

var password_query=$(":kata laluan");

4. Cari semua kotak pilihan

Salin kod Kod adalah seperti berikut:

var checkbox_query=$(":checkbox");

5. Cari semua elemen butang hantar

Salin kod Kod adalah seperti berikut:

var submit_query=$(":submit");

6. Cari semua elemen domain imej

Salin kod Kod adalah seperti berikut:

var image_query=$(":image");

7. Finden Sie alle Elemente der Reset-Taste

Code kopieren Der Code lautet wie folgt:

var reset_query=$(":reset");

8. Finden Sie alle Schaltflächenelemente

Code kopieren Der Code lautet wie folgt:

var button_query=$(":button");

9. Suchen Sie alle Dateifeldelemente

Code kopieren Der Code lautet wie folgt:

var file_query=$(":file");

9. Formularfilter

1. Finden Sie alle verfügbaren Eingabeelemente

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:enabled");

2. Suchen Sie alle nicht verfügbaren Eingabeelemente

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:disabled");

3. Finden Sie alle ausgewählten Radio-Kontrollkästchen

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:checked");

4. Finden Sie alle ausgewählten Dropdown-Felder

Code kopieren Der Code lautet wie folgt:

var option_query=$("option:selected");