Qu'est-ce que le sélecteur d'attribut dans jquery-Questions et réponses frontales-php.cn

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 src="style="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!

Étiquettes associées：

javascript jquery

source：php.cn

Article précédent：Comment définir la couleur de la police en HTML Article suivant：Quels sont les événements focus jquery ?

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

Derniers articles par auteur