Heim >Web-Frontend >js-Tutorial >Mehrere Beispiele für den jQuery-Verbindungsselektor „applications_jquery'.

Mehrere Beispiele für den jQuery-Verbindungsselektor „applications_jquery'.

WBOY
WBOYOriginal
2016-05-16 16:36:341121Durchsuche

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)

verwendet

Beispiel: 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.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn