jquery框架：筛选

最新推荐文章于 2022-01-20 17:54:42 发布

hahahafree

最新推荐文章于 2022-01-20 17:54:42 发布

阅读量142

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery Web 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_43731793/article/details/97033785

Web 同时被 2 个专栏收录

80 篇文章

订阅专栏

jQuery

17 篇文章

订阅专栏

1、筛选:

1.过滤

eq();
first();
last();
not();
slice();

eq方法

<body>
	<h1>0001</h1>
	<h1>0002</h1>
	<h1>0003</h1>
	<h1>0004</h1>
	<h1>0005</h1>
</body>
<script>
$('h1').eq(2).css({'background':'#00f'});
</script>

first();方法

<script>
$('h1').first().css({'background':'#00f'});
</script>

last();方法

<script>
$('h1').last().css({'background':'#00f'});
</script>

not();除了……

<script>
$('h1').not($('h1').last()).css({'background':'#00f'});
</script>

slice(2)：从2开始到最后一个，包括2

<script>
$('h1').slice(2).css({'background':'#00f'});
</script>

slice(0,3)：从0开始，到3之前，即0,1,2

<script>
$('h1').slice(0,3).css({'background':'#00f'});
</script>

2.查找

children();
find();
next();
nextAll();
parent();
prev();
prevAll();
siblings();

next(); 下一个

<body>
	<h1>0001</h1>
	<h1>0002</h1>
	<h1>0003</h1>
	<h1>0004</h1>
	<h1>0005</h1>
</body>
<script>
$('h1').click(function(){
	$(this).next().css({'background':'#00f'});
});
</script>

nextAll();后面所有兄弟

<script>
$('h1').click(function(){
	$(this).nextAll().css({'background':'#00f'});
});
</script>

prev();前面一个

<script>
$('h1').click(function(){
	$(this).prev().css({'background':'#00f'});
});
</script>

prevAll();前面所有兄弟

<script>
$('h1').click(function(){
	$(this).prevAll().css({'background':'#00f'});
});
</script>

siblings();前后所有兄弟

<script>
$('h1').click(function(){
	$(this).siblings().css({'background':'#00f'});
});
</script>

parent();父元素

<body>
	<div>
			<h1 class="hcls">0001</h1>
			<h1>0002</h1>
	</div>
	
	<h1>0003</h1>
	<h1>0004</h1>
	<h1>0005</h1>
</body>
<script>
$('.hcls').click(function(){
	$(this).parent().nextAll().css({'background':'#00f'});
});
</script>

children();子元素

<body>
	<div>
			<h1 class="hcls">0001</h1>
			<h1>0002</h1>
	</div>
	<div>
			<h1>0003</h1>
			<h1>0004</h1>
			<div>
					<h1>0005</h1>
			</div>
	</div>
	
	
</body>
<script>
$('.hcls').click(function(){
	$(this).parent().next().children('h1').css({'background':'#00f'});
});
</script>

find();后代元素

<body>
	<div>
			<h1 class="hcls">0001</h1>
			<h1>0002</h1>
	</div>
	<div>
			<h1>0003</h1>
			<h1>0004</h1>
			<div>
					<h1>0005</h1>
			</div>
	</div>
	
	
</body>
<script>
$('.hcls').click(function(){
	$(this).parent().next().find('h1').css({'background':'#00f'});
});
</script>

3.串联

add();
andSelf();

add()连接

<body>
<h1>1111111111</h1>
<h1>2222222222</h1>
<p>3333333333333</p>
<p>44444444444444</p>

	
</body>
<script>
$('h1').add('p').css({'background':'#00f'});
</script>

组合选择器

<body>
<h1>1111111111</h1>
<h1>2222222222</h1>
<p>3333333333333</p>
<p>44444444444444</p>

	
</body>
<script>
$('h1,p').css({'background':'#00f'});
</script>

andSelf();连接自己

<body>

<h1>2222222222</h1>
<p>3333333333333</p>


	
</body>
<script>
$('h1').next().andSelf().css({'background':'#00f'});
</script>