jQuery系统的学习（五）

最新推荐文章于 2018-08-24 14:53:28 发布

飞鸿酱

最新推荐文章于 2018-08-24 14:53:28 发布

阅读量249

点赞数

分类专栏： front-end-jqurey

本文链接：https://blog.csdn.net/weixin_38465623/article/details/80422181

版权

front-end-jqurey 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

昨天太忙啦，都没怎么学习。今天我要多补点。

JQuery尺寸

jQuery提供多个处理尺寸的重要方法：width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight（）

jQuery width()和height()方法

width()方法设置或返回元素的宽度。

height()方法设置或返回元素的高度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$("button").click(function(){
				var t="";
				t+="div的宽度是："+$("#div1").width()+"<br>";
				t+="div的高度是："+$("#div1").height();
			$("#div1").html(t);
			});
		});
	</script>
	</head>
	<body>
		<div id="div1" style="height:200px;width:200px;padding:10px;maigin:3px;border:1px solid blue;background-color:lightblue;"></div>
		<br><button>显示div元素的尺寸</button>
		<p>返回元素的宽度</p>
		<p>返回元素的高度</p>
	</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:200px;width:600px;padding:5px;margin:3px;border:1px solid blue;background-color:deepskyblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
<p>innerHeight() - 返回元素的高度 (包含内边距)。</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
    txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:5px;margin:3px;border:2px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
<p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>

</body>
</html>

jQuery遍历

什么是遍历？

遍历，就是移动，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。以某项选择开始，并沿着这个选择移动，知道抵达您的期望元素为止。

下面是一个家族树。通过jQuery遍历，您能够从被选的元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动称为对DOM进行遍历。

<div>元素是<ul>的父元素，同时是其中所有内容的祖先。
<ul>元素是<li>元素的父元素，同时是<div>的子元素。
左边的<li>元素是<span>的父元素，<ul>的子元素，是<div>的子孙元素。
<span>元素是<li>的子元素，同时是<ul>和<div>的后代。
两个<li>元素是同胞。
右边的<li>元素是<b>的父元素，<ul>的子元素，同时是<div>的后代。
<b>元素是右边<li>的子元素，同时也是<ul>和<div>的后代。

祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

祖先是父，祖父或曾祖父等等。

通过jquery能够向上遍历dom树，已查找元素的祖先。

向上遍历dom树

这些jquery方法很有用，他们勇于向上遍历dom树：

parent（）
parents（）
parentsUntil（）

jquery parent（）方法

parent（）方法返回被选元素的直接父元素。

该方法只会向上一级对dom树进行遍历。

parent（）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			.an * {
				display: block;
				border: 2px solid deepskyblue;
				color: deepskyblue;
				padding: 2px;
				margin: 2px;
			}
		</style>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("span").parent().css({
					"color": "red",
					"border": "2px dotted red"
				});
			});
		</script>
	</head>

	<body>

		<div class="an">
			<div style="width:200px;">div (曾祖父元素)
				<ul>ul (祖父元素)
					<li>li (父元素)
						<span>span</span>
					</li>
				</ul>
			</div>

			<div style="width:200px;">div (祖父元素)
				<p>p (父元素)
					<span>span</span>
				</p>
			</div>
		</div>

	</body>

</html>

