Ausführliche Erläuterung der Beispiele für den JQuery-Selektor-Grundkurs

Der Selektor von Jquery sieht recht gut aus, er übernimmt die Syntax von XPath2.0 und CSS1-3 und ist mit mehreren Browsern kompatibel, wodurch das ursprünglich sehr komplexe DOM plötzlich einfacher wird und Sie über die neueste Version verfügen. Die Version ist 1.2.2b. und alle unten aufgeführten Beispiele sind ebenfalls Beispiele, die auf dieser Version basieren.

HTML-Code testen:

<div id="father">
   <div id="first">I am first</div>
   <div id="second" class="red">I am second</div>
   <div id="third" style="display:none">I am third</div>
</div>
<p class="red">I am forth</p>
<h4></h4>

Basic:

#id: basierend auf Objekt Das id-Attribut ruft das Objekt ab.

Alarm($('#first').html());
/ /Anzeige „Ich bin der Erste“

Element: Alle Objekte, die mit einem bestimmten HTML-Tag übereinstimmen

Alarm($('p') .Länge);
//Anzeige 4

.class : Holen Sie sich das Objekt entsprechend seinem Klassenattribut 🎜>

').length);//Anzeige 2*: Alle Objekte abrufen Alarm
( $

'

').length);//Zeigt die Summe der Objekte in HTML an, aber Bei verschiedenen Browsern sind die Ergebnisse unterschiedlichSelektor1, Selektor2, SelektorN: Erhalten Sie eine Sammlung mehrerer Selektoren, ohne Duplikate zu entfernen. Alarm
($

'

').Länge);//Anzeige 4Ebenenselektor: Vorfahren Nachkomme: Dieser Selektor ist ein Leerzeichen, das angibt, dass der erste Alle Objekte eines Selektors und finden Sie dann alle Objekte, die dem zweiten Selektor entsprechen, unter seinen Nachkommenknoten.
Alarm

$

'

').html());//Anzeige Ich bin ZweiterEltern > Kind: Dieser Selektor ist das Größer-als-Zeichen, was bedeutet, dass alle Objekte des ersten Selektors zuerst gefunden werden und dann in seinem Finden Sie alle Objekte, die mit dem zweiten Selektor in untergeordneten Knoten übereinstimmen (nicht in untergeordneten Knoten).

Alarm($('#father > .red ').html());
//Anzeige, dass ich Zweiter bin

prev + next: Dieser Selektor ist das Pluszeichen, was bedeutet, dass zuerst alle Objekte des ersten Selektors gesucht werden und dann die gleiche Ebene gefunden wird als ihm Der nächste Knoten, der unmittelbar folgt, stimmt auch mit dem Objekt des zweiten Selektors überein.

Alarm($('#father + .red').html());
//Zeige, dass ich weiter bin

prev ~ siblings: Dieser Selektor ist das ~-Zeichen, was bedeutet, zuerst alle Objekte des ersten Selektors zu finden und sie dann zu finden Objekte, die mit dem zweiten Selektor in allen nachfolgenden Knoten derselben Ebene übereinstimmen.

Alarm($('#erster ~ #dritter').html());
//Zeige, dass ich Dritter bin

Grundlegendes Filterzeichen:

:first: Entspricht dem ersten von mehreren Objektobjekten
:last: Übereinstimmung mit dem letzten Objekt unter mehreren Objekten

alert($ ('.red:first').html ());
//Zeige, dass ich Zweiter bin
Alarm($('p:last') .html());
//Zeige, dass ich Dritter bin

: not(selector): Gleicht Elemente mit dem Inhalt im Selektor ab, nachdem sie nicht entfernt wurden

alert($( '.red:not(#second)'). html());
//Zeige, dass ich weiter bin

:even: Entspricht dem gerades
in allen Objekten: odd: Entspricht dem ungeraden

alert($('p:even').length);
//显示2
alert($('p:odd').length);
//显示2

:eq(index)：匹配某一下表的单独某元素

alert($('p:eq(2)').html());
//显示I am second

:gt(index)：匹配大于某一下标的所有元素
:lt(index)：匹配小于某一下标的所有元素

alert($('p:gt(1)').length);
//显示2
alert($('p:lt(2)').length);
//显示2

:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6

alert($(':header').length);
//显示1

:animated：匹配所有有动画效果的元素

function animateIt()
{
   $("#second").slideToggle("slow", animateIt);
}
animateIt();
alert($(':animated').html());
//显示I am second

文本过滤符：

:contains(text)：匹配内部拥有该文本元素的对象，包含间接有用的情况

alert($('p:contains("first")').length);
//显示2

:empty：匹配所有没有子元素的对象

alert($(':header:empty').length);
//显示1

:has(selector)：匹配所有至少含有一个子选择符的对象

alert($('p:has("#third")').attr('id'));
//显示father

:parent：匹配所有的父对象，父对象包含那些只含有文本的对象

alert($('p:parent').length);
//显示4

可见性过滤符：

:hidden：匹配所有隐藏对象，或者input中的hidden类型
:visible：匹配所有可见的对象

alert($('p:hidden').length);
//显示1
alert($('p:visible').length);
//显示3

属性过滤符：

[attribute]：匹配拥有某一属性的所有对象
[attribute=value]：匹配拥有某一属性和值的对象
[attribute!=value]：匹配拥有某一属性，且不是某一值的对象
[attribute^=value]：匹配拥有某一属性，且以某一值开头的对象
[attribute$=value]：匹配拥有某一属性，且以某一值结尾的对象
[attribute*=value]：匹配拥有某一属性，且包含某一值的对象

alert($('p[class]').html());
//显示I am second
alert($('p[class=red]').html());
//显示I am second
alert($('p[id!=father]').length);
//显示3
alert($('p[id^=f]').length);
//显示2
alert($('p[id$=d]').length);
//显示2
alert($('p[id*=ir]').length);
//显示2

[selector1][selector2][selectorN]：匹配同时符合多个属性选择符的对象

alert($('p[id=second][class^=r]').length);
//显示I am second

子过滤符：

:nth-child(index/even/odd/equation)：匹配子元素中的某一下标/偶数/奇数/等式的对象，:eq(index)只能匹配某单一对象的子元素特征，而这个方法可以匹配多个对象的某一子元素共同特征

alert($('#father p:nth-child(1)').html());
//显示I am first
alert($('#father p:nth-child(even)').length);
//显示1
alert($('#father p:nth-child(odd)').length);
//显示2
alert($('#father p:nth-child(3n)').length);
//显示1，其实是每3个一匹配

:first-child：匹配第一个子元素
:last-child：匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作

alert($('#father p:first-child').html());
//显示I am first
alert($('#father p:last-child').html());
//显示I am third

:only-child：如果一个父元素只有一个子元素，就匹配这个子元素

alert($('p:only-child').length);
//显示0

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für den JQuery-Selektor-Grundkurs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!