Quels sont les sélecteurs de filtres dans jQuery ?-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Quels sont les sélecteurs de filtres dans jQuery ?

Sep 18, 2018 pm 04:02 PM

Il existe de nombreux sélecteurs dans jQuery, tels que les sélecteurs d'éléments enfants, les sélecteurs descendants, les sélecteurs de filtre, etc. Cet article vous parlera des sélecteurs de filtre dans jQuery pour ceux qui apprennent les sélecteurs. Vous pourrez vous y référer, j'espère. cela vous sera utile.

:first et :last sélecteurs de filtre

:first obtient le 1er élément d'un groupe d'éléments avec la même balise
:last en obtient un Le dernier élément du groupe avec la même balise
Par exemple :

&lt;body&gt;
  &lt;div&gt;改变最后一行&quot;苹果&quot;背景颜色：&lt;/div&gt;
  &lt;ol&gt;
    &lt;li&gt;葡萄&lt;/li&gt;
    &lt;li&gt;香蕉&lt;/li&gt;
    &lt;li&gt;橘子&lt;/li&gt;
    &lt;li&gt;西瓜&lt;/li&gt;
    &lt;li&gt;苹果&lt;/li&gt;
  &lt;/ol&gt;       
&lt;script type=&quot;text/javascript&quot;&gt;
  $(&quot;li:last&quot;).css(&quot;background-color&quot;, &quot;red&quot;);
&lt;/script&gt;

Copier après la connexion

:contains(text) filter selector

:contains(text) selection Contient tous les éléments de la chaîne spécifiée. Il est généralement utilisé en combinaison avec d'autres éléments pour obtenir tous les objets élément contenant le contenu de la chaîne "texte"
Par exemple :

