jQuery之选择器

最新推荐文章于 2024-11-13 01:18:00 发布

幼稚园「先生」

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量48

点赞数

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_63040021/article/details/131131892

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jquery:在线引入：https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js

基础选择器

基础选择器
id选择器	#id属性值	$(“#id属性值”)	选择id为指定值的元素对象（如果有多个同名id，则以第一个为准）
类选择器	.class属性值	$(".class属性值 ")	选择class为指定值的元素对象
元素选择器	标签名/元素名	$(“标签名/元素名”)	选择所有指定标签的元素对象
通用选择器	*	$(“*”)	选择页面中所有的元素对象
组合选择器	选择器1,选择器2,…	$(“选择器1,选择器2,…”)	选择指定选择器选中的元素对象

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>基础选择器</title>
	</head>
	<body>
		<div id="myDiv1" class="ad">元素选择器</div>
		<div id="myDiv1">id选择器1<span>span中的内容</span></div>
		<span class="ad">样式选择器</span>
	</body>
	 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	 <script type="text/javascript">
	 	// id选择器			#id属性值
		const myDiv = $("#myDiv1");
		console.log('id选择器',myDiv);

		// 类选择器		 	.class属性值
		const clad = $(".ad");
		console.log('类选择器',clad);

		// 元素选择器			标签名/元素名
		const spans = $("span");
		console.log('元素选择器',spans);


		// 通用选择器		*
		const all = $("*");
		console.log('通用选择器',all);

		// 组合选择器		选择器1,选择器2,..
		const group = $("#myDiv1,div,.ad");
		console.log('组合选择器',group);


	 </script>
</html>

层次选择器

层次选择器	格式	示例
后代选择器	父元素指定元素（空格隔开）	$(“父元素指定元素”)	选择父元素的所有指定元素（包含第一代、第二代等）
子代选择器	父元素 > 指定元素（大于号隔开）	$(“父元素 > 指定元素”)	选择父元素的所有第一代指定元素
相邻选择器	元素 + 指定元素（加号隔开）	$(“元素 + 指定元素”)	选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到）
同辈选择器	元素 ~ 指定元素（波浪号隔开）	$(“元素 ~ 指定元素”)	选择元素的下面的所有指定元素

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>层次选择器</title>
		<style>
			.tColor{
				background: #00cdff;
			}
			.g{
				background: #ffceac;
			}
		</style>
	</head>
	<body>
		<div id="parent">层次择器
			<div id="child" class="tColor">父选择器
				<div class="g">子选择器</div>
				<img src="https://img1.baidu.com/it/u=1944117848,1840655305&fm=253&fmt=auto&app=120&f=PNG?w=754&h=473"
					  width="270" height="130"  alt=""/>
				<img src="https://img1.baidu.com/it/u=1944117848,1840655305&fm=253&fmt=auto&app=120&f=PNG?w=754&h=473"
					  width="270" height="130"  alt=""/>
			</div>
			<p>p元素</p>
			<div>
				选择器2<div>选择器2中的div</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<!--	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
  <script type="text/javascript">
		// 后代选择器
		const hd = $("#parent div");
		console.log('后代选择器',hd);

		// 子代选择器
		const zd = $("#parent > div");
		console.log('子代选择器',zd);

		// 相邻选择器
		const xl = $("#child + div");
		console.log('相邻选择器',xl);

		// 同辈选择器
		const imgS = $(".g ~ img");
		console.log('同辈选择器',imgS);

	</script>
</html>

表单选择器

Forms	名称	举例
表单选择器	$(“:input”)	查找所有input元素，包含input、textarea、select、button
文本框选择器	:text	查找所有文本框type=“text”
密码框选择器	:password	查找所有密码框type=“password”
单选按钮选择器	:radio	查找所有单选按钮
多选按钮选择器	:checkbox	查找所有复选框
提交按钮选择器	:submit	查找所有提交按钮
图像按钮选择器	:image	查找所有图像域
重置按钮选择器	:reset	查找所有重置按钮
文件域选择器	:file	查找所有文件域
按钮选择器	:button	查找所有按钮

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>表单选择器</title>
	</head>
	<body>
		<form id='myForm' name="myForm"  method="post">
			<input type="hidden" name="uno" value="9999" disabled="disabled"/>
			<label for="name">姓名:<input type="text" id="name" name="name" /><br />
			密码:<input type="password" id="pwd" name="pwd" value="123456" /><br />
			年龄:<input type="radio" name="age" value="0" checked="checked"/>小屁孩
				  <br />
			爱好:<input type="checkbox" name="fav" value="篮球"/>篮球
				<input type="checkbox" name="fav" value="rap"/>rap
				<input type="checkbox" name="fav" value="爬床"/>唱
				 <input type="checkbox" name="fav" value="代码"/>跳<br />
			</label>
			<label for="from">来自:<select id="from" name="from">
					<option value="-1" selected="selected">请选择</option>
					<option value="0">北京</option>
					<option value="1">上海</option>
				</select>
			</label>
				<br />
			<label>
				简介:
				<textarea rows="10" cols="30" name="intro"></textarea>
			</label><br />
			头像:<input type="file" /><br />
			<input type="image" src="https://www.baidu.com/img/bd_logo1.png"
				   width="20" height="20" alt=""/>
			<button type="submit" onclick="return checkForm();">提交</button>
			<button type="reset" >重置</button>

		</form>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 表单选择器		:input
		const inputs = $(":input");
		console.log(inputs);
		// 元素选择器
		const inputs2 = $("input");
		console.log(inputs2);
	</script>
</html>