Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 16:36:34
Original
1105 Leute haben es durchsucht

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="点击">
Nach dem Login kopieren

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);
Nach dem Login kopieren

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);
Nach dem Login kopieren

Methode ③ Verwenden Sie den Formularselektor :Kontrollkästchen und den Formularobjektattributfilterselektor :aktiviert

$(':checkbox:enabled').attr("checked",true);
Nach dem Login kopieren

Methode ④ Verwenden Sie .each(), um

zu durchlaufen
$("input[type=checkbox]").each(function(){

if ($(this).attr("disabled") != "disabled") {

$(this).attr("checked",true);
}
});
Nach dem Login kopieren

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>
Nach dem Login kopieren

Beispiel: Setzen Sie den Hintergrund des ersten li-Elements mit der Klasse showli auf rot

$("ul li[class=showli]:eq(0)").css("background":"red");
Nach dem Login kopieren

Das Ergebnis ist, dass der Hintergrund von „

  • der zweiten Zeile
  • “ 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"});
    Nach dem Login kopieren

    Das Ergebnis ist, dass der Hintergrund von „

  • Die sechste Zeile
  • “ 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"});
    Nach dem Login kopieren

    Das Ergebnis ist, dass der Hintergrund von „

  • der sechsten Zeile
  • “ rot wird.

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    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
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage