Heim >Web-Frontend >js-Tutorial >Mehrere Beispiele für den jQuery-Verbindungsselektor „applications_jquery'.
540e808de67ab09bb00bd43e4a9bfece
1. Vorgänge im Zusammenhang mit der Verbindungsauswahl im Kontrollkästchen
<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="点击">
Beispiel: Sie müssen das Kontrollkästchen „Elementtyp“ und „verfügbar“ auf „ausgewählt“ setzen
Methode ① Verwenden Sie den Attributfilterselektor [type='checkbox'] und [disabled!=disabled]
$("input[type='checkbox'][disabled!=disabled]").attr("checked",true);
Beachten Sie, dass in diesem zusammengesetzten Selektor „disabled!=disabled“ verwendet werden sollte, um „verfügbare“ Elemente auszuwählen, und attr(“checked“,true) beim Festlegen von Attributen verwendet werden sollte. Das Attribut „disabled“ wird ähnlich wie das Attribut „checked“ verwendet.
Methode ②Formularauswahl verwenden: Kontrollkästchen und Attributfilterauswahl [deaktiviert!=deaktiviert]
$('input:checkbox[disabled!=disabled]').attr("checked",true);
Methode ③ Verwenden Sie den Formularselektor :Kontrollkästchen und den Formularobjektattributfilterselektor :aktiviert
$(':checkbox:enabled').attr("checked",true);
Methode ④ Verwenden Sie .each(), um
zu durchlaufen$("input[type=checkbox]").each(function(){ if ($(this).attr("disabled") != "disabled") { $(this).attr("checked",true); } });
Es wird kein zusammengesetzter Selektor verwendet. Was zu beachten ist, ist dasselbe wie bei Methode ①. Bei der Beurteilung des Attributs sollten Sie beurteilen, ob es „deaktiviert“ oder „aktiviert“ ist, nicht falsch oder wahr. Beim Festlegen von Eigenschaften können Sie „disabled“ oder „enable“ oder „false“ oder „true“ verwenden.
2. Weitere Beispiele für zusammengesetzte Selektoren
<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>
Beispiel: Setzen Sie den Hintergrund des ersten li-Elements mit der Klasse showli auf rot
$("ul li[class=showli]:eq(0)").css("background":"red");
Das Ergebnis ist, dass der Hintergrund von „ce538ea8997393b61c570ccb63e01b38der zweiten Zeilebed06894275b65c1ab86501b08a632eb“ rot wird. Es werden der Attributfilterselektor [class=showli] und der Basisfilterselektor eq(0)
verwendetBeispiel: Stellen Sie den Hintergrund des fünften sichtbaren Li auf Rot ein
$("ul li:visible:eq(4)").css({"display":"blaock","background":"red"});
Das Ergebnis ist, dass der Hintergrund von „ce538ea8997393b61c570ccb63e01b38Die sechste Zeilebed06894275b65c1ab86501b08a632eb“ rot wird, um zu erkennen, ob das ausgeblendete Li gefiltert wird durch:visible, display : Der rote Hintergrund ist unter keinem zu sehen. Verwendeter Sichtbarkeitsfilterselektor :visible
Beispiel. (Es ist ziemlich kompliziert) Setzen Sie den Hintergrund des zweiten Li, das hinter dem zweiten Li sichtbar ist, mit der Klasse showli auf Rot
$("ul li.showli:eq(1)").nextAll("li:visible:eq(1)").css({"display":"block","background":"red"});
Das Ergebnis ist, dass der Hintergrund von „ce538ea8997393b61c570ccb63e01b38der sechsten Zeilebed06894275b65c1ab86501b08a632eb“ rot wird.