您的位置：首页 > Web前端 > JQuery

jquery选择器之属性选择器

2013-11-20 14:16 489 查看

属性选择器中的类别：

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] view
plaincopy

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

转载于：ling811

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 属性选择器 jquery

相关文章推荐

新的分享

章节导航