Maison interface Web Questions et réponses frontales Qu'est-ce que le sélecteur d'attribut dans jquery

Qu'est-ce que le sélecteur d'attribut dans jquery

Mar 10, 2023 pm 07:15 PM
javascript jquery

Dans jquery, le sélecteur d'attributs est un sélecteur basé sur les attributs d'élément comme conditions de filtre. Il fait référence à un moyen de sélectionner des éléments via les "attributs de l'élément" ; ce sélecteur peut trouver des éléments avec des attributs spécifiques ou des valeurs d'attribut spécifiques. , c'est-à-dire que vous pouvez faire correspondre des éléments HTML via des noms d'attributs ou des valeurs d'attributs existants, puis opérer sur des éléments HTML avec des attributs spécifiés. Le sélecteur d'attribut jQuery fait fonctionner le sélecteur comme un caractère générique, un peu comme une expression régulière.

Qu'est-ce que le sélecteur d'attribut dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6, ordinateur Dell G3.

Introduction au sélecteur d'attributs jquery

Le sélecteur d'attributs jQuery est un sélecteur basé sur les attributs d'éléments comme conditions de filtre.

Le sélecteur d'attribut fait référence à un moyen de sélectionner des éléments via les "attributs de l'élément". Les sélecteurs d'attributs peuvent rechercher des éléments avec des attributs ou des valeurs d'attribut spécifiques, c'est-à-dire qu'ils peuvent faire correspondre des éléments HTML via des noms d'attribut ou des valeurs d'attribut existants, puis opérer sur des éléments HTML avec des attributs spécifiés.

Nous savons tous quels sont les attributs des éléments. L'identifiant, le type et la valeur dans le code ci-dessous sont les attributs de l'élément d'entrée.

<input id="btn" type="button" value="按钮" />
Copier après la connexion

Dans jQuery, les sélecteurs d'attributs communs sont tels qu'indiqués dans le tableau. Où E fait référence à l'élément, attr fait référence à l'attribut (attr) et value fait référence à la valeur de l'attribut. Sélecteur d'attribut jQuery ]

Sélectionnez l'élément E, où la valeur de l'attribut attr de l'élément E est valueE[attr!= "value"]Sélectionnez l'élément E, où la valeur de l'attribut attr de l'élément E n'est pas une valeurE[attr ^= « valeur »]Sélectionnez l'élément E, où la valeur de l'attribut attr de l'élément E est n'importe quel caractère commençant par « valeur » E[attr $= « valeur » ]Sélectionnez l'élément E, où la valeur de l'attribut attr de l'élément E est n'importe quel caractère se terminant par "value"E[attr *= "value"]Sélectionnez l'élément E, où la valeur de l'élément E L'attribut attr de l'élément E est un caractère qui contient "value" "Tout caractère E[attr |= "value"]Sélectionnez l'élément E, où la valeur de l'attribut attr de l'élément E est égale à "value " ou commence par "value" E[attr ~= "value"]Sélectionnez l'élément E, où la valeur de l'attribut attr de l'élément E est égale à "value" ou contient "value"[ selector1][selector2][selectorN]Sélecteur multi-attributs (dispositif de sélection d'intersection d'attributs)

jQuery这些属性选择器使得选择器具有通配符的功能,有点正则表达式的感觉。下面我们通过一些简单实例来认识一下。

选取含有class属性的div元素:

$("div[class]")
Copier après la connexion

选取type取值为checkbox的input元素:

$("input[type = &#39;checkbox&#39;]")
Copier après la connexion

选取type取值不是checkbox的input元素:

$("input[type != &#39;checkbox&#39;]")
Copier après la connexion

选取class属性包含nav的div元素(class属性可以包含多个值):

$("div[class *= &#39;nav&#39;]")
Copier après la connexion

选取class属性以nav开头的div元素,例如:

<div class="nav-header"></div>:
$("div[class ^= &#39;nav&#39;]")
Copier après la connexion