&lt;body&gt;
  &lt;div&gt;改变包含&quot;jQuery&quot;字符内容的背景色：&lt;/div&gt;
  &lt;ol&gt;
    &lt;li&gt;强大的&quot;jQuery&quot;&lt;/li&gt;
    &lt;li&gt;&quot;javascript&quot;也很实用&lt;/li&gt;
    &lt;li&gt;&quot;jQuery&quot;前端必学&lt;/li&gt;
    &lt;li&gt;&quot;java&quot;是一种开发语言&lt;/li&gt;
    &lt;li&gt;前端利器——&quot;jQuery&quot;&lt;/li&gt;
  &lt;/ol&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  $(&quot;li:contains(&#39;jQuery&#39;)&quot;).css(&quot;background&quot;, &quot;green&quot;);
&lt;/script&gt;
&lt;/body&gt;

Copier après la connexion

:has( selector) Sélecteur de filtre

: La fonction du sélecteur de filtre has(selector) est d'obtenir tous les éléments contenant le nom de l'élément spécifié dans le sélecteur
Par exemple :

&lt;body&gt;
  &lt;div&gt;改变包含&quot;label&quot;元素的背景色：&lt;/div&gt;
  &lt;ol&gt;
    &lt;li&gt;&lt;p&gt;我是P先生&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;label&gt;L妹纸就是我&lt;/label&gt;&lt;/li&gt;
    &lt;li&gt;&lt;p&gt;我也是P先生&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;label&gt;我也是L妹纸哦&lt;/label&gt;&lt;/li&gt;
    &lt;li&gt;&lt;p&gt;P先生就是我哦&lt;/p&gt;&lt;/li&gt;
  &lt;/ol&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  $(&quot;li:has(&#39;label&#39;)&quot;).css(&quot;background-color&quot;, &quot;blue&quot;);
&lt;/script&gt;
&lt;/body&gt;

Copier après la connexion

:sélecteur de filtre caché

: La fonction du sélecteur de filtre caché est d'obtenir tous les éléments invisibles. Ces éléments invisibles incluent les éléments dont la valeur de l'attribut de type est masquée
Par exemple : < 🎜. >

&lt;body&gt;
  &lt;h3&gt;显示隐藏元素的内容&lt;/h3&gt;
  &lt;input id=&quot;hidstr&quot; type=&quot;hidden&quot; value=&quot;我已隐藏起来&quot;/&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    var $strHTML = $(&quot;input:hidden&quot;).val();
    $(&quot;div&quot;).html($strHTML);
  &lt;/script&gt;
&lt;/body&gt;

Copier après la connexion

: sélecteur de filtre visible

: le sélecteur de filtre visible obtient tous les éléments visibles, c'est-à-dire tant que la valeur de l'attribut d'affichage de l'élément n'est pas modifiée Si elle est définie sur "aucun", alors tout peut être obtenu via ce sélecteur.

Par exemple :

&lt;body&gt;
  &lt;h3&gt;修改可见“水果”的背景色&lt;/h3&gt;
  &lt;ul&gt;
    &lt;li style=&quot;display:none&quot;&gt;橘子&lt;/li&gt;
    &lt;li style=&quot;display:block&quot;&gt;香蕉&lt;/li&gt;
    &lt;li style=&quot;display:&quot;&gt;葡萄&lt;/li&gt;
    &lt;li&gt;苹果&lt;/li&gt;
    &lt;li style=&quot;display:none&quot;&gt;西瓜&lt;/li&gt;
  &lt;/ul&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(&quot;li:visible&quot;).css(&quot;background-color&quot;,&quot;blue&quot;);
  &lt;/script&gt;
&lt;/body&gt;

Copier après la connexion

[attribute=value] Sélecteur d'attribut

[attribute=value] La fonction du sélecteur d'attribut est d'obtenir l'attribut nom et attribut Tous les éléments ayant la même valeur, où [] est le symbole entre crochets utilisé spécifiquement pour les sélecteurs d'attribut, le paramètre attribut représente le nom de l'attribut et le paramètre value représente la valeur de l'attribut.

Par exemple :

&lt;body&gt;
  &lt;h3&gt;改变&quot;title&quot;属性值为&quot;蔬菜&quot;的背景色&lt;/h3&gt;
  &lt;ul&gt;
    &lt;li title=&quot;蔬菜&quot;&gt;茄子&lt;/li&gt;
    &lt;li title=&quot;水果&quot;&gt;香蕉&lt;/li&gt;
    &lt;li title=&quot;蔬菜&quot;&gt;芹菜&lt;/li&gt;
    &lt;li title=&quot;水果&quot;&gt;苹果&lt;/li&gt;
    &lt;li title=&quot;水果&quot;&gt;西瓜&lt;/li&gt;
  &lt;/ul&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(&quot;li[title=&#39;蔬菜&#39;]&quot;).css(&quot;background-color&quot;, &quot;green&quot;);
  &lt;/script&gt;
&lt;/body&gt;

Copier après la connexion

[attribute!=value] Sélecteur d'attribut

[attribute!=value] La fonction du sélecteur d'attribut est d'obtenir les valeurs qui ne contiennent pas le nom de l'attribut, ou tous les éléments différents du nom de l'attribut et de la valeur de l'attribut, où [] est le symbole entre crochets dédié au sélecteur d'attribut, le paramètre attribut représente le nom de l'attribut et le paramètre valeur représente la valeur de l'attribut.

[attribute*=value] Sélecteur d'attribut

[attribute*=value] Il peut obtenir tous les éléments dont la valeur d'attribut contient le contenu spécifié, où [] est des crochets utilisé exclusivement pour les sélecteurs d'attributs. Le paramètre d'attribut représente le nom de l'attribut et le paramètre value représente la valeur d'attribut correspondante.

Par exemple :

&lt;body&gt;
  &lt;h3&gt;改变&quot;title&quot;属性值包含&quot;果&quot;的背景色&lt;/h3&gt;
  &lt;ul&gt;
    &lt;li title=&quot;蔬菜&quot;&gt;茄子&lt;/li&gt;
    &lt;li title=&quot;水果&quot;&gt;香蕉&lt;/li&gt;
    &lt;li title=&quot;蔬菜&quot;&gt;芹菜&lt;/li&gt;
    &lt;li title=&quot;人参果&quot;&gt;小西红柿&lt;/li&gt;
    &lt;li title=&quot;水果&quot;&gt;西瓜&lt;/li&gt;
  &lt;/ul&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(&quot;li[title*=&#39;果&#39;]&quot;).css(&quot;background-color&quot;, &quot;green&quot;);
  &lt;/script&gt;
&lt;/body&gt;

Copier après la connexion

: sélecteur de filtre de sous-élément du premier enfant

: le sélecteur de filtre de sous-élément du premier enfant peut obtenir chaque parent. Le premier élément enfant renvoyé dans l'élément, qui est une collection, est couramment utilisé pour le traitement de sélection de plusieurs données de collection.

Par exemple :

&lt;body&gt;
  &lt;h3&gt;改变每个&quot;蔬菜水果&quot;中第一行的背景色&lt;/h3&gt;
  &lt;ol&gt;
    &lt;li&gt;芹菜&lt;/li&gt;
    &lt;li&gt;茄子&lt;/li&gt;
    &lt;li&gt;萝卜&lt;/li&gt;
    &lt;li&gt;大白菜&lt;/li&gt;
    &lt;li&gt;西红柿&lt;/li&gt;
  &lt;/ol&gt;
  &lt;ol&gt;
    &lt;li&gt;橘子&lt;/li&gt;
    &lt;li&gt;香蕉&lt;/li&gt;
    &lt;li&gt;葡萄&lt;/li&gt;
    &lt;li&gt;苹果&lt;/li&gt;
    &lt;li&gt;西瓜&lt;/li&gt;
  &lt;/ol&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(&quot;li:first-child&quot;).css(&quot;background-color&quot;, &quot;green&quot;);
  &lt;/script&gt;
&lt;/body&gt;

Copier après la connexion

:sélecteur de filtre de sous-élément du dernier enfant

a la fonction opposée de :sélecteur de filtre de sous-élément du premier enfant , :last La fonction du sélecteur de filtre d'élément enfant -child est d'obtenir le dernier élément enfant renvoyé dans chaque élément parent. Il s'agit également d'une collection et est couramment utilisée pour le traitement de sélection de plusieurs données de collection.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn