• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

2.4 属性选择器

在HTML文档中,元素通常包含很多属性(attribute)。在jQuery中,除了直接使用id和class属性作为选择器之外(也就是之前我们讲解的“id选择器”和“class”选择器),还可以把各种属性作为选择器,这就是我们所说的属性选择器。

在jQuery中,常见的属性选择器如下:

jQuery属性选择器
选择器 说明
$("selector[attr]") 选择包含给定属性的元素
$("selector[attr='value']") 选择给定的属性是某个特定值的元素
$("selector[attr != 'value']") 选择所有含有指定的属性,但属性不等于特定值的元素
$("selector[attr *= 'value']") 选择给定的属性是以包含某些值的元素
$("selector[attr ^= 'value']") 选择给定的属性是以某些值开始的元素(比较少用)
$("selector[attr $= 'value']") 选择给定的属性是以某些值结尾的元素(比较少用)
$("selector[selector1][selector2]…[selectorN]") 复合属性选择器,需要同时满足多个条件时使用

:selector指的是选择器,attr指的是属性(attribute),value指的是属性值。

jQuery的属性选择器使得选择器具有通配符的功能。可以说,属性选择器这是一类参考正则表达式来设计的选择器。

下面我们通过一些简单实例来深入学习。

(1)选择含有class属性的div元素。

 
$("div[class]")

(2)选择type属性值为checkbox的input元素(也就是选择所有复选框元素):

 
$("input[type = 'checkbox']")

(3)选择type属性值不是checkbox的input元素:

 
$("input[type != 'checkbox']")

(4)选择class属性包含nav的div元素(因为class属性可以包含多个值):

 
$("div[class *= 'nav']")

(5)选择name属性以group开始的input元素,例如<input type="radio" name="group-fruit"/>:

 
$("input[name ^= 'group']")

(6)选择name属性以group结尾的input元素,例如<input type="radio" name="fruit-group"/>:

 
$("input[name $= 'group']")

(7)选择具有id属性并且class属性是以nav开头的div元素,例如<div id="div1" class="lvye-div">绿叶学习网</div>:

 
$("div[id][class ^='lvye']")

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[type='checkbox']").attr("checked", "checked");
        })
    </script>
</head>
<body>
    <h3>你喜欢的水果是:</h3>
    <div id="list">
        <label><input type="checkbox" />:苹果</label>
        <label><input type="checkbox" />:西瓜</label>
        <label><input type="checkbox" />:蜜桃</label>
        <label><input type="checkbox" />:梨子</label>
        <label><input type="checkbox" />:香蕉</label>
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

$("input[type='checkbox']")表示选取type属性值为checkbox的所有input元素,也就是选取所有的复选框。$("input[type='checkbox']").attr("checked", "checked")表示把所有复选框的checked属性值设置为checked(即被选中)。

在这个例子中,我们只需要学习属性选择器这种选择方式就行了,对于attr()方法不需要去了解,我们在后续课程会详细讲解到。

属性选择器很好理解,就是选取具有某些属性的元素。其实我们也可以把“id选择器”和“class”选择器当做是特殊的属性选择器。

 
$("#lvye")             //id选择器
$("[id = 'lvye']")     //属性选择器
 
$(".lvye ")            //class选择器
$("[class = 'lvye']")  //属性选择器

上面这2组表达式其实是等价的。此外,大家要注意一点:在jQuery中,属性选择器最常见于表单操作。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部