程序博客网 > 用js表示阶层1加阶层2

JQuery 属性过滤选择器

来源：互联网发布：用js表示阶层1加阶层2 编辑：程序博客网时间：2024/04/30 09:09

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>属性过滤选择器</title>
    <style type="text/css">
        div{width:200px;border:1px solid red;margin:10px auto;}
    </style>
    <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
            //==========举例1================
            //: $("div[id]") ;   说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
            //showElements($("div[id]"));

            //==========举例2================
            //$("div[myTag]='tt2')   匹配给定的属性是某个特定值的元素
            //匹配div中myTag属性为tt2的div
            //alert($("div[myTag='tt2']").attr("myTag"));     //注意中括号的结束位置

            //==========举例3================
            //[attribute!=value]
            //用法: $(”input[name!='newsletter']“).attr(”checked”, true);    返回值集合元素
            //说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.
            //此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,
            //请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.
            //...<1> 查找div中myTag属性不为tt1的所有div 会找到两个
            //showElements($("div[myTag!='tt1']"));
            //...<2> 查找div中包含myTag属性，并且myTag属性不等于tt1的div
            //showElements($("div[myTag]:not([myTag='tt1'])"));   //注意中括号和括号的方式

            //==========举例4================
            //[attribute^=value] 匹配给定的属性是以某些值开始的元素
            //...<1>查找myTag属性以tt2开头的所有div
            //showElements($("div[myTag^='tt2']"));

            //==========举例5================
            //[attribute$=value] 匹配给定的属性是以某些值结尾的元素.
            //...<1>查找myTag属性以3结尾的所有div
            //showElements($("div[myTag$='3']"));

            //==========举例6================
            //[attribute*=value] 匹配给定的属性是以包含某些值的元素.
            //...<1>查找myTag属性包含tt的所有div
            //showElements($("div[myTag*='tt']"));

            //==========举例7================
            //用法: $(”input[id][name$=‘man’]“) 返回值集合元素
            //复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.
            //这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.
            //...<1>查找包含id属性，并且myTag属性不为tt2的所有div
            //showElements($("div[id][myTag!='tt2']"));
        });

        function showElements(elements) {
            var output = "";
            for (var i = 0; i < elements.length; i++) {
                if (output == "") {
                    output = elements.eq(i).html();
                }
                else {
                    output += "\r\n" + elements.eq(i).html();
                }
            }
            alert(output);
        }
    </script>
</head>
<body>
    <div>我是没有id的DIV</div>
    <div id="div1" myTag="tt1">我是id为div1的DIV myTag为tt1</div>
    <div id="div2" myTag="tt2">我是id为div2的DIV myTag为tt2</div>
    <div id="div3" myTag="tt23">我是id为div2的DIV myTag为tt23</div>
    <div id="div4" myTag="tt33">我是id为div2的DIV myTag为tt33</div>
</body>
</html>

用js表示阶层1加阶层2

用js表示阶层1加阶层2

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子南康房地产网赣州南康家具批发市场南康家具排名南康房地产信息网 2015南康家具博览会南康橡木餐桌椅江西南康物流南康白坯家具南康木材加工厂南康实木沙发厂家南康南山森林公园南康招聘信息南康布艺沙发南康国际酒店南康汽车东站时刻表江西赣州南康房价江西南康实木家具厂南康教师招聘江西南康旅游南康做什么生意好南康新华医院南康江夏人才网赣州到南康家具城南康橡木沙发厂南康有哪些批发市场南康家具怎么样南康国际大酒店赣州南康家具南康品牌家具南康大理石茶几博山江西省赣州市南康区 2008年湘江浮尸南康白起张继龙博客埋怨南康等你到三十五岁by南康张继龙博客埋怨南康事件等你到三十五岁南康白起我等你到三十五岁南康白起南开南开校庆南开分数线