Maison > interface Web > Questions et réponses frontales > le filtre d'attribut jquery ne contient pas

le filtre d'attribut jquery ne contient pas

PHPz
Libérer: 2023-05-18 17:55:38
original
1098 Les gens l'ont consulté

Lors de l'apprentissage et de l'utilisation de jQuery, les sélecteurs d'attributs sont un type de sélecteur très important. Les sélecteurs d'attributs peuvent filtrer les éléments en fonction de leurs valeurs d'attribut. Les valeurs courantes incluent égal à, différent de, contient et ne contient pas.

Cependant, parmi les filtres d'attributs, le filtre qui n'inclut pas ne semble pas être aussi couramment utilisé que les autres filtres d'attributs. Le filtre d'exclusion est un filtre relativement complexe qui nous oblige à saisir un sélecteur spécifique à filtrer. Dans cet article, nous explorerons le filtre d'exclusion dans jQuery et son utilisation.

1. Syntaxe qui n'inclut pas les filtres d'attributs

La syntaxe d'exclusion des filtres d'attributs est similaire à la syntaxe des autres filtres d'attributs, mais vous devez utiliser des deux-points : entre crochets. Sa forme générale est la suivante :

$('selector:not([attribute!=value])'); $('selector:not([attribute!=value])');

这个选择器使用了not()方法,它将筛选器包裹起来并排除了所有满足选择器的元素。我们可以在方括号内使用一个或多个属性、值和运算符。

如果我们不希望元素匹配一个特定的属性值,则可以使用不包含的筛选器。在方括号内使用一个感叹号!,跟随一个等号=。在等号后面的引号内,我们可以编写我们不希望匹配的属性值。

二、不包含属性筛选器的使用

为了更好地理解不包含属性筛选器,让我们看一些具体的例子。

我们有如下的HTML代码:

    <div class="example" data-value="9"></div>
    <div class="example" data-value="10"></div>
    <div class="example" data-value="12"></div>
Copier après la connexion

现在,我们希望在这些元素中,只选择那些data-value属性的值不包含“5”的元素。我们可以使用以下代码来实现:

$('.example:not([data-value="5"])');

这将给我们返回data-value属性为9、10和12的三个元素。这是因为5是我们不想要的属性值,not()方法将匹配的结果反转,并返回我们想要的元素。

接下来,我们可以使用其他的属性和运算符来扩展这个选择器。例如,我们可以使用<运算符来选择data-value属性小于十的元素:

$('.example:not([data-value<"10"])');

Ce sélecteur utilise la méthode not(), qui enveloppe le filtre et exclut tous les éléments qui satisfont le sélecteur. Nous pouvons utiliser une ou plusieurs propriétés, valeurs et opérateurs entre crochets.

Si nous ne voulons pas que les éléments correspondent à une valeur d'attribut spécifique, nous pouvons utiliser un filtre d'exclusion. Utilisez un point d'exclamation ! entre crochets, suivi d'un signe égal =. Entre les guillemets après le signe égal, nous pouvons écrire des valeurs d'attribut auxquelles nous ne voulons pas correspondre.

2. Utilisation de filtres d'attributs qui n'incluent pas

Afin de mieux comprendre les filtres d'attributs qui n'incluent pas, regardons quelques exemples spécifiques.

Nous avons le code HTML suivant : 🎜rrreee🎜Maintenant, nous voulons sélectionner uniquement les éléments dont l'attribut data-value ne contient pas "5" parmi ces éléments. Nous pouvons utiliser le code suivant pour y parvenir : 🎜🎜 $('.example:not([data-value="5"])'); 🎜🎜Cela nous renverra la valeur des données. attribut comme Les trois éléments de 9, 10 et 12. En effet, 5 est la valeur d'attribut que nous ne voulons pas et la méthode not() inverse le résultat correspondant et renvoie l'élément souhaité. 🎜🎜Ensuite, nous pouvons étendre ce sélecteur avec d'autres attributs et opérateurs. Par exemple, nous pouvons utiliser l'opérateur < pour sélectionner les éléments dont l'attribut data-value est inférieur à dix : 🎜🎜 $('.example:not([data-value<"10"])'); /code> 🎜🎜Cela sélectionnera les éléments avec des attributs de valeur de données de 9 et 5 au lieu de 10 et 12. 🎜🎜3. Résumé🎜🎜Le filtre sans attribut est un sélecteur très utile, qui peut nous aider à écrire rapidement du code pour filtrer les éléments souhaités. Bien que ce soit un peu compliqué, tant que vous comprenez la syntaxe et l'utilisation de base, vous pouvez exploiter sa puissance pour rendre votre code plus concis et plus facile à lire. 🎜🎜Avant d'écrire des sélecteurs jQuery, assurez-vous de bien comprendre la syntaxe et l'utilisation, et testez votre code pour vous assurer qu'il fonctionne correctement. Merci d'avoir lu cet article, nous espérons qu'il vous sera utile lors de l'écriture de code jQuery. 🎜

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!

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal