Explication détaillée des exemples de cours de base du sélecteur jquery

Le sélecteur de Jquery est assez beau, empruntant la syntaxe de XPath2.0 et CSS1-3, et est compatible avec plusieurs navigateurs, ce qui rend le DOM initialement très complexe devenu soudainement plus simple, et vous avez la dernière version. La version est 1.2.2b, et tous les exemples ci-dessous sont également des exemples fournis sur la base de cette version.

Test du code HTML :

<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>

Basique :

#id : basé sur objet L'attribut id récupère l'objet.

alerte($('#first').html());
/ /Afficher Je suis le premier

élément : Tous les objets correspondant à une certaine balise HTML

alerte($('p') .longueur);
//Affichage 4

.class  : Récupère l'objet en fonction de son attribut de classe 🎜>

.red

').length);//Affichage 2* : Récupérer tous les objets alerte
( $

(

'

*

').length);//Affiche la somme des objets en HTML, mais différents navigateurs, les résultats seront différentsselector1, selector2, selectorN : Obtenez une collection de plusieurs sélecteurs sans supprimer les doublons. alerte
($

(

'

.red, #second, p

').longueur);//Affichage 4Sélecteur de niveau : ancêtre descendant : Ce sélecteur est un espace, indiquant que le premier Tous objets d'un sélecteur, puis recherchez tous les objets correspondant au deuxième sélecteur parmi ses nœuds descendants.
alerte

(

$

(

'

#père .rouge

').html());//Affichage Je suis le deuxièmeparent > enfant : Ce sélecteur est le signe supérieur à, ce qui signifie que tous les objets du premier sélecteur sont trouvés en premier, puis dans son Rechercher tous les objets correspondant au deuxième sélecteur dans les nœuds enfants (et non dans les nœuds petits-enfants).

alerte($('#père > .rouge ').html());
//Affichage Je suis deuxième

prev + next : Ce sélecteur est le signe plus, ce qui signifie d'abord trouver tous les objets du premier sélecteur, puis trouver le même niveau comme lui Le nœud suivant qui suit immédiatement correspond également à l'objet du deuxième sélecteur.

alerte($('#père + .red').html());
//Montrer Je suis en avant

préc ~ frères et sœurs : Ce sélecteur est le signe ~, ce qui signifie d'abord trouver tous les objets du premier sélecteur, puis les trouver Objets qui correspondent au deuxième sélecteur dans tous les nœuds suivants du même niveau.

alerte($('#premier ~ #troisième').html());
//Afficher Je suis troisième

Caractère de filtre de base :

:premier : correspond au premier de plusieurs objets objets
:last : Faites correspondre le dernier objet parmi plusieurs objets

alerte($ ('.red:first').html ());
//Afficher que je suis deuxième
alerte($('p:dernier') .html());
//Montrer que je suis troisième

 : not(selector) : fait correspondre les éléments avec le contenu du sélecteur après avoir été non supprimés

alert($( '.red:not(#second)'). html());
//Montrer que je suis en avant

:pair : correspond au
pair dans tous les objets : impair : correspond au

impair dans tous les objets

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!