022_遍历同胞

最新推荐文章于 2024-04-10 17:24:26 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-04-10 17:24:26 发布

阅读量157

点赞数

分类专栏： jQuery学习文章标签： css javascript html5

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/112347275

版权

jQuery学习专栏收录该内容

37 篇文章

订阅专栏

1. siblings()方法

1.1. siblings()方法返回被选元素的所有同胞元素(不包含自身)。该方法还可以使用一个可选的参数来过滤对同胞元素的搜索。

1.2. 语法

$(selector).siblings()
$(selector).siblings(selector)

1.3. 参数

1.4. 例子

1.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>siblings()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("h1").siblings().css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("h1").siblings('p').css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors div
			{
				width: 500px; 
				float: left;
			}
			.ancestors div, .ancestors div *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<div>div(父)
		    <ul>ul元素</ul>
		    <p>p元素</p>
		    <h1>h1元素</h1> 
		    <span>span元素</span> 
  		</div>
  		<div>div(父)
		    <ul>ul元素</ul>
		    <p>p元素</p>
		    <h1>h1元素</h1> 
		    <span>span元素</span>
  		</div>
  		<span style="display: block; clear: left;">
  			<button id="btn1">所有同胞元素</button> <button id="btn2">所有同胞元素中过滤</button>
  		</span>
	</body>
</html>

1.4.2. 效果图

2. next()方法

2.1. next()方法返回被选元素的下一个同胞元素。该方法只返回一个元素。

2.2. next()方法接受可选的选择器表达式, 类型与我传递到$()函数中的相同。如果紧跟的下一个同胞元素匹配该选择器, 则会留在新构造的jQuery对象中; 否则会将之排除。

2.3. 语法

$(selector).next()
$(selector).next(selector)

2.4. 参数

2.5. 例子

2.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>next()方法</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("h1").next().css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("h1").next('.mySpan').css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors div
			{
				width: 500px; 
				float: left;
			}
			.ancestors div, .ancestors div *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<div>div(父)
		    <p>p元素</p>
		    <h1>h1元素</h1> 
		    <span>span元素</span> 
		    <ul>ul元素</ul>
  		</div>
  		<div>div(父)
		    <p>p元素</p>
		    <h1>h1元素</h1> 
		    <span class="mySpan">span元素</span>
		    <ul>ul元素</ul>
  		</div>
  		<span style="display: block; clear: left;">
  			<button id="btn1">下一个同胞元素</button> <button id="btn2">下一个同胞元素中过滤</button>
  		</span>
	</body>
</html>

2.5.2. 效果图

3. nextAll()方法

3.1. nextAll()方法获得匹配元素集合中每个元素的所有跟随的同胞元素。

3.2. nextAll()方法接受可选的选择器表达式, 类型与我传递到$()函数中的相同。如果应用选择器, 则将通过检测元素是否匹配来对它们进行筛选。

3.3. 语法

$(selector).nextAll()
$(selector).nextAll(selector)

3.4. 参数

3.5. 例子

3.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>nextAll()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("h1").nextAll().css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("h1").nextAll('.mySpan').css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors div
			{
				width: 500px; 
				float: left;
			}
			.ancestors div, .ancestors div *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<div>div(父)
		    <ul>ul元素</ul>
		    <h1>h1元素</h1> 
		    <p>p元素</p>
		    <span>span元素</span> 
  		</div>
  		<div>div(父)
		    <ul>ul元素</ul>
		    <h1>h1元素</h1>
		    <p>p元素</p>
		    <span class="mySpan">span元素</span>
  		</div>
  		<span style="display: block; clear: left;">
  			<button id="btn1">跟随的所有同胞元素</button> <button id="btn2">跟随的所有同胞元素中过滤</button>
  		</span>
	</body>
</html>

3.5.2. 效果图

4. nextUntil()方法

4.1. nextUntil()方法获得每个元素所有跟随的同胞元素, 是介于两个给定元素之间的元素, 但不包括被选择器、DOM节点或已传递的jQuery对象匹配的元素。

4.2. nextUntil()方法接受可选的选择器表达式或对象作为第一个参数, 规定何处停止匹配, 如果所有跟随的同胞元素不匹配该参数或未规定该参数, 则会选取所有跟随的同胞与nextAll()方法相同。

4.3. nextUntil()方法接受可选的选择器表达式作为第二参数。如果指定该参数, 则将通过检测元素是否匹配该选择器来筛选它们。

4.4. 语法 1

$(selector).nextUntil(selector,filter)

4.5. 参数

4.6. 语法 2

$(selector).nextUntil(element,filter)

4.7. 参数

4.8. 例子

