为了账号安全,请及时绑定邮箱和手机立即绑定

为什么没有效果

<!DOCTYPE html>

<html>


<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

</head>


<body>

    <h2>属性筛选选择器</h2>

    <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>

    <div class="left" testattr="true" >

        <div class="div" testattr="true" name='p1'>

            <a>[att=val]</a>

        </div>

        <div class="div" testattr="true" p2>

            <a>[att]</a>

        </div>

        <div class="div" testattr="true" name="-">

            <a>[att|=val]</a>

        </div>

        <div class="div" testattr="true" name="a b">

            <a>[att~=val]</a>

        </div>

    </div>


    <script type="text/javascript">

         //查找所有div中,属性name=p1的div元素

         $('div[name=p1]').css("border", "3px groove red"); 

    </script>


    <script type="text/javascript">

        //查找所有div中,有属性p2的div元素

        $('div[p2]').css("border", "3px groove blue"); 

    </script>


    <script type="text/javascript">

        //查找所有div中,有属性name中的值只包含一个连字符“-”的div元素

        $('div[name|=-]').css("border", "3px groove #00FF00"); 

    </script>


    <script type="text/javascript">

        //查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素

        $('div[name~="a"]').css("border", "3px groove #668B8B"); 

    </script>



    <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>

    <div class="left" testattr="true" >

        <div class="div" testattr="true"  name='imooc-aaorn'>

            <a>[att^=val]</a>

        </div>

        <div class="div" testattr="true"  name='aaorn-imooc'>

            <a>[att$=val]</a>

        </div>

        <div class="div" testattr="true"  name="attr-test-selector">

            <a>[att*=val]</a>

        </div>

        <div class="div" name="a b">

            <a>[att!=val]</a>

        </div>

    </div>



    <script type="text/javascript">

         //查找所有div中,属性name的值是用imooc开头的

         $('div[name^=imooc]').css("border", "3px groove red"); 

    </script>


    <script type="text/javascript">

         //查找所有div中,属性name的值是用imooc结尾的

         $('div[name$=imooc]').css("border", "3px groove blue"); 

    </script>


    <script type="text/javascript">

        //查找所有div中,有属性name中的值包含一个test字符串的div元素

        $('div[name*="test"]').css("border", "3px groove #00FF00"); 

    </script>


    <script type="text/javascript">

        //查找所有div中,有属性testattr中的值没有包含"true"的div

        $('div[testarttr!="true"]').css("border", "3px groove #668B8B"); 

    </script>



</body>


</html>


正在回答

2 回答

<script type="text/javascript">

        //查找所有div中,有属性testattr中的值没有包含"true"的div

        $('div[testarttr!="true"]').css("border", "3px groove #668B8B"); 

    </script>

这里$('div[testarttr!="true"]')多了一个'r'应该是$('div[testattr!="true"]')

0 回复 有任何疑惑可以回复我~
//查找的关键词需要打引号    
$('div[name|="-"]').css("border", "3px groove #00FF00");

效果是出了的,只是

$('div[testarttr!="true"]').css("border", "3px groove #668B8B");

这句代码加的边框把前面的覆盖了,你把这句注释了就能看到前面的效果

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么没有效果

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信