第二十节（jquery筛选）

浏览数：53 / 时间：2015年06月09日

1：find筛选
例题为筛选加样式
<body>
  <div>111</div>
  <span>222</span>
  <p>333</p>
  
  <div id="test">
    <div class="green">4444</div>
    <div class="green">6666</div>
    <span>5555</span>
    <span class="green">9999</span>
  </div>
  
  <div class="green">7777</div>

  <script type="text/javascript">
    
      $(function(){
         /*$("body").find("div").each(function(){
            alert($(this).html());
         });*/

         //$("p,div,.green").css("background","green");
         //$(".green","#test") ==$("#test").find(".green");
         //$("#test .tm")
         var spanHtml = $("#test").find(".tm").html();
         var length = $("#test .green span").length;

         $("#test .green").css("background","red");

      });
  </script>
 </body>

2：first last eq筛选

<body>

  <div>11</div>
  <div>22</div>
  <div>33</div>
  <span>44</span>
  <script type="text/javascript">
    $(function(){
        //:first :last
        alert("方式:first："+$("div:first").html());
        alert("方式:last："+$("div:last").html());

        //first() last()
        alert("方式:first()："+$("div").first().html());
        alert("方式:last()："+$("div").last().html());
        
        //eq
        alert("方式:eq()："+$("div").eq(0).html());
        alert("方式:eq()："+$("div").eq(2).html());
        //:eq
        alert("方式:eq："+$("div:eq(0)").html());
        alert("方式:eq："+$("div:eq(2)").html());

    });
  </script>
 </body>

3：删除 及parents()  closest()的比较
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  <title>Document</title>
  <style>
    .gfather{width:640px;height:100px;border:1px solid red;margin-top:5px;}
  </style>
 </head>
 <body>
 <div class="gggather">    
      <div class="gfather">
            <div id="father" class="father">22父亲
                <span id="span">1111</span>
                <span>222</span>
                <p>333</p>
                <a href="javascript:void(0)" onclick="tm_delete(this)">删除</a>
            </div>
       </div>

       <div class="gfather">
            <div id="father" class="father">22父亲
                <span id="span">1111</span>
                <span>222</span>
                <p>333</p>
                <a href="javascript:void(0)" onclick="tm_delete(this)">删除</a>
            </div>
       </div>


        <div class="gfather">
            <div id="father" class="father">22父亲
                <span id="span">1111</span>
                <span>222</span>
                <p>333</p>
                <a href="javascript:void(0)" onclick="tm_delete(this)">删除</a>
            </div>
       </div>
  </div>
  <script type="text/javascript">

     function tm_delete(obj){
        var $this = $(obj);
        $this.parents(".gfather").fadeOut("slow",function(){
            $(this).remove();
        });
     }


     $(function(){
         //parent() children()
        /* var f = $("#span").parent().attr("class");
         var cs = $("#father").children();
         alert("在当前元素下有:"+cs.length+"子元素");
         cs.each(function(i){
            alert("第"+(++i)+"个元素的【"+$(this).context.tagName+"】的值是："+$(this).text());
         });
        */
        //parents()  closest();

        //如果parents()没有指明范围，那么它就等同于parent();
        //parents();从当前元素往上查找，找到最近的一个就返回
        //closest(obj)
        
        var f = $("#span").parents(".father");
        alert(f.html());
        var cf = $("#span").closest(".father");
        alert(cf.html());*/
     });
  </script>
 </body>

4：选项卡
 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
 <style>
   *{margin:0px;padding:0px;}
    #box{list-style:none;border:1px solid #ccc;width:100%;}
    li{list-style:none;list-style-image:none;}
    #box li{border-bottom:1px solid #ccc;width:75px;height:35px;padding:3px;float:left;cursor:pointer;}
    .active{background:red;}
  </style>
 </head>
 <body>
    <div style="border:1px solid red;width:486px;padding:5px;margin:10px auto;">
      <ul id="box">
        <li tab="#div1" class="active"><div>111111</div></li>
        <li tab="#div2"><div>222</div></li>
        <li tab="#div3"><div>3333</div></li>
        <li tab="#div4"><div>444</div></li>
        <li tab="#div5"><div>555</div></li>
        <li tab="#div6"><div>666</div></li>
      </ul>

      <div id="tabboxs">
        <div id="div1">1111111</div>
        <div id="div2" style="display:none;">2222222</div>
        <div id="div3" style="display:none;">3333311111</div>
        <div id="div4" style="display:none;">4444444444</div>
        <div id="div5" style="display:none;">5555555555</div>
        <div id="div6" style="display:none;">6666666666</div>
      </div>
  </div>
  <script type="text/javascript">
     $(function(){
        //siblings() =  prevAll() + nextAll()
        //$("#text").siblings().css("background","red");
        
        //第一种方式
        /*$("#box li").on("click",function(){    
            var index = $(this).index();
            $(this).addClass("active")
            $(this).siblings().removeClass("active");    
            $("#tabboxs").find("div").eq(index).show();
            $("#tabboxs").find("div").eq(index).show().siblings().hide();
        });*/

        //第二种方式
        $("#box li").on("click",function(){    
            var tab = $(this).attr("tab");
            $(this).addClass("active").siblings().removeClass("active");
            $(tab).show().siblings().hide();
        });
     });
  </script>
 </body>