Quels sont les sélecteurs de filtres de jquery ? Quels sont les sélecteurs de filtres couramment utilisés ?

Que fait le sélecteur de filtre de jquery ? Quels sont les sélecteurs de filtres couramment utilisés ? Cet article vous présentera les sélecteurs de filtres jquery, afin que vous puissiez comprendre quels sont les sélecteurs de filtres jquery couramment utilisés. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d'abord, découvrons le sélecteur de filtre jquery :

le sélecteur jquery peut opérer sur des groupes d'éléments HTML ou des éléments individuels. Cependant, le sélecteur de filtre est le type de sélecteur jquery le plus utilisé. Il peut faire correspondre des éléments selon un certain type de règles de filtrage et trouver (un ou plusieurs) éléments. Lorsqu'il est écrit, il commence par :.

les sélecteurs de filtre jquery peuvent être divisés dans les catégories suivantes :

1. sélecteur de filtre de base jquery (points clés)

2. sélecteur de filtre de contenu jquery

3. sélecteur de filtre de visibilité jquery

4. sélecteur de filtre d'attribut jquery

5. sélecteur de filtre d'état jquery

6. sélecteur de filtre de sous-élément jquery
   

Ci-dessous, nous utiliserons Dans la classification ci-dessus, parlez des sélecteurs de filtre jquery courants et de la façon d'utiliser ces sélecteurs de filtre jquery.

sélecteur de filtre de base jquery (point clé)

①first() ou : sélectionne d'abord le premier élément

//选择第一个div元素
$('div:first')  
$('div').first()

②last() ou : last sélectionne le dernier élément

//选择最后一个div元素
$('div:last')   
$('div').last()

③ : not(selector) sélectionne d'autres éléments à l'exception du sélecteur donné

 $('div:not(.one)')  //选择class不为one的 所有div元素

④ : even sélectionne l'index For pair -éléments numérotés, l'index commence à 0

 $('div:even')   //选择 索引值为偶数 的div元素

⑤ : impair sélectionne l'élément impair, et l'index commence à 0

$('div:odd')  //选择 索引值为奇数 的div元素

⑥ : eq(index) sélectionne les éléments d'index, à partir de 0

$('div:eq(3)')  //选择 索引等于 3 的div元素

⑦ : gt(index) sélectionne les éléments supérieurs à l'index donné, à partir de 0

$('div:gt(3)')  //选择 索引大于 3 的div元素

⑧ : lt(index) sélectionne les éléments inférieur à l'index donné Éléments indexés, à partir de 0

$('div:lt(3)')  //选择 索引小于 3 的div元素

⑨ : l'en-tête sélectionne les éléments de type titre

$(':header')  //选择 所有的标题元素.比如h1, h2, h3等等...

⑩ : l'animation sélectionne les éléments qui exécutent des effets d'animation

$(':animated')   //选择 当前正在执行动画的所有元素

⑪ : focus Sélectionnez l'élément actuellement ciblé

$(':focus')  //选择 当前选取焦点的所有元素

sélecteur de filtre de contenu jquery

① : contient (texte) select contient des éléments avec le texte spécifié

$("div:contains('Runob')")    // 选取包含 Runob文本的元素

② : vide Sélectionne les éléments vides qui ne contiennent pas d'éléments enfants ou de texte

$("td:empty")       //选取不包含子元素或者文本的tb空元素

③ : has(selector) Sélectionne les éléments contenant les éléments correspondants du sélecteur

$("div:has('.mini')")  //选取含有class为mini元素 的div元素

④ : le parent sélectionne les éléments vides contenant des éléments enfants ou du texte

$("div:parent")                //选取含有子元素或者文本的div元素

sélecteur de filtre de visibilité jquery

① : masqué sélectionne les éléments invisibles

$("li:hidden")       //选取所有不可见元素，或type为hidden的元素,例：<input type="hidden"/>

② : visible Sélectionnez les éléments visibles

$("li:visible")      //选取所有可见 li 元素

sélecteur de filtre d'attribut jquery

①[attribut] Sélectionnez les éléments avec cet attribut

$('div[title]')  //选取含有 属性title 的div元素

②[attribut =value] Sélectionnez les éléments dont la valeur d'attribut est value

$('div[title=test]')  //选取 属性title值等于 test 的div元素

③[attribute!=value] Sélectionnez les éléments dont la valeur d'attribut n'est pas égale à value

$('div[title!=test]')  //选取 属性title值不等于 test 的div元素

④[attribute^= value] Sélectionnez les éléments dont la valeur d'attribut commence par la valeur

 $('div[title^=te]')  //选取 属性title值 以 te 开始 的div元素

⑤[attribute$=value] Sélectionnez les éléments dont la valeur d'attribut se termine par la valeur

$("div[title$=est]")  //选取 属性title值 以 est 结束 的div元素

⑥[attribut*=value] Sélectionnez les éléments dont la valeur d'attribut contient la valeur

$("div[title*=es]")  //选取 属性title值 含有 es  的div元素

⑦[attribute|=value] Sélectionnez les éléments dont la valeur d'attribut est égale à la valeur ou préfixée par la valeur (c'est-à-dire "valeur-xxx")

$('div[title|="en"]')  //选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素

⑧[attribute~=value] Sélectionnez les éléments dont les valeurs d'attribut sont séparées par des espaces et contiennent la valeur donnée

$('div[title~="uk"]')//选取 属性title用空格分隔的值中包含字符uk的元素

⑨[attribute1][attribute2]…[attributeN] Combiner les attributs Sélecteur

$("div[id][title*=es]")  //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素

sélecteur de filtre d'état jquery

① : activé Sélectionnez les éléments disponibles

$("input:enabled")    // 选取可用的 input

② : [attribut = value] Sélectionnez les éléments indisponibles

$("input:disabled")   // 选取不可用的 input

③ : coché Sélectionnez les éléments sélectionnés

$("input:checked")    // 选取选中的 input

④ : sélectionné Sélectionnez les éléments sélectionnés

$("option:selected")  // 选取选中的 option

sélecteur de filtre d'élément enfant jquery

① : le premier enfant sélectionne le premier élément enfant sous chaque élément parent et renvoie l'élément de collection

//选取每个父元素下的第一个子元素
$('div.one :first-child')

② : dernier enfant sélectionne le dernier élément enfant sous chaque élément parent et renvoie l'élément de collection

//选取每个父元素下的最后一个子元素
$('div.one :last-child')

③ : only-child sélectionne le seul enfant sous chaque élément d'élément parent, renvoie l'élément de collection

//如果父元素下的仅仅只有一个子元素，那么选中这个子元素
$('div.one :only-child')

④ : nth-child(index) sélectionne l'index-ème élément enfant ou l'élément impair-pair sous chaque élément parent, l'index commence à partir de 1

//选取每个父元素下的第2个子元素
$('div.one :nth-child(2)')

Résumé : ce qui précède est une introduction complète à plusieurs sélecteurs de filtre jquery courants Vous pouvez utiliser ces sélecteurs de filtre pour obtenir les effets souhaités. J'espère que cela sera utile à l'apprentissage de tout le monde. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo jQuery, le Tutoriel vidéo JavaScript, le Tutoriel vidéo bootstrap !

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!