Pemilih dan penapis JQuery organized_jquery

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

Kod HTML pertama

Salin kod Kod adalah seperti berikut:

Kod HTML

        
        
       


        
        
        


        
        
        

	​
option1 option2 option3

Helo dunia!

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

Salin kod Kod adalah seperti berikut:

var text11_dom=document.getElementById("text11");
var text11_dom=document.getElementsByName("text11")[0];
var text11_dom=document.all.text11;//Di sini text11 boleh sama ada nilai nama atau nilai id
var text11_dom=document.all[10];

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.

Salin kod Kod adalah seperti berikut:

var text11_jquery=$("#text11");

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 $()

Salin kod Kod adalah seperti berikut:

var text11_dom=document.getElementById("text11");
var text11_jquery=$(text11_dom);

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

Salin kod Kod adalah seperti berikut:

var text11_dom=$("#text11")[0];

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

Salin kod Kod adalah seperti berikut:

$("#text11").klik(function(){
var text11_dom_value=this.value;
alert(text11_dom_value);
});

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

Salin kod Kod adalah seperti berikut:

$("

Hello!

").appendTo("body");

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()

Salin kod Kod adalah seperti berikut:

$(fungsi(){
makluman("Hello!");
});

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

Salin kod Kod adalah seperti berikut:

var text11_query=$("#text11","tr");

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

1. Asas pemilih Asas

1. Pilih berdasarkan nama tag

Salin kod Kod adalah seperti berikut:

var input_query=$("input");

2. Pilih
berdasarkan nilai id

Salin kod Kod adalah seperti berikut:

var text11_query=$("#text11");

3. Pilih berdasarkan nilai kelas

Salin kod Kod adalah seperti berikut:

var text11_query=$(".text11");

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

Salin kod Kod adalah seperti berikut:

var text_query=$("#text11,.text12");

5. Pilih semua elemen DOM

Salin kod Kod adalah seperti berikut:

var all_query=$("*");

2. Hierarki

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

Salin kod Kod adalah seperti berikut:

var text11_query=$("tr #text11");

2. Dapatkan semua sub-elemen input langsung
di bawah semua tag td

Salin kod Kod adalah seperti berikut:

var input_query=$("td>input");

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

Salin kod Kod adalah seperti berikut:

var button11_query=$("#text11 .button11");

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

Salin kod Kod adalah seperti berikut:

var button11_query=$("#text11~.button11");

3. Penapis Asas

1. Dapatkan elemen input pertama

Salin kod Kod adalah seperti berikut:

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

2. Dapatkan elemen input terakhir

Salin kod Kod adalah seperti berikut:

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

3. Dapatkan semua elemen input yang tidak dipilih

Salin kod Kod adalah seperti berikut:

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

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

Salin kod Kod adalah seperti berikut:

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

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

Salin kod Kod adalah seperti berikut:

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

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

Salin kod Kod adalah seperti berikut:

var input_query=$("input:eq(1)");

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

Salin kod Kod adalah seperti berikut:

var input_query=$("input:gt(0)");

8. Cari semua elemen input dengan indeks kurang daripada 2

Salin kod Kod adalah seperti berikut:

var input_query=$("input:lt(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");