jquery选择器之属性选择器

最新推荐文章于 2022-01-24 07:00:00 发布

转载最新推荐文章于 2022-01-24 07:00:00 发布 · 928 阅读

本文深入探讨了HTML属性选择器的概念及其在实际应用中的多种用法，包括基本用法、等值匹配、非等值匹配、前缀匹配、后缀匹配、包含匹配以及复合属性选择器。并通过一个具体实例展示了如何利用这些选择器来筛选和操作网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性选择器中的类别：

1、[attribute] 匹配包含给定属性的元素例：查找所有含id属性的div元素；$("div[id]");

2、[attribute=value] 匹配给定的属性是某个特定值的元素例：查找所有name属性是newsletter的input元素：$("input[name="newsletter"]").attr("checked",true);

3、[attribute!=value] 匹配给定的属性是不包含某个特定值的元素例：查找所有name属性不是newsletter的input元素：$("input[name!='newsletter']").attr("checked",true);

4、[attribute^=value] 匹配给定的属性是以某些值开始的元素例：$("input[name^='news']");

5、[attribute$=value] 匹配给定的属性是以某些值结尾的元素例：查找 name 以“letter”结尾的input元素：$("input[name$='letter']")

6、[attribute*=value] 匹配给定的属性是以包含某些值的元素例：查找所有name包含‘man’的input元素：$("input[name*='man']")

7、[attributeFilter1][attributeFilter2][attributeFilterN] 复合属性选择器，需要同时满足多个条件时使用。例：查找所有含有id属性，并且它的name属性是以man结尾：$("input[id][name$='man']")

网页实例（参考）：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css"> 
    div
    {
        width:200px; height:100px; border:2px solid red; background-color:#eee;
        }
        img
        {
            width:200px; height:200px;
            }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                var sum = $('[title]');
                for (var i = 0; i < sum.length; i++) {
                alert(sum[i].nodeName);
                }


                $('div[title]').css('background-color', 'blue'); //获取所有div中具有titile属性的元素
                $('div[title=t2]').css('background-color', 'blue'); //获取所有div中title等于t2的元素
                $('div[title!=t2]').css('background-color', 'blue'); //获取所有div中title不等于t2的元素
                $('div[title^=t]').css('background-color', 'blue');//获取所有div中title属性开头是t的元素
                $('div[title$=2]').css('background-color','blue')//获取所有div中title属性包含2的元素
                $('div[title*=s]').css('background-color', 'blue');//获取所有div中title属性结尾是s的元素
                $('div[title^=t][title$=4]').css('background-color','blue');//获取所有title属性开头是t，结尾是4的元素
            })
        })
    </script>
</head>
<body>
<div id="t1" title="t1">第一层</div>
<div title="t2">第二层</div>
<div id="div3" title="r3s">第三层</div>
<div id="div4" title="r4">第四层</div>
<img src="beijing.jpg" />
<input type="button" id="btn1" value="提交" />
</body>
</html>