4.jQuery——层次选择器
简介:官方理论的话就不多说直接上例子、对于jQuery选择器主要是多练习
1.程序代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>层次过滤选择器</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 引入jQuery -->
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="lib/assist.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//选择body内的所有div元素
$("#btn1").click(function() {
$('body div').css("background", "#bbffaa");
});
//在body中选择元素名称是div的子元素(第一层包含的元素,元素内部的其他元素不包括)
$("#btn2").click(function() {
$('body>div').css("background", "#bbffaa");
});
//选择 所有class为one 的下一个div元素(除去第一个后面的元素,但是要求必须是class为one)
$("#btn3").click(function() {
$('.one+div').css("background", "#bbffaa");
});
//选择 id为two的元素后面的所有div兄弟元素(后面同一级别的div元素)
$("#btn4").click(function() {
$('#two~div').css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<h3>
层次选择器.
</h3>
<button id="reset">
手动重置页面元素
</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br />
<br />
<input type="button" value="选择 body内的所有div元素." id="btn1" />
<input type="button" value="在body内,选择子元素是div的。" id="btn2" />
<input type="button" value="选择 所有class为one 的下一个div元素." id="btn3" />
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" />
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">
class为mini
</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">
class为mini,title为other
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
</div>
</div>
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini" title="tesst">
class为mini,title为tesst
</div>
</div>
<div style="display: none;" class="none">
style的display为"none"的div
</div>
<div class="hide">
class为"hide"的div
</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
2.程序代码的解析
1.从代码可以看到我们定义了5个按钮、界面的效果如下
2.通过jQuery的$(function(){})对按钮的事件进行注册、这也是jQuery常用的方式。页面加载完元素节点后执行该函数。
$(function() {
//选择body内的所有div元素
$("#btn1").click(function() {
$('body div').css("background", "#bbffaa");
});
//在body中选择元素名称是div的子元素(第一层包含的元素,元素内部的其他元素不包括)
$("#btn2").click(function() {
$('body>div').css("background", "#bbffaa");
});
//选择 所有class为one 的下一个div元素(除去第一个后面的元素,但是要求必须是class为one)
$("#btn3").click(function() {
$('.one+div').css("background", "#bbffaa");
});
//选择 id为two的元素后面的所有div兄弟元素(后面同一级别的div元素)
$("#btn4").click(function() {
$('#two~div').css("background", "#bbffaa");
});
});
3.从1中可以看到页面上显示了6个大的div以及里面一些小的div和文字、html代码中有一些隐藏的div、后面进行介绍、本章节主要是讲述jQuery的层次选择器、如果主要了解层次选择器的功能
①第一个按钮“选择body内所有div元素”:
代码如下
$("#btn1").click(function() {
$('body div').css("background", "#bbffaa");
});
效果如下
只要是body内的div元素都会被选中。
②:在body内,选择子元素是div的。"
代码如下
//在body中选择元素名称是div的子元素(第一层包含的元素,元素内部的其他元素不包括)
$("#btn2").click(function() {
$('body>div').css("background", "#bbffaa");
});
效果如下
③://选择 所有class为one 的下一个div元素(除去第一个后面的元素,但是要求必须是class为one)
代码如下
$("#btn3").click(function() {
$('.one+div').css("background", "#bbffaa");
});
效果如下
④://选择 id为two的元素后面的所有div兄弟元素(后面同一级别的div元素)
代码如下
$("#btn4").click(function() {
$('#two~div').css("background", "#bbffaa");
});
效果如下