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

【代码片段】jQuery测试层次选择器

2013-03-05 17:49 363 查看

<!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>第2章示例7</title>
<style type="text/css">
body { width:760px; }
div,p,h3,h1 { border:4px solid black; background-color:green; color:white; margin:6px; padding:5px; font:bold 14px/1 Arial,Helvetica,sans-serif; width:220px; float:left; }
div p { width:205px; border-width:2px; margin:5px 0; float:none; }
h1 { margin:6px 256px; }  h3 { position:relative; margin-right:500px; }
div.top { height:65px; }
.clear { clear:both; }
div.hide { display:none; }  p.hide { visibility:hidden; }
.highlight { background-color:gold; color:black; }
form { clear:both; }
button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px; cursor:pointer; width:175px; }
</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(){$("body p").addClass("highlight");});
$("#btn2").click(function(){$("body>p").addClass("highlight");});
$("#btn3").click(function(){$("h3+p").addClass("highlight");});
$("#btn4").click(function(){$("h3~p").addClass("highlight");});
function swing() {
$("h3").animate({left:"500"},7000)
.animate({left:"0"},7000, swing);
}
swing();
});
</script>
</head>
<body>
<h1><h1> </h1></h1>
<div class="clear top">
<div class="clear top">
<p><p>hello</p></p>
</div>
</div>
<div class="top" id="core">
<div class="top" id="core">
<p><p> </p></p>
</div>
</div>
<div class="top">
<div class="top"><br/>
hello, John<br/>
</div>
</div>
<p class="clear"><p class="clear"> </p></p>
<p><p > </p></p>
<p><p > </p></p>
<h3 class="clear"><h3 class="clear"> </h3></h3>
<p class="clear"><p class="clear"> </p></p>
<p><p > </p></p>
<p class="hide"><p class="hide"> </p></p>
<div class="clear bottom">
<div class="clear bottom">
<p><p> </p></p>
<p><p> </p></p>
<p><p> </p></p>
</div>
</div>
<div class="bottom">
<div class="bottom">
<p><p> </p></p>
<p><p> </p></p>
<p><p> </p></p>
</div>
</div>
<div class="hide bottom">
<div class="hide bottom">
<p><p> </p></p>
<p><p> </p></p>
<p><p> </p></p>
</div>
</div>
<form>
<button type="button" id="btn1">$("body p")</button>
<button type="button" id="btn2">$("body>p")</button>
<button type="button" id="btn3">$("h3+p")</button>
<button type="button" id="btn4">$("h3~p")</button>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航