您的位置：首页 > Web前端 > JQuery

【代码片段】jQuery测试兄弟元素集合

2013-03-05 19:25 375 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第3章示例4</title>
<style type="text/css">
body { width:780px; }
div,p,h3,span { border:4px solid black; background-color:green; color:white; float:left; margin:6px; padding:5px; font:bold 14px/1 Arial,Helvetica,sans-serif; width:220px; display:block; }
div p,div span { width:205px; border-width:2px; margin:5px 0; float:none; }
p span { width:193px; border-width:1px;}
h3 { margin-right:500px; }
.clear { clear:both; }
.relative { position:relative; }
.highlight { background-color:gold; color:black; }
form { clear:both; font:bold 14px/1 Arial,Helvetica,sans-serif; }
button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px; cursor:pointer; width:245px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){$("*").removeClass("highlight");});
$("#btn1").click(function(){$("h3").next(".clear").addClass("highlight");});
$("#btn2").click(function(){$("h3").next().addClass("highlight");});
$("#btn3").click(function(){$("h3").prev(".clear").addClass("highlight");});
$("#btn4").click(function(){$("h3").prev().addClass("highlight");});
$("#btn5").click(function(){$("h3").nextAll("[class]").addClass("highlight");});
$("#btn6").click(function(){$("h3").nextAll().addClass("highlight");});
$("#btn7").click(function(){$("h3").prevAll("[class]").addClass("highlight");});
$("#btn8").click(function(){$("h3").prevAll().addClass("highlight");});
$("#btn9").click(function(){$("h3").siblings("[class]").addClass("highlight");});
$("#btn10").click(function(){$("h3").siblings().addClass("highlight");});
$("#btn11").click(function(){$("h3").nextUntil(".relative").addClass("highlight");});
$("#btn12").click(function(){$("h3").nextUntil().addClass("highlight");});
$("#btn13").click(function(){$("h3").prevUntil(".clear").addClass("highlight");});
$("#btn14").click(function(){$("h3").prevUntil().addClass("highlight");});
$("button").click(function(){$("form").removeClass("highlight");});
});
</script>
</head>
<body>
<div class="clear">
<div class="clear">
<p>
<p>
<span><span> </span></span>
</p>
</p>
</div>
</div>
<div>
<div>
<p><p> </p></p>
<p><p> </p></p>
<p><p> </p></p>
</div>
</div>
<div class="relative">
<div class="relative">
<span><span> </span></span>
<span><span> </span></span>
<span class="clear"><span class="clear"> </span></span>
</div>
</div>
<h3 class="clear"><h3 class="clear"> </h3></h3>
<div class="clear">
<div class="clear">
<p>
<p>
<span><span> </span></span>
<span><span> </span></span>
</p>
</p>
<p>
<p>
<span><span> </span></span>
<span><span> </span></span>
</p>
</p>
</div>
</div>
<div>
<div>
<p><p> </p></p>
<p><p> </p></p>
<p><p> </p></p>
</div>
</div>
<div class="relative">
<div class="relative">
<span><span> </span></span>
<span><span> </span></span>
<span class="clear"><span class="clear"> </span></span>
</div>
</div>
<form>
<button type="button" id="btn1">$("h3").next(".clear")</button>
<button type="button" id="btn2">$("h3").next()</button>
<button type="button" id="btn3">$("h3").prev(".clear")</button>
<button type="button" id="btn4">$("h3").prev()</button>
<button type="button" id="btn5">$("h3").nextAll("[class]")</button>
<button type="button" id="btn6">$("h3").nextAll()</button>
<button type="button" id="btn7">$("h3").prevAll("[class]")</button>
<button type="button" id="btn8">$("h3").prevAll()</button>
<button type="button" id="btn9">$("h3").siblings("[class]")</button>
<button type="button" id="btn10">$("h3").siblings()</button>
<button type="button" id="btn11">$("h3").nextUntil(".relative")</button>
<button type="button" id="btn12">$("h3").nextUntil()</button>
<button type="button" id="btn13">$("h3").prevUntil(".clear")</button>
<button type="button" id="btn14">$("h3").prevUntil()</button>
</form>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航