Maison > Article > interface Web > Qu'est-ce que le sélecteur d'attribut dans jquery

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

青灯夜游original: 2023-03-10 19:15:231773parcourir

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.

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="按钮" />

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]")

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

$("input[type = &#39;checkbox&#39;]")

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

$("input[type != &#39;checkbox&#39;]")

选取class属性包含nav的div元素（class属性可以包含多个值）：

$("div[class *= &#39;nav&#39;]")

选取class属性以nav开头的div元素，例如：

<div class="nav-header"></div>：
$("div[class ^= &#39;nav&#39;]")

选取class属性以nav结尾的div元素，例如：

<div class="first-nav"></div>：
$("div[class $= &#39;nav&#39;]")

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

<div id="container" class="nav-header"></div>：
$("div[id][class ^=&#39;nav&#39;]")

代码示例

<!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>

[attribute] 属性名选择器

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

var a=$(&#39;[id]&#39;);
console.log(a);

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