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>
时间： 2024-10-01 04:22:57