Heim Web-Frontend js-Tutorial jquery选择器(常用选择器说明)_jquery

jquery选择器(常用选择器说明)_jquery

May 16, 2016 pm 06:19 PM
选择器

基本选择器:

$("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素

$("div")                     选择所有的div标签元素,返回div元素数组

$(".myClass")           选择使用myClass类的css的所有元素

$("*")                        选择文档中的所有的元素

可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")

层叠选择器:    

$("form input")         选择所有的form元素中的input元素

$("#main > *")          选择id值为main的所有的子元素

$("label + input")     选择所有的label元素的下一个input元素节点

经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

$("#prev ~ div")       同胞选择器

该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器:

$("tr:first")               选择所有tr元素的第一个

$("tr:last")                选择所有tr元素的最后一个

$("input:not(:checked) + span")    

过滤掉:checked的选择器的所有的input元素

$("tr:even")               选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)

$("tr:odd")                选择所有的tr元素的第1,3,5... ...个元素

$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素    

$("td:gt(4)")             选择td元素中序号大于4的所有td元素

$("td:ll(4)")              选择td元素中序号小于4的所有的td元素

$(":header")

$("div:animated")

内容过滤选择器:

$("div:contains('John')")  选择所有div中含有John文本的元素

$("td:empty")           选择所有的为空(也不包括文本节点)的td元素的数组

$("div:has(p)")        选择所有含有p标签的div元素

$("td:parent")          选择所有的以td为父节点的元素数组

可视化过滤选择器:

$("div:hidden")        选择所有的被hidden的div元素

$("div:visible")        选择所有的可视化的div元素

属性过滤选择器:

$("div")              选择所有含有id属性的div元素

$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素

$("input[name!='newsletter']")  选择所有的name属性不等于'newsletter'的input元素

$("input[name^='news']")         选择所有的name属性以'news'开头的input元素

$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素

$("input[name*='man']")          选择所有的name属性包含'news'的input元素

$("input[name$='man']")    可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器:

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child")          返回所有的div元素的第一个子节点的数组

$("div span:last-child")           返回所有的div元素的最后一个节点的数组

$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器:

$(":input")                  选择所有的表单输入元素,包括input, textarea, select 和 button

$(":text")                     选择所有的text input元素

$(":password")           选择所有的password input元素

$(":radio")                   选择所有的radio input元素

$(":checkbox")            选择所有的checkbox input元素

$(":submit")               选择所有的submit input元素

$(":image")                 选择所有的image input元素

$(":reset")                   选择所有的reset input元素

$(":button")                选择所有的button input元素

$(":file")                     选择所有的file input元素

