4.jQuery——层次选择器

最新推荐文章于 2022-04-11 16:36:40 发布

在回忆里流浪

最新推荐文章于 2022-04-11 16:36:40 发布

阅读量597

点赞数

分类专栏： jQuery基础系列文章标签：层次选择器

本文链接：https://blog.csdn.net/qq_35574190/article/details/89214535

版权

jQuery基础系列专栏收录该内容

7 篇文章 0 订阅

订阅专栏

简介：官方理论的话就不多说直接上例子、对于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");
				});

效果如下

在回忆里流浪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
4.jQuery——层次选择器

简介：官方理论的话就不多说直接上例子、对于jQuery选择器主要是多练习1.程序代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>层次过滤选择器</title> <link rel="stylesheet" ty...
复制链接

扫一扫