首页 > 代码库 > 第二十节（jquery筛选）
第二十节（jquery筛选）
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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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>
第二十节（jquery筛选）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。