基本选择器、层级选择器、过滤选择器、属性选择器、表单选择器

最新推荐文章于 2021-06-17 15:11:16 发布

birdlun

最新推荐文章于 2021-06-17 15:11:16 发布

阅读量304

点赞数 1

分类专栏： 05 jquery

本文链接：https://blog.csdn.net/Birdmotianlun/article/details/100887261

版权

05 jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

基本选择器的使用

	<body>
		<input type="button" id="btn1" value="标签选择器" />
		<input type="button" id="btn2" value="类选择器" />
		<input type="button" id="btn3" value="元素选择器" />
		<input type="button" id="btn4" value="*全选选择器" />
		<input type="button" id="btn5" value="任意多个选择器" />
		<hr />
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>

		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>

		<span id="four">
			我是span
		</span>
	</body>

jQuery

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		$('#btn1').click(function(){
			//id选择器
			$('#one').css('background-color','pink');
		});
		$('#btn2').click(function(){
			//类选择器
			$('.mini').css('background-color','pink');
		});
		 $('#btn3').click(function(){
			 //元素选择器
			$('span').css('background-color','red');
		});	
		$('#btn4').click(function(){
			//全选选择器
			$('*').css('background-color','aqua');
		});	
		$('#btn5').click(function(){
			$("#four,hr,#two").css("background-color","pink");
		});
	});
</script>

层级选择器

A B	获得a元素内部的所有b元素	儿子、孙子，曾孙子等
A>B	获得a元素下的所有b子元素	儿子
A+B	获得a元素同级下一个b元素	兄弟
A~B	获得a元素同级所有b元素	兄弟、同级的所有兄弟

列：层级选择器练习

html

<body>
	在给定的祖先元素下匹配所有的后代元素(儿子、孙子，曾孙子等)
	<input type="button" id="btn1" value="选择body中的所有的div元素" /><br />
	在给定的父元素下匹配所有的子元素（儿子）
	<input type="button" id="btn2" value="选择body中的第一级的孩子" /><br />
	匹配所有紧接在 prev 元素后的 next 元素(找与prev元素紧邻的下个元素 兄弟)
	<input type="button" id="btn3" value="选择id为two的元素的下一个元素" /><br />
	匹配 prev 元素之后的所有 siblings 元素（兄弟、同级的所有兄弟）
	<input type="button" id="btn4" value="选择id为one的所有的兄弟元素" /><br />

	<hr />
	<div id="one">
		<div class="mini">
			111
		</div>
	</div>

	<div id="three">
		<div class="mini">
			444
		</div>
		<div class="mini">
			555
		</div>
		<div class="mini">
			666
		</div>
	</div>
	<div id="four">
	</div>
</body>

jQuery

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		$('#btn1').click(function(){
			$('div .mini').css('background-color','#FF0000');
		});
		$('#btn2').click(function(){
			$('body>div').css('background-color','#FF0000');
		});
		$('#btn3').click(function(){
			$('#one+div').css('background-color','#FF0000');
		});
		$('#btn4').click(function(){
				$("#one~div").css("background-color","#FF0000");
		});
	});
</script>

结果：

基本过滤选择器

html

	<body>
		<input type="button" id="btn1" value="body中的第一个div元素" />
		<input type="button" id="btn2" value="body中的最后一个div元素" />
		<input type="button" id="btn3" value="选择body中的奇数的div" />
		<input type="button" id="btn4" value="选择body中的偶数的div" />
		<hr />
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		<span id="four">
		</span>
	</body>

jQuery

		<script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
		<script>
			$(function(){
				$('#btn1').click(function(){
					$('body div:first').css('background-color','#FF0000');
				});
				$('#btn2').click(function(){
					$('body div:last').css('background-color','#FF0000');
				});
				$('#btn3').click(function(){
					$('body div:odd').css('background-color','#FF0000');
				});
				$('#btn4').click(function(){
					$('body div:even').css('background-color','#FF0000');
				});
			});
		</script>

结果：点击第三个按钮时

属性选择器

	<body>
		<input type="button" id="btn1" value="选择有id属性的div" />
		<input type="button" id="btn2" value="选择有id属性的值为two的div" />
		<hr />
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>

		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		<span id="four">
		</span>
	</body>

jQuery

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		$("#btn1").click(function(){
		 $("div[id]").css("background-color","red");
		});
						
		$("#btn2").click(function(){
		 $("div[id='two']").css("background-color","red");
		});
	});			
</script>

结果：

表单选择器

	<body>
		<input type="button" id="btn1" value="选择所有input元素" />
		<input type="button" id="btn2" value="选择文本框" />
		<br />
		<form>
			文本框<input type="text" /><br />
			复选框<input type="checkbox" /><br />
			单选框<input type="radio" /><br />
			图片<input type="image" /><br />
			文件<input type="file" /><br />
			提交按钮<input type="submit" /><br />
			恢复按钮<input type="reset" /><br />
			密码框<input type="password" /><br />
			btn按钮<input type="button" /><br />
			下拉列表<select>
				<option />1</select>
			<option />2</select>
			</select>
			文本域<textarea></textarea><br />
			btn按钮<button></button>
		</form>
	</body>

jQuery

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		$('#btn1').click(function(){
		 $(":input").css('background-color','#FF0000');
		});
	});
	$(function(){
		$('#btn2').click(function(){
		 $(":text").css('background-color','#FF0000');
		});
	});	
</script>

结果：

birdlun

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基本选择器、层级选择器、过滤选择器、属性选择器、表单选择器

目录基本选择器的使用层级选择器列：层级选择器练习基本过滤选择器属性选择器表单选择器基本选择器的使用 <body> <input type="button" id="btn1" value="标签选择器" /> <input type="button" id="btn2" value="类选择器" /> <inp...
复制链接

扫一扫

专栏目录