Jquery(八) 属性过滤

最新推荐文章于 2021-11-11 19:54:49 发布

海绵娃娃

最新推荐文章于 2021-11-11 19:54:49 发布

阅读量618

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/oneqinglong/article/details/71108203

版权

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

收藏

觉得还不错? 一键收藏
0
评论
Jquery(八) 属性过滤

<!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"> <me
复制链接

扫一扫