JQuery-Selektor-Enzyklopädie, umfassende und detaillierte Erklärung des JQuery-Selektors-js-Tutorial-php.cn

Selektoren haben keine feste Definition. Die Selektoren von jQuery sind den Selektoren in Stylesheets sehr ähnlich. Der Selektor hat die folgenden Eigenschaften:
1. Vereinfachen Sie das Schreiben von Code
2. Implizite Iteration
3. Es besteht keine Notwendigkeit zu beurteilen, ob das Objekt vorhanden ist.
wobei „$“ ein unverzichtbarer Bestandteil des Selektors ist. In der jQuery-Bibliothek ist $ eine Abkürzung für jQuery, z. B. $(„#foo“) und jQuery(“ #foo") Äquivalent sind $.ajax und jQuery.ajax. Wenn es keine speziellen Anweisungen gibt, können Sie das $-Symbol im Programm als Abkürzung für jQuery verstehen.
Jetzt beginnen wir offiziell mit der Untersuchung des jQuery-Selektors. Selektoren werden nach ihren Funktionsgewohnheiten klassifiziert und im Folgenden erläutert, damit der Leser sie beherrschen kann.
1. Basisselektor
Der Basisselektor umfasst 5 Arten von Selektoren: #id, element, .class, * und selectorl, selector2.selectorN. Im Folgenden werden die Rolle und Verwendung jedes Selektors vorgestellt.
1． #id-Selektor
#Der ID-Selektor gleicht ein Element basierend auf der angegebenen ID ab. Wenn der Selektor Sonderzeichen enthält, können diese mit zwei Schrägstrichen maskiert werden und der Rückgabewert ist Array.
2． Elementselektor
Der Elementselektor ist ein Element, das für die Suche verwendet wird. Der Tag-Name, der auf den DOM-Knoten verweist. Sein Rückgabewert ist Array.
3． Der Klassenselektor
Der Klassenselektor gleicht Elemente basierend auf einer bestimmten Klasse ab und ist eine Klasse, nach der gesucht werden soll. Ein Element kann mehrere Klassen haben, solange es eine Übereinstimmung gibt. Der Rückgabewert ist Array.

Zum Beispiel:

<input type="text" id="ID" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素css类名选择" />
jQuery("#ID").val();
jQuery("a").text();
jQuery(".classname").val();

Nach dem Login kopieren

kann jeweils den Wert der Elemente ermitteln. Die oben genannten drei sind die gebräuchlichsten Selektoren, von denen der ID-Selektor der effizienteste ist und nach Möglichkeit verwendet werden sollte.

4． *Selektor
*Selektoren werden hauptsächlich für die kontextbasierte Suche und die Zuordnung aller Elemente verwendet. Sein Rückgabewert ist Array.
5． selector1, selector2, selectorN selector
Dieser Selektortyp kombiniert die von jedem Selektor übereinstimmenden Elemente und gibt sie zusammen zurück. Sie können eine beliebige Anzahl von Selektoren angeben und die übereinstimmenden Elemente zu einem Ergebnis zusammenführen. Der Rückgabewert ist: Array. Im folgenden Beispiel können die Leser die Funktionen von Selektor1, Selektor2 und SelektorN klar verstehen, indem sie CSS-Operationen für die ausgewählten Elemente ausführen.
2. Ebenenauswahl
Die Ebenenauswahl umfasst 5 Formen: Vorfahr, Nachkomme, Eltern > Im Folgenden werden anhand von Beispielen die Rolle und Verwendung jedes Selektors im Detail vorgestellt.
1． Der Vorfahren-Nachkommen-Selektor
bezieht sich auf den Abgleich aller Nachkommen-Elemente unter einem bestimmten Vorfahren-Element. Der Vorfahre stellt als Parameter einen beliebigen gültigen Selektor dar, während der Nachkomme zum Abgleichen des Selektors des Elements verwendet wird und der erste Nachkomme des Selektors ist . Der Rückgabewert ist: Array.
2． Übergeordneter>untergeordneter Selektor
übergeordneter>untergeordneter Selektor bedeutet, alle untergeordneten Elemente unter einem bestimmten übergeordneten Element abzugleichen. Die Bedeutung der beiden Parameter ist wie folgt: „Eltern“ stellt einen beliebigen gültigen Selektor dar; „Kind“ ist der Selektor, der zum Abgleichen des Elements verwendet wird, und es ist ein untergeordnetes Element des ersten Selektors. Sein Rückgabewert ist Array.
3． prev+next-Selektor
Dieser Selektortyp wird verwendet, um alle nächsten Elemente abzugleichen, die unmittelbar auf das vorherige Element folgen. Die beiden Parameter haben folgende Bedeutung: prev steht für einen beliebigen gültigen Selektor; next steht für einen gültigen Selektor, der unmittelbar auf den ersten Selektor folgt. Sein Rückgabewert ist Array.
4． prev ~ siblings selector
prev ~ siblings selector stellt alle Geschwisterelemente dar, nachdem sie mit dem vorherigen Element abgeglichen wurden. Die beiden Parameter haben folgende Bedeutung: prev stellt einen beliebigen gültigen Selektor dar; siblings stellt einen Selektor dar und dient als Geschwister des ersten Selektors. Sein Rückgabewert ist Array.

Beispiel:

<div id="divTest">
        <input type="text" value="投资" />
        <input id="next" type="text" />
        <input type="text"  value="担当" />
        <input type="text" title="学习" value="学习" />
        <a>1</a>
        <a>2</a>
</div>
//得到div中的a标签内容 结果为12
jQuery("#divTest a").text();
//输出div直接子节点 结果为投资
jQuery("#divTest>input").val();
//输出id为next的后一个同级别元素 结果为担当
jQuery("#next+input").val();
//同上，并且是有title的元素 结果为学习
jQuery("#next~[title]").val();

Nach dem Login kopieren

3. Filterselektor
Filterselektor filtert hauptsächlich die erforderlichen DOM-Elemente durch spezifische Filterregeln, Filterregeln und Pseudoklassen in CSS. Die Selektorsyntax ist das Gleiche, das heißt, der Selektor beginnt mit einem Doppelpunkt.
Filterselektoren beinhalten eine Menge Inhalt, mit insgesamt 6 Typen, aber sie können klassifiziert werden. Im Folgenden erklären wir verschiedene Arten von Selektoren im Detail.
1． Grundlegender Filterselektor
Der grundlegende Filterselektor ist der am häufigsten verwendete Typ von Filterselektor. Er umfasst hauptsächlich die folgenden Formen, die hier ausführlich erläutert werden:
(1): erster/: letzter Selektor.
(2):kein Selektor.
(3):gerade und ungerade Selektoren.
(4):eq:gt, :lt, Selektor.
(5): Header-Selektor.
(6):animierter Selektor.
Beispiel:

<div id="divTest">
    <ul>
        <li>投资</li>
        <li>理财</li>
        <li>成熟</li>
        <li>担当</li>
        <input type="radio" value="学习" checked="checked" />
        <input type="radio" value="不学习" />
    </ul>
</div>
//第一个li内容 结果为投资
jQuery("li:first").text();
//最后一个li内容 结果为担当
jQuery("li:last").text();
//input未被选中的值 结果为不学习
jQuery("li input:not(:checked)").val();
//索引为偶数的li 结果为投资 成熟
jQuery("li:even").text();
//索引为奇数的li 结果为理财 担当
jQuery("li:odd").text();
//索引大于2的li的内容 结果为担当
jQuery("li:gt(2)").text();
//索引小于1的li的内容 结果为投资
jQuery("li:lt(1)").text();

Nach dem Login kopieren

2.内容过滤选择器
内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器，这部分过滤器是对上面介绍基本过滤选择器的一个补充，对于页面选取、设置元素显示等方面发挥着重要的作用。下面将对各选择器进行详细的介绍。
（1）:contains选择器。
（2）:empty选择器。
（3）:has选择器。
（4）:parent选择器。

举例：

<div id="Test">
    <ul>
        <li>hyip投资</li>
        <li>hyip</li>
        <li></li>
        <li>理财</li>
        <li><a>投资</a></li>
    </ul>
</div>   
//包含hyip的li的内容 结果为hyip投资 hyip
jQuery("li:contains(&#39;hyip&#39;)").text();
//内容为空的li的后一个li内容 结果为理财
jQuery("li:empty+li").text();
//包含a标签的li的内容 结果为投资
jQuery("li:has(a)").text();

Nach dem Login kopieren

3．可见性过滤选择器
可见性过滤选择器比较简单，其包含两种选择器，主要是用来匹配所有可见元素和不可见元素。下面将会对这两种选择器进行详细介绍。
（1）:hidden选择器。
（2）:visible选择器。

举例：

<ul>
    <li>可见</li>
    <li style="display:none;">不可见</li>
</ul>
//不可见的li的内容 结果为不可见
jQuery("li:hidden").text();
//可见的li的内容 结果为可见
jQuery("li:visible").text();

Nach dem Login kopieren

4．属性过滤选择器
属性过滤选择器是用于匹配包含给定属性的元素，当然也可以匹配不包含此属性的元素等。属性过滤选择器共含有以下7种选择器。
（1） [attribute]选择器。
（2）[attribute=value]、[attribute!=value]选择器（此处包含两种）。
（3）[attribute^=value]、[attribute$=value]、[attribute*=value]选择器（此处包含三种）。
（4）[selector][selector2]选择器。
举例：

<input type="text" name="hyipinvest" value="hyip投资" />
<input type="text" name="investhyip" value="投资hyip" />
<input type="text" name="google" value="HYIP" />
//name为hyipinvest的值 结果为hyip投资
alert(jQuery("input[name=&#39;hyipinvest&#39;]").val());
//name以hyip开始的值 结果为hyip投资
alert(jQuery("input[name^=&#39;hyip&#39;]").val());
//name以hyip结束的值 结果为投资hyip
alert(jQuery("input[name$=&#39;hyip&#39;]").val());
//name包含oo的值 结果为HYIP
alert(jQuery("input[name*=&#39;oo&#39;]").val());

Nach dem Login kopieren

5．子元素过滤选择器
html由层层嵌套在一起的标签组成，由于一些标签需要进行单独处理，如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器，具体内容将在下面详细讲解。
（1）:nth-child选择器。
（2）:first-child、:last-child选择器（两种）。
（3）:only-child选择器。
6．表单对象属性过滤选择器
这部分内容相当简单，只包含四种类型的选择器，这些选择器分别用来匹配可用元素或者不可用元素、选中元素等。下面将以实例的形式对此部分内容进行讲解。
（1）:enabled、:disabled选择器。
（2）:checked选择器。
（3）:selected选择器。
表单过滤选择器是用于处理html中表单的选择器，其中不仅仅包括经常用到的按钮、文本域、单选框、复选框等，还涉及了很少用到的图片、隐藏域、文件上传等标签。下面将会对这些选择器进行具体介绍。
（1）:input选择器。
（2）:text、:password选择器。
（3）:radio、:checkbox选择器。
（4）:submit、:image、:reset、:button、:file选择器。
（5）:hidden选择器。