jQuery 中必学的选择器，基础选择器、层级选择器、筛选器、表单选择器、内容选择器、属性选择器

最新推荐文章于 2021-01-21 21:33:10 发布

通天地之人曰儒

最新推荐文章于 2021-01-21 21:33:10 发布

阅读量113

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_42488035/article/details/107368965

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#image {
				width: 400px;
				;
				height: 400px;
			}
		</style>

	</head>
	<body>
		<div id="root">
			<input type="text" focus="show();" />
			<input type="text" blur="hide();" />
			<h1 id="H1"> 这里是H1,下标为0</h1>
			<h1 id="H2"> 这里是H2,下标为1</h1>
			<h1 id="H3"> 这里是H3,下标为2</h1>
			<input id="image" type="image" src="img/meizi_2.jpg" />
			<input id="text" type="text" />
			<input id="submit" type="submit" />
			<input id="password" type="password" />
			<input id="checkbox" type="checkbox" />
			<input id="radio" type="radio" />
			<input id="reset" type="reset">
			<input id="button" type="button">
			<input id="file" type="file">
			<input id="enabled" type="enabled">
			<input id="disabled" disabled="disabled" />
			<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
			<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
			<input id ="checkbox" type="checkbox" name="newsletter" checked="checked" value="Monthly" />
			<div id="div1"></div>
			<span>这是span</span>
			<option value="2" selected="selected">这是option</option>
			<table>
				<tr>
					<td></td>
					<td>这是td</td>
					<td></td>
				</tr>
			</table>
			<input name="apple" />
			<input type="checkbox" name="flower" checked="checked" />
		</div>
	</body>
</html>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 基础选择器、
	// ID选择器用于搜索的，通过元素的 id 属性中给定的值
	console.log($("#H1")); //id选择器
	// element 一个用于搜索的元素。指向 DOM 节点的标签名。
	console.log($("h1")); //标签选择器
	// class 一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。
	console.log($(".h1"));
	// 将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
	console.log($(".h1,#H1,span"));
	// 层级选择器、
	// ancestor descendant  在给定的祖先元素下匹配所有的后代元素
	//任何有效选择器 用以匹配元素的选择器，并且它是第一个选择器的后代元素
	//后代选择器
	console.log($("div input")[0]);
	// parent 任何有效选择器> child 用以匹配元素的选择器，并且它是第一个选择器的子元素
	//子类选择器 // 在给定的父元素下匹配所有的子元素
	console.log($("div>input")[0]);
	// prev + next 匹配所有紧接在 prev 元素后的 next 元素
	// 匹配所有紧接在 prev 元素后的 next 元素
	// 相邻选择器
	console.log($("h1+input"));
	// prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素
	//同级选择器
	console.log($("h1~input"));
	// 筛选器、
	// :first 选中第一个匹配的元素
	console.log($("h1:first")[0]);
	// :not(selector) 选中排除该选择器选中的元素之外
	console.log($("h1:not(#H1)"));
	// :even 偶数元素
	console.log($("h1:even"));
	// :odd 奇数元素
	console.log($("h1:odd"));
	// :eq(index) 选中下标为n的元素
	console.log($("h1:eq(1)"));
	// :gt(index) 选中下标大于n的元素
	console.log($("h1:gt(1)"));
	// :lt(index) 选中下标小于n的元素
	console.log($("h1:lt(1)"));
	// :last 选中最后一个匹配的元素
	console.log($("h1:last"));
	// :focus 匹配当前获取焦点的元素
	$("input").focus(function() {
		$("input").css("background-color", "#FFFFCC");
	});
	// :blur() 方法 失去焦点
	$("input").blur(function() {
		$("input").css("background-color", "#FF0000");
	});
	// 表单选择器、
	// :input 匹配所有 input, textarea, select 和 button 元素
	console.log($(":input"));
	// :text 匹配所有的单行文本框
	console.log($(":text"));
	// :password 匹配所有密码框
	console.log($(":password"));
	// :radio 匹配所有单选框
	console.log($(":radio"));
	// :checkbox 匹配所有复选框
	console.log($(":checkbox"));
	// :submit 匹配提交按钮
	console.log($(":submit"));
	// :image 匹配图片按钮
	console.log($(":image"));
	// :reset 匹配重置按钮
	console.log($(":reset"));
	// :button 匹配所有按钮（包括input按钮和button按钮）
	console.log($(":button"));
	// :file 匹配文件域
	console.log($(":button"));
	/* 表单对象属性 */
	// :enabled 匹配所有可用元素
	console.log($("input:enabled"));
	// :disabled 匹配所有不可用元素
	console.log($("input:disabled"));
	// :checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来
	// 说，获取选中推荐使用 :selected
	console.log($("input:checked"));
	// :selected 匹配所有选中的option元素
	console.log($("option:selected"));
	console.log($("input:not(:checked)"));
	// 内容选择器
	// :empty 匹配所有不包含子元素或者文本的空元素
	console.log($("td:empty"));
	// :contains(text) 匹配包含给定文本的元素
	console.log($("td:empty"));
	// :has(selector) 匹配含有选择器所匹配的子元素的元素
	console.log($("tr:has(td)"));
	let h1 = document.querySelector("#H1");
	console.log(h1);
	console.log($("h1~input")[0]);
	/* 属性 */
	// [attribute]查找所有含有 id 属性的 div 元素
	console.log($("div[id]")[0]);
	// [attribute=value] 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
	console.log($("input[type='file']"));
	// [attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素
	console.log($("input[type !='file']"));
	// [attribute^=value]匹配给定的属性是以某些值开始的元素
	console.log($("input[type ^='fi']"));
	// [attribute$=value]匹配给定的属性是以某些值结尾的元素
	console.log($("input[type $='x']"));
	// [attribute*=value]匹配给定的属性是以包含某些值的元素
	console.log($("input[type $='x']"));
	// [attrSel1][attrSel2][attrSelN]复合属性选择器，需要同时满足多个条件时使用。
	console.log($("input:not([type $='x'][id])"));
</script>

通天地之人曰儒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 中必学的选择器，基础选择器、层级选择器、筛选器、表单选择器、内容选择器、属性选择器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #image { width: 400px; ; height: 400px; } </style> </head> <body> <.
复制链接

扫一扫