$(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器:

$(":enabled")             选择所有的可操作的表单元素

$(":disabled")            选择所有的不可操作的表单元素

$(":checked")            选择所有的被checked的表单元素

$("select option:selected")  选择所有的select 的子元素中被selected的元素
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist die Kennung des ID-Selektors in CSS? Was ist die Kennung des ID-Selektors in CSS? Sep 22, 2022 pm 03:57 PM

In CSS ist die Kennung des ID-Selektors „#“. Sie können einen bestimmten Stil für das HTML-Element angeben, das mit einem bestimmten ID-Attributwert markiert ist. Die Syntaxstruktur ist „#ID-Wert {Attribut: Attributwert;}“. Das ID-Attribut ist auf der gesamten Seite eindeutig und nicht wiederholbar; der ID-Attributwert sollte nicht mit einer Zahl beginnen. IDs, die mit Zahlen beginnen, funktionieren in Mozilla/Firefox-Browsern nicht.

Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist Nov 20, 2023 am 11:20 AM

Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist. Das spezifische Codebeispiel lautet wie folgt: HTML-Code: <divid="container" ><divclass="item"&gt ;Erstes untergeordnetes Element</div><divclass="item"&

Was tun, wenn der Javascript-Selektor fehlschlägt? Was tun, wenn der Javascript-Selektor fehlschlägt? Feb 10, 2023 am 10:15 AM

Der JavaScript-Selektor schlägt fehl, weil der Code nicht standardisiert ist. Die Lösung ist: 1. Entfernen Sie den importierten JS-Code und die ID-Selektormethode wird wirksam. 2. Führen Sie einfach den angegebenen JS-Code ein, bevor Sie „jquery.js“ einführen.

CSS-Pseudo-Selektor-Lernen, Pseudoklassen-Selektor-Analyse CSS-Pseudo-Selektor-Lernen, Pseudoklassen-Selektor-Analyse Aug 03, 2022 am 11:26 AM

Im vorherigen Artikel „Css-Pseudo-Selektor-Lernen – Pseudo-Element-Selektor-Analyse“ haben wir etwas über Pseudo-Element-Selektoren gelernt, und heute werfen wir einen genaueren Blick auf Pseudo-Klassen-Selektoren. Ich hoffe, dass es für alle hilfreich ist!

Enthalten Selektoren in CSS Hypertext-Tag-Selektoren? Enthalten Selektoren in CSS Hypertext-Tag-Selektoren? Sep 01, 2022 pm 05:25 PM

Nicht im Lieferumfang enthalten. Zu den CSS-Selektoren gehören: 1. Tag-Selektor, der bestimmte HTML-Elemente anhand des Elementnamens der HTML-Seite findet; 2. Klassen-Selektor, der bestimmte HTML-Elemente anhand des Werts des Klassenattributs des HTML-Elements findet; welche bestimmte HTML-Elemente über den Wert des id-Attributs des HTML-Elements lokalisieren. 4. Der Platzhalter-Selektor „*“ kann auf alle Arten von Tag-Elementen verweisen, einschließlich benutzerdefinierter Elemente. 5. Der Attribut-Selektor verwendet den vorhandenen Attributnamen des HTML-Element oder Attributwert zum Auffinden eines bestimmten HTML-Elements.

Eingehende Analyse von Is- und Where-Selektoren: Verbesserung des CSS-Programmierniveaus Eingehende Analyse von Is- und Where-Selektoren: Verbesserung des CSS-Programmierniveaus Sep 08, 2023 pm 08:22 PM

Eingehende Analyse von Ist- und Wo-Selektoren: Verbesserung des Niveaus der CSS-Programmierung Einführung: Im Prozess der CSS-Programmierung sind Selektoren ein wesentliches Element. Sie ermöglichen es uns, Elemente in einem HTML-Dokument basierend auf bestimmten Kriterien auszuwählen und zu formatieren. In diesem Artikel werden wir uns eingehend mit zwei häufig verwendeten Selektoren befassen, nämlich dem Is-Selektor und dem Where-Selektor. Durch das Verständnis ihrer Arbeitsprinzipien und Nutzungsszenarien können wir das Niveau der CSS-Programmierung erheblich verbessern. 1. Der Selektor ist eine sehr mächtige Wahl

Vom Anfänger bis zum Experten: Beherrschen Sie die Fähigkeiten im Umgang mit Ist- und Wo-Selektoren Vom Anfänger bis zum Experten: Beherrschen Sie die Fähigkeiten im Umgang mit Ist- und Wo-Selektoren Sep 08, 2023 am 09:15 AM

Vom Anfänger bis zum Experten: Beherrschen Sie die Fähigkeiten im Umgang mit Is- und Where-Selektoren. Einführung: Im Prozess der Datenverarbeitung und -analyse ist der Selektor ein sehr wichtiges Werkzeug. Durch Selektoren können wir die erforderlichen Daten entsprechend bestimmten Bedingungen aus dem Datensatz extrahieren. In diesem Artikel werden die Verwendungsfähigkeiten von is- und where-Selektoren vorgestellt, um den Lesern zu helfen, die leistungsstarken Funktionen dieser beiden Selektoren schnell zu beherrschen. 1. Verwendung des is-Selektors Der is-Selektor ist ein grundlegender Selektor, der es uns ermöglicht, den Datensatz basierend auf gegebenen Bedingungen auszuwählen.

Erfahren Sie in einem Artikel mehr über die von lxml unterstützten Selektoren Erfahren Sie in einem Artikel mehr über die von lxml unterstützten Selektoren Jan 13, 2024 pm 02:08 PM

lxml ist eine leistungsstarke Python-Bibliothek zur Verarbeitung von XML- und HTML-Dokumenten. Als Parsing-Tool bietet es eine Vielzahl von Selektoren, mit denen Benutzer die erforderlichen Daten einfach aus Dokumenten extrahieren können. In diesem Artikel werden die von lxml unterstützten Selektoren ausführlich vorgestellt. lxml unterstützt die folgenden Selektoren: Tag-Selektor (ElementTagSelector): Wählen Sie Elemente nach Tag-Namen aus. Wählen Sie beispielsweise Elemente mit einem bestimmten Tag-Namen aus, indem Sie <tagname> verwenden

See all articles