4.8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>nextUntil()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("h1").nextUntil().css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("h1").nextUntil('ul').css({"color":"red","border":"2px solid red"});
				});
				$('#btn3').click(function(){
					$("h1").nextUntil(document.getElementsByTagName('ul')).css({"color":"red","border":"2px solid red"});
				});
				$('#btn4').click(function(){
					$("h1").nextUntil($('ul')).css({"color":"red","border":"2px solid red"});
				});
				$('#btn5').click(function(){
					$("h1").nextUntil('ul', '.mySpan').css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors div
			{
				width: 500px;
				float: left;
			}
			.ancestors div, .ancestors div *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<div>div(父)
		    <h1>h1元素</h1> 
		    <p>p元素</p>
		    <span>span元素</span> 
		    <ul>ul元素</ul>
  		</div>
  		<div>div(父)
		    <h1>h1元素</h1>
		    <p>p元素</p>
		    <span class="mySpan">span元素</span>
		    <ul>ul元素</ul>
  		</div>
  		<span style="display: block; clear: left;">
  			<button id="btn1">h1跟随的所有同胞元素</button> <button id="btn2">h1和ul之间h1所有的同胞元素(选择器表达式)</button> 
  			<button id="btn3">h1和ul之间h1所有的同胞元素(DOM节点)</button> <button id="btn4">h1和ul之间h1所有的同胞元素(jQuery对象)</button>
  			<br /><br /><button id="btn5">h1和ul之间h1所有的同胞元素中过滤类是mySpan的元素</button>
  		</span>
	</body>
</html>

4.8.2. 效果图

5. prev()方法

5.1. prev()方法获得匹配元素集合中每个元素紧邻的前一个同胞元素, 该方法只返回一个元素。通过选择器进行筛选是可选的。

5.2. 语法

$(selector).prev()
$(selector).prev(selector)

5.3. 参数

5.4. 例子

5.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>prev()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("h1").prev().css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("h1").prev('.mySpan').css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors div
			{
				width: 500px; 
				float: left;
			}
			.ancestors div, .ancestors div *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<div>div(父)
		    <ul>ul元素</ul>
		    <p>p元素</p>
		    <span>span元素</span>
		    <h1>h1元素</h1> 
  		</div>
  		<div>div(父)
		    <ul>ul元素</ul>
		    <p>p元素</p>
		    <span class="mySpan">span元素</span>
		    <h1>h1元素</h1> 
  		</div>
  		<span style="display: block; clear: left;">
  			<button id="btn1">上一个同胞元素</button> <button id="btn2">上一个同胞元素中过滤</button>
  		</span>
	</body>
</html>

5.4.2. 效果图

6. prevAll()方法

6.1. prevAll()方法获得当前匹配元素集合中每个元素的前面的所有同胞元素, 使用选择器进行筛选是可选的。

6.2. 语法

$(selector).prevAll()
$(selector).prevAll(selector)

6.3. 参数

6.4. 例子

6.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>prevAll()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("h1").prevAll().css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("h1").prevAll('.mySpan').css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors div
			{
				width: 500px; 
				float: left;
			}
			.ancestors div, .ancestors div *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<div>div(父)
		    <ul>ul元素</ul>
		    <span>span元素</span> 
		    <h1>h1元素</h1> 
		    <p>p元素</p>
  		</div>
  		<div>div(父)
		    <ul>ul元素</ul>
		    <span class="mySpan">span元素</span>
		    <h1>h1元素</h1>
		    <p>p元素</p>
  		</div>
  		<span style="display: block; clear: left;">
  			<button id="btn1">前面的所有同胞元素</button> <button id="btn2">前面的所有同胞元素中过滤</button>
  		</span>
	</body>
</html>

6.4.2. 效果图

7. prevUntil()方法

7.1. prevUntil()方法获得当前匹配元素集合中每个元素的前面的同胞元素, 是介于两个给定元素之间的元素, 但不包括被选择器、DOM节点或jQuery对象匹配的元素。

7.2. prevUntil()方法如果不匹配或未应用选择器参数, 该方法选取的元素与prevAll()相同。

7.3. prevUntil()方法接受可选的选择器表达式作为其第二参数。如果应用这个参数, 则将通过检测元素是否匹配该选择器对元素进行筛选。

7.4. 语法 1

$(selector).prevUntil(selector, filter)

7.5. 参数

7.6. 语法 2

$(selector).prevUntil(element, filter)

7.7. 参数

7.8. 例子

7.8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>prevUntil()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("h1").prevUntil().css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("h1").prevUntil('ul').css({"color":"red","border":"2px solid red"});
				});
				$('#btn3').click(function(){
					$("h1").prevUntil(document.getElementsByTagName('ul')).css({"color":"red","border":"2px solid red"});
				});
				$('#btn4').click(function(){
					$("h1").prevUntil($('ul')).css({"color":"red","border":"2px solid red"});
				});
				$('#btn5').click(function(){
					$("h1").prevUntil('ul', '.mySpan').css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors div
			{
				width: 500px;
				float: left;
			}
			.ancestors div, .ancestors div *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<div>div(父)
		    <ul>ul元素</ul>
		    <span>span元素</span> 
		    <p>p元素</p>
		    <h1>h1元素</h1>
  		</div>
  		<div>div(父)
		    <ul>ul元素</ul>
		    <span class="mySpan">span元素</span>
		    <p>p元素</p>
		    <h1>h1元素</h1>
  		</div>
  		<span style="display: block; clear: left;">
  			<button id="btn1">h1前面的所有同胞元素</button> <button id="btn2">h1和ul之间h1前面所有的同胞元素(选择器表达式)</button> 
  			<button id="btn3">h1和ul之间h1前面所有的同胞元素(DOM节点)</button> <button id="btn4">h1和ul之间h1前面所有的同胞元素(jQuery对象)</button>
  			<br /><br /><button id="btn5">h1和ul之间h1前面所有的同胞元素中过滤类是mySpan的元素</button>
  		</span>
	</body>
</html>

7.8.2. 效果图