Wählen Sie in jQuery nach Name aus

Der heutige Beitrag wird die Auswahl von Elementen unter Verwendung der name-Attribute in jQuery lehren.

Wählen Sie in jQuery nach Name aus

Die CSS-Spezifikation ermöglicht es, Elemente anhand ihrer Attribute zu identifizieren. Während einige ältere Browser es für Dokumentdesignzwecke nicht unterstützen, können Sie es mit jQuery unabhängig von Ihrem Browser verwenden.

Wenn Sie einen der folgenden Attributselektoren verwenden, müssen Sie auf Attribute mit mehreren durch Leerzeichen getrennten Werten achten, da diese Selektoren die Attributwerte als eine einzelne Zeichenfolge sehen.

Im Folgenden finden Sie die Möglichkeiten, das Attribut mit der Eigenschaft name auszuwählen.

1. Attribut-Präfix-Selektor [name|="value"] – Er wählt Elemente aus, bei denen das angegebene Attribut gleich ist oder mit einer angegebenen Zeichenfolge gefolgt von einem Bindestrich beginnt.
2. Attributselektor [name*="value"] – Er wählt Elemente mit dem angegebenen Attribut mit einem Wert aus, der eine angegebene Teilzeichenfolge enthält.
3. Attribut-Wortauswahl [name~="value"] – Wählt Elemente mit dem angegebenen Attribut mit einem Wert aus, der ein bestimmtes Wort enthält, getrennt durch Leerzeichen.
4. Attribut endet mit Selektor [name$="value"] – Es wählt Elemente mit dem angegebenen Attribut mit einem Wert aus, der mit genau einer bestimmten Zeichenfolge endet. Beim Vergleich wird zwischen Groß- und Kleinschreibung unterschieden.
5. Attribute Equals Selector [name="value"] – Es wählt Elemente mit dem angegebenen Attribut aus, deren Wert genau gleich einem angegebenen Wert ist.
6. Attribut beginnt mit Selektor [name^="value"] – Es wählt Elemente mit dem angegebenen Attribut mit einem Wert aus, der mit genau einer angegebenen Zeichenfolge beginnt.

Lassen Sie es uns anhand des folgenden Beispiels verstehen.

<button name="btn-0" value="hello world">Hello World!</button>

console.log($('[name="btn-0"]').val());
console.log($('[name^="btn"]').val());
console.log($('[name$="-0"]').val());
console.log($('[name*="tn-0"]').val());

Im obigen Beispiel haben wir einen Button mit dem Namen btn-0 und dem Wert hello world definiert. Wir können die Schaltfläche auf 4 Arten auswählen.

Der erste wählt die Schaltfläche anhand des genauen Namens der Schaltfläche aus. Der zweite wählt den Button, dessen Name mit btn beginnt.

Der dritte wählt den Button aus, dessen Wert mit -0 endet. Und der letzte wählt den Button aus, dessen Namensattribut das tn-0 enthält.

Führen Sie das obige Code-Snippet in jedem Browser aus, der jQuery unterstützt; es wird das folgende Ergebnis zeigen.

Ausgang:

"hello world"
"hello world"
"hello world"
"hello world"

Demo