parents（）

	$("span").parents().css({

也可以使用可选参数来过滤对祖先元素的搜索。

	$("span").parents("div").css({

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

		$(document).ready(function() {
				$("li").parentsUntil("div").css({
//				$("span").parents("div").css({
//						$("span").parents().css({
					"color": "red",
					"border": "2px dotted red"
				});
			});

jquery遍历-后代

后代是子、孙、曾孙等等。

通过jquery能够向下遍历dom树，以查找元素的后代。

向下遍历dom树

children（）
find（）

children（）

该方法返回被选元素的所有直接子元素，只会向下一级对dom树进行遍历。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
			<style>
.ch *
{ 
	display: block;
	border: 2px solid red;
	color: red;
	padding: 5px;
	margin: 15px;
	width:100px;
}
</style>
		</script>
		<script>
			$(document).ready(function() {
				$("div").children().css({
					"color": "blue",
					"border": "2px dotted blue"
				});
			});
		</script>
	</head>

	<body>

		<div class="ch" ">div (当前元素)
			<p>p (儿子元素)
				<span>span (孙子元素)</span>
			</p>
			<p>p (儿子元素)
				<span>span (孙子元素)</span>
			</p>
		</div>

	</body>

</html>

也可以选择其中的儿子改变

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
			<style>
.ch *
{ 
	display: block;
	border: 2px solid red;
	color: red;
	padding: 5px;
	margin: 15px;
	width:100px;
}
</style>
		</script>
		<script>
			$(document).ready(function() {
				$("div").children("p.1").css({
					"color": "blue",
					"border": "2px dotted blue"
				});
			});
		</script>
	</head>

	<body>

		<div class="ch" ">div (当前元素)
			<p class="1">p (儿子元素)
				<span>span (孙子元素)</span>
			</p>
			<p class="2">p (儿子元素)
				<span>span (孙子元素)</span>
			</p>
		</div>

	</body>

</html>

find（）方法

发现，一直往下找到对应的元素，

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
			<style>
.ch *
{ 
	display: block;
	border: 2px solid red;
	color: red;
	padding: 5px;
	margin: 15px;
	width:100px;
}
</style>
		</script>
		<script>
			$(document).ready(function() {
//				$("div").children("p.1").css({
//					"color": "blue",
//					"border": "2px dotted blue"
//				});
		$("div").find("span").css({
					"color": "blue",
					"border": "2px dotted blue"
				});
			});
		</script>
	</head>

	<body>

		<div class="ch" ">div (当前元素)
			<p class="1">p (儿子元素)
				<span>span (孙子元素)</span>
			</p>
			<p class="2">p (儿子元素)
				<span>span (孙子元素)</span>
			</p>
		</div>

	</body>

</html>

也可以找到所有的元素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
			<style>
.ch *
{ 
	display: block;
	border: 2px solid red;
	color: red;
	padding: 5px;
	margin: 15px;
	width:100px;
}
</style>
		</script>
		<script>
			$(document).ready(function() {
				//				$("div").children("p.1").css({
				//					"color": "blue",
				//					"border": "2px dotted blue"
				//				});
				//		$("div").find("span").css({
				//					"color": "blue",
				//					"border": "2px dotted blue"
				//				});
				//			});
				$("div").find("*").css({
					"color": "blue",
					"border": "2px dotted blue"
				});
			});
		</script>
	</head>

	<body>

		<div class="ch" ">div (当前元素)
			<p class="1 ">p (儿子元素)
				<span>span (孙子元素)</span>
			</p>
			<p class="2 ">p (儿子元素)
				<span>span (孙子元素)</span>
			</p>
		</div>

	</body>

</html>

遍历-同胞（siblings）

同胞拥有相同的父元素。

在dom树中水平遍历

下面是在dom树中进行水平遍历的方法：

siblings
next
nextall
nextuntil
prev
prevall
preuntil

siblings方法返回被选元素的所有同胞元素，

$(document).ready(function(){
  $("h2").siblings();
});

$(document).ready(function(){
  $("h2").siblings("p");
});

上述例第一个例子是返回h2的所有同胞元素，第二个例子是返回h2的同胞元素中所有<p>元素。

jquery next方法

next方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

下面的例子返回<h1>的下一个同胞元素：

$(document).ready(function(){
  $("h1").next();
});

jquery nextall方法

nextall方法返回被选元素的所有跟随的同胞元素

下面的例子返回<h1>的所有跟随的同胞元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("h1").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

jquery nextuntil

该方法返回介于两个给定参数之间的所有跟随的同胞元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("h1").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>

</body>
</html>

jQuery prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

jquery遍历-过滤

缩小搜索元素的范围

三个最基本的过滤方法式：first（），last（）和eq（），他们允许基于其在一组元素中的位置来选择一个特定的元素。

filter（）和not（）允许您来选取匹配或不匹配某项指定标准的元素。

first（）方法返回被选元素的首个元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div p").first().css("background-color","red");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<div>
	<p>这是 div 中的一个段落。</p>
</div>

<div>
	<p>这是另外一个 div 中的一个段落。</p>
</div>

<p>这是一个段落。</p>

</body>
</html>

last()

该方法返回的是最后一个元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("div li").last().css("background-color","red");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<div>
	<li>这是 div 中的一个段落。</li>
	<li>这是 div 中的2个段落。</li>
	<li>这是 div 中的3个段落。</li>
	<li>这是 div 中的4个段落。</li>
	<li>这是 div 中的5个段落。</li>
</div>

</body>
</html>

eq（）

该方法返回被选元素中带有指定索引号的元素。

索引号从0开始，因此首个元素的索引号是0而不是1。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").eq(3).css("background-color","yellow");
});
</script>
</head>
<body>
<div>这是1个div</div>
<div>这是2个div</div>
<div>这是3个div</div>
<div>这是4个div</div>
<div>这是5个div</div>
</body>
</html>

filter（）

该方法允许你规定一个标准。不匹配该标准的元素会被从集合中删除，匹配的元素会被返回。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function() {
                $("a").filter(".div").css("color", "red");
                $("a").filter("#div").css("color", "yellow");
            });
        </script>
    </head>

    <body>
        <div>
            <a id="div">baidu</a>
            <a class="div">sougou</a>
            <a id="div">sina</a>
        </div>

    </body>

</html>

not（）

返回不匹配标准的所有元素。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("a").not(".div").css("color", "red");
				$("a").not("#div").css("color", "yellow");
			});
		</script>
	</head>

	<body>
		<div>
			<a id="div">baidu</a>
			<a class="div">sougou</a>
			<a id="div">sina</a>
		</div>

	</body>

</html>

飞鸿酱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery系统的学习（五）

昨天太忙啦，都没怎么学习。今天我要多补点。JQuery尺寸jQuery提供多个处理尺寸的重要方法：width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight（）jQuery width()和height()方法width()方法设置或返回元素的宽度。height()方法设置或返回元素的高度。&lt;!DOCTYPE ht...
复制链接

扫一扫

专栏目录