Jquery(八) 属性过滤

来源：互联网发布：淘宝店家如何开通花呗编辑：程序博客网时间：2024/05/25 19:56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> jQuery过滤器 属性过滤</title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">    <style type="text/css">    span,div{        width:200px;        height:200px;        background:#aaa;        margin-right:10px;        border:1px solid black;        float:left;    }      .bgRed{        width:55px;        height:80px;        font-size:14px;        margin-left:5px;        margin-bottom:5px;    }</style><script type="text/javascript" src="jquery-1.6.4.min.js"></script><script type="text/javascript">    $(document).ready(function(){        //手动重置        $("#but").click(function(){            $("*").removeAttr("style");        });        //添加动画        function demo(){            $("#s01").slideToggle("slow",demo);        }        demo();        //<input type="button" id="but2" value="含有属性title 的div元素."/>        $("#but2").click(function(){            $("div[title]").css("background","red");        });        //<input type="button" id="but3" value="属性title值等于'test'的div元素."/>        $("#but3").click(function(){            $("div[title='test']").css("background","red");        });        //<input type="button" id="but4" value="属性title值不等于'test'的div元素(没有属性title的也将被选中)."/>        $("#but4").click(function(){            $("div[title!='test']").css("background","red");        });        //<input type="button" id="but5" value="属性title值 以'te'开始 的div元素."/>        $("#but5").click(function(){            $("div[title^='te']").css("background","red");        });        //<input type="button" id="but6" value="属性title值 以'est'结束 的div元素."/>        $("#but6").click(function(){            $("div[title$='est']").css("background","red");        });        //<input type="button" id="but7" value="属性title值 含有'es'的div元素."/>        $("#but7").click(function(){            $("div[title*='es']").css("background","red");        });        //<input type="button" id="but8" value="选取有属性id的div元素，然后在结果中选取属性title值含有'es'的 div 元素."/>        $("#but8").click(function(){            $("div[id][title*='es']").css("background","red");        });    });</script> </head> <body>    <input type="button" id="but" value="手动重置"/>    <input type="button" id="but2" value="含有属性title 的div元素."/>    <input type="button" id="but3" value="属性title值等于'test'的div元素."/>    <input type="button" id="but4" value="属性title值不等于'test'的div元素(没有属性title的也将被选中)."/>    <input type="button" id="but5" value="属性title值 以'te'开始 的div元素."/>    <input type="button" id="but6" value="属性title值 以'est'结束 的div元素."/>    <input type="button" id="but7" value="属性title值 含有'es'的div元素."/>    <input type="button" id="but8" value="选取有属性id的div元素，然后在结果中选取属性title值含有'es'的 div 元素."/>   <p></p>  <div class="one" id="one">    class为one id为one的div    <div class="bgRed">class为bgRed的div</div>  </div>  <div class="one">    class为one的div    <div class="bgRed">class为bgRed的div</div>    <div class="bgRed">class为bgRed的div</div>    <div class="bgRed">class为bgRed的div</div>    <div class="bgRed"></div>  </div>  <div class="one">    class为one的div    <div class="bgRed">class为bgRed的div</div>    <div class="bgRed">class为bgRed的div</div>    <div class="bgRed">class为bgRed的div</div>    <div class="bgRed" title="tesst">class为bgRed title为tesst的div</div>  </div>  <div class="one" id="two" title="test">    class为one id为two title为test的div    <div class="bgRed" title="other">class为bgRed title为other的div</div>    <div class="bgRed" title="test">class为bgRed title为test的div</div>  </div>  <!--隐藏-->  <div style="display:none"></div>  <span id="s01">正在执行的动画</span> </body></html>
0 0