选取class属性以nav结尾的div元素,例如:

<div class="first-nav"></div>:
$("div[class $= &#39;nav&#39;]")
Copier après la connexion

选取带有id属性并且class属性是以nav开头的div元素,例如:

<div id="container" class="nav-header"></div>:
$("div[id][class ^=&#39;nav&#39;]")
Copier après la connexion

代码示例

<!DOCTYPE style="color:rgb(73 238 255)">html>
<style="color:rgb(73 238 255)">html>

<style="color:rgb(73 238 255)">head lang="style="color:rgb(255 95 0)">zh-CN">
    <style="color:rgb(73 238 255)">meta charset="style="color:rgb(255 95 0)">UTF-8">
    <style="color:rgb(73 238 255)">meta name="style="color:rgb(98 189 255)">viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <style="color:rgb(255 95 0)">title>多项选择器</style="color:rgb(255 95 0)">title>
    <style></style>
</style="color:rgb(73 238 255)">head>

<body>
    <section>
        <ul id="style="color:rgb(255 111 119)">one" class="style="color:rgb(98 189 255)">eukaryotes_animal">
            <li>猴子</li>
            <li>猛犸</li>
            <li>猩猩</li>
        </ul>
        <ul id="style="color:rgb(255 111 119)">two" class="style="color:rgb(98 189 255)">eukaryotes_plant">
            <li>牡丹</li>
            <li>樱花</li>
            <li>仙人掌</li>
        </ul>
        <ul id=&#39;three&#39; class="style="color:rgb(98 189 255)">prokaryotes_microbe">
            <li>细菌</li>
            <li>蓝细菌</li>
            <li>放线菌</li>
            <li>支原体</li>
        </ul>
    
    </section>
    <script color:rgb(255 95 0)">https://style="color:rgb(255 111 119)">cdn.style="color:rgb(253 97 106)">bootcss.com/style="color:rgb(255 211 0)">jquery/3.3.1/style="color:rgb(255 211 0)">jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //此处填写代码


        });
    </script>
</body>

</style="color:rgb(73 238 255)">html>
Copier après la connexion

[attribute] 属性名选择器

选择拥有该属性名的元素。

