Rumah >hujung hadapan web >tutorial js >Beberapa contoh aplikasi pemilih kompaun jQuery_jquery
8e65e7cc3b67ccd2d9882ff4e2958296
1. Operasi berkaitan pemilih kompaun pada kotak pilihan
<input type="checkbox" id="ckb_1" /> <input type="checkbox" id="ckb_2" disabled="true" /> <input type="checkbox" id="ckb_3" /> <input type="checkbox" id="ckb_4" /> <input type="button" id="btn" value="点击">
Contoh: Anda perlu menetapkan elemen kotak pilihan jenis dan "tersedia" kepada "dipilih"
Kaedah ① Gunakan pemilih penapis atribut [type='checkbox'] dan [disabled!=disabled]
$("input[type='checkbox'][disabled!=disabled]").attr("checked",true);
Perhatikan bahawa dalam pemilih kompaun ini, disabled!=disabled hendaklah digunakan untuk memilih elemen "tersedia", dan attr("checked",true) hendaklah digunakan semasa menetapkan atribut. Atribut yang dilumpuhkan digunakan sama dengan atribut yang diperiksa.
Kaedah ②Gunakan pemilih borang :kotak semak dan pemilih penapis atribut [dilumpuhkan!=dilumpuhkan]
$('input:checkbox[disabled!=disabled]').attr("checked",true);
Kaedah ③ Gunakan pemilih borang :kotak semak dan pemilih penapis atribut objek bentuk :didayakan
$(':checkbox:enabled').attr("checked",true);
Kaedah ④ Gunakan .each() untuk melintasi
$("input[type=checkbox]").each(function(){ if ($(this).attr("disabled") != "disabled") { $(this).attr("checked",true); } });
Tiada pemilih kompaun digunakan. Apa yang perlu diambil perhatian adalah sama seperti dalam kaedah ① Apabila menilai atribut, anda harus menilai sama ada ia "dilumpuhkan" atau "dayakan", bukan palsu atau benar. Apabila menetapkan sifat, anda boleh menggunakan "dilumpuhkan" atau "dayakan", atau anda boleh menggunakan palsu atau benar.
2. Contoh lain pemilih kompaun
<ul> <li >第一行</li> <li class="showli">第二行</li> <li class="showli">第三行</li> <li>第四行</li> <li style="display:none">第五行</li> <li class="showli">第六行</li> <li>第七行</li> </ul>
Contoh Tetapkan latar belakang elemen li pertama dengan showli kelas kepada merah
$("ul li[class=showli]:eq(0)").css("background":"red");
Hasilnya ialah latar belakang 'ce538ea8997393b61c570ccb63e01b38baris keduabed06894275b65c1ab86501b08a632eb' bertukar menjadi merah. Pemilih penapis atribut [class=showli] dan pemilih penapis asas eq(0)
digunakanContoh. Tetapkan latar belakang li kelima yang kelihatan kepada merah
$("ul li:visible:eq(4)").css({"display":"blaock","background":"red"});
Hasilnya ialah latar belakang 'ce538ea8997393b61c570ccb63e01b38Barisan keenambed06894275b65c1ab86501b08a632eb' bertukar menjadi merah display:block adalah untuk mengesan sama ada li yang tersembunyi akan ditapis oleh:visible, display : Latar belakang merah tidak boleh dilihat di bawah tiada. Pemilih penapis keterlihatan digunakan :kelihatan
Contoh (Ia agak berbelit-belit) Tetapkan latar belakang li kedua yang kelihatan di belakang li kedua dengan showli kelas kepada merah
$("ul li.showli:eq(1)").nextAll("li:visible:eq(1)").css({"display":"block","background":"red"});
Hasilnya ialah latar belakang 'ce538ea8997393b61c570ccb63e01b38baris keenambed06894275b65c1ab86501b08a632eb' bertukar menjadi merah.