关于jQuery_属性选择器的介绍和基本使用

最新推荐文章于 2024-04-22 21:52:14 发布

NewBurlaSKing

最新推荐文章于 2024-04-22 21:52:14 发布

阅读量857

点赞数

分类专栏： jQuery 文章标签： html 前端 jquery javascript

本文链接：https://blog.csdn.net/qq_55961861/article/details/126375192

版权

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jQuery_属性选择器

一.属性选择器介绍

Attribute Selector [name="value"]

选择指定属性是给定值的元素

Attribute Selector [name|="value"]

选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素

Attribute Selector [name*="value"]

选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）

Attribute Selector [name~="value"]

选择指定属性用空格分隔的值中包含一个给定值的元素

Attribute Selector [name$="value"]

选择指定属性是以给定值结尾的元素。这个比较是区分大小写的

Attribute Selector [name^="value"]

选择指定属性是以给定字符串开始的元素

二.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div>
        <input type="radio" name="user" value="name">
        <span>name</span>
    </div>
    <div>
        <input type="radio" name="user" value="age">
        <span>age</span>
    </div>
    <a href="#" alt="aa">aa</a>
    <a href="#" alt="aa-bb">aa-bb</a>
    <a href="#" alt="aabb">aabb</a>
    <br>
    <a href="#" alt="xx">xx</a>
    <a href="#" alt="xx-yy">xx-yy</a>
    <a href="#" alt="xxyzyy">xxyzyy</a>
    <br>
    <input type="text" name="user" value="aabb">
    <input type="text" name="user" value="abab">
    <input type="text" name="user" value="aa bb">
    <br>
    <input type="text" name="user" value="abab">
    <input type="text" name="user" value="abcbb">
    <input type="text" name="user" value="ac ba">
    <br>
    <input type="text" name="user" value="cc dd">
    <input type="text" name="user" value="ccdd">
    <input type="text" name="user" value="dc cd">
    <script>
        // 将name改成username,age变成userage
        // next方法可以获取当前元素节点的下一个元素
        $('input[value="name"]').next().html('username');
        $('input[value="age"]').next().html('userage');
        
        // 给aa和aa-bb添加一个边框
        $('a[alt|="aa"]').css('border','2px solid red');

        // 给所有a标签含有yy的标签添加一个边框
        $('a[alt*="yy"]').css('border','2px solid aqua');

        // 将所有input标签中属性value值开头为aa的添加一个边框
        $('input[value^="aa"]').css('border','2px solid red');

        // 将所有input标签中属性value值结尾为bb的添加一个边框
        $('input[value$="bb"]').css('border','2px solid red');

        // 将所有input标签中属性value值有cc并且以空格分开的标签添加一个边框
        $('input[value~="cc"]').css('border','2px solid red');
    </script>
</body>
</html>