var a=$(&#39;[id]&#39;);
console.log(a);
Copier après la connexion

选中了示例中所有拥有id属性的元素

Quest-ce que le sélecteur dattribut dans jquery

[attribute=value]属性值选择器

选择属性值为某个特定值的元素。

var a=$(&#39;[id=one]&#39;);
console.log(a);
Copier après la connexion

选中了示例中id=one的元素

Quest-ce que le sélecteur dattribut dans jquery

[attribute!=value]非属性值选择器

选择所有属性值不为特定值的元素(包括没有该属性的元素)

var a=$(&#39;[class!=eukaryotes_animal]&#39;);
console.log(a);
Copier après la connexion

除了ul#one.eukaryotes_animal没有选中外,包括它的子元素在内的其他元素均在选择范围内。

Quest-ce que le sélecteur dattribut dans jquery

[attribute^=value]属性值以某个字符串开头的选择器

var a=$(&#39;[class^=eukaryotes]&#39;);
console.log(a);
Copier après la connexion

Quest-ce que le sélecteur dattribut dans jquery

[attribute$=value]属性值以某个字符串结尾的选择器

var a=$(&#39;[class$=plant]&#39;);
console.log(a);
Copier après la connexion

Quest-ce que le sélecteur dattribut dans jquery

[attribute*=value]属性值中包含某个字符串的选择器

var a=$(&#39;[class*=yotes_m]&#39;);
console.log(a);
Copier après la connexion

Quest-ce que le sélecteur dattribut dans jquery

[selector1][selector2][selectorN] 多属性选择器(属性交集选择器)

var a=$(&#39;[class^=eukaryotes_][id]&#39;);
console.log(a);
Copier après la connexion

Quest-ce que le sélecteur dattribut dans 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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide Feb 27, 2024 pm 06:45 PM

Explication détaillée de la méthode de référence jQuery : Guide de démarrage rapide jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement de sites Web. Elle simplifie la programmation JavaScript et fournit aux développeurs des fonctions et fonctionnalités riches. Cet article présentera en détail la méthode de référence de jQuery et fournira des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement. Présentation de jQuery Tout d'abord, nous devons introduire la bibliothèque jQuery dans le fichier HTML. Il peut être introduit via un lien CDN ou téléchargé

Comment utiliser la méthode de requête PUT dans jQuery ? Comment utiliser la méthode de requête PUT dans jQuery ? Feb 28, 2024 pm 03:12 PM

Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u

Comment supprimer l'attribut height d'un élément avec jQuery ? Comment supprimer l'attribut height d'un élément avec jQuery ? Feb 28, 2024 am 08:39 AM

Comment supprimer l'attribut height d'un élément avec jQuery ? Dans le développement front-end, nous rencontrons souvent le besoin de manipuler les attributs de hauteur des éléments. Parfois, nous pouvons avoir besoin de modifier dynamiquement la hauteur d'un élément, et parfois nous devons supprimer l'attribut height d'un élément. Cet article explique comment utiliser jQuery pour supprimer l'attribut height d'un élément et fournit des exemples de code spécifiques. Avant d'utiliser jQuery pour exploiter l'attribut height, nous devons d'abord comprendre l'attribut height en CSS. L'attribut height est utilisé pour définir la hauteur d'un élément

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Feb 28, 2024 pm 09:06 PM

Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : &lt

Utilisez jQuery pour modifier le contenu textuel de toutes les balises Utilisez jQuery pour modifier le contenu textuel de toutes les balises Feb 28, 2024 pm 05:42 PM

Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :

Comprendre le rôle et les scénarios d'application de eq dans jQuery Comprendre le rôle et les scénarios d'application de eq dans jQuery Feb 28, 2024 pm 01:15 PM

jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer la manipulation DOM et la gestion des événements dans les pages Web. Dans jQuery, la méthode eq() est utilisée pour sélectionner des éléments à une position d'index spécifiée. Les scénarios d'utilisation et d'application spécifiques sont les suivants. Dans jQuery, la méthode eq() sélectionne l'élément à une position d'index spécifiée. Les positions d'index commencent à compter à partir de 0, c'est-à-dire que l'index du premier élément est 0, l'index du deuxième élément est 1, et ainsi de suite. La syntaxe de la méthode eq() est la suivante : $("s

Comment savoir si un élément jQuery possède un attribut spécifique ? Comment savoir si un élément jQuery possède un attribut spécifique ? Feb 29, 2024 am 09:03 AM

Comment savoir si un élément jQuery possède un attribut spécifique ? Lorsque vous utilisez jQuery pour exploiter des éléments DOM, vous rencontrez souvent des situations dans lesquelles vous devez déterminer si un élément possède un attribut spécifique. Dans ce cas, nous pouvons facilement implémenter cette fonction à l'aide des méthodes fournies par jQuery. Ce qui suit présentera deux méthodes couramment utilisées pour déterminer si un élément jQuery possède des attributs spécifiques et joindra des exemples de code spécifiques. Méthode 1 : utilisez la méthode attr() et l'opérateur typeof // pour déterminer si l'élément a un attribut spécifique

Résumé des fonctions d'opération de fichiers couramment utilisées en PHP Résumé des fonctions d'opération de fichiers couramment utilisées en PHP Apr 03, 2024 pm 02:52 PM

Exemple 1:basename()2:copy()3:dirname()4:disk_free_space()5:disk_total_space()6:file_exists()7:file_get_contents()8:file_put_contents()9:filesize()10:filetype( )11:glob()12:is_dir()13:is_writable()14:mkdir()15:move_uploaded_file()16:parse_ini_file()17:

See all articles