JQuery选择器

最新推荐文章于 2024-04-16 03:29:12 发布

点D点D

最新推荐文章于 2024-04-16 03:29:12 发布

阅读量257

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/LIUHONGLIAN915/article/details/80870123

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

基本选择器

基本选择器	功能	返回值	示例
$("#id")	根据给定id匹配一个元素	单个元素	$("#xdl"):选取id为xdl的元素
$(".class")	根据给定的类匹配元素	元素集合	$(".xdl"):选择所有class值为xdl的元素
$("element")	根据给定的元素名匹配元素	元素集合	$("p"):选择所有的<p>元素
$("*")	匹配所有元素	元素集合	$("*"):选择所有的元素
$("selector1,selector2,...,selectorn")	将每个选择器匹配到的元素合并后一起返回	元素集合	$("p,span,.xdl"):选择所有的<p>元素、<span>元素和class值为xdl的元素

层次选择器

层级选择器	功能	返回值	示例
$("ancestor descendant")	根据祖先ancestor元素匹配所有的后代descendant元素	元素集合	$("ul li"):选择<ul>元素中所有的<li>元素
$("parent>child")	选取parent元素下所有的child元素。（孙子及孙子下的所有元素都不会命中）	元素集合	$("ul > li"):选择<ul>元素中所有的<li>子元素
$("prev+next")	选择prev元素后面紧跟的next兄弟元素	元素集合	$("h1 + p"):选择<h1>元素后面紧跟的<p>兄弟元素
$("prev~siblings")	匹配prev元素后面所有的siblings兄弟元素	元素集合	$("h1 ~ p"):选择<h1>元素后面所有的<p>兄弟元素

基本过滤选择器

基本过滤选择器	功能	返回值	示例
:first	选取第一个元素	单个元素	$(".xdl:first"):选取所有class值为“xdl”中的第一个元素
:last	选取最后一个元素	单个元素	$(".xdl:last"):选取所有class值为“xdl”中的最后一个元素
:not(selector)	去除所有与给定选择器匹配的元素	元素集合	$("li:not(.xdl)"):选取所有<li>元素，其中不包括class值为"xdl"的元素
:even	选取索引值偶数的所有元素，索引值从0开始	元素集合	$(".xdl:even"):选取索引是偶数的所有class值为“xdl”的元素
:odd	选取索引是奇数的所有元素，索引值从0开始	元素集合	$(".xdl:odd"):选取索引是奇数的所有class值为"xdl"的元素
:eq(index)	选取索引值等于index的元素，索引值从0开始	单个元素	$(“li:eq(1)”):在所有<li>元素中，选取索引值为1的元素
:gt(index)	选取索引值大于index的元素，索引值从0开始	元素集合	$(“li:gt(1)”):在所有<li>元素中，选取索引值大于1的元素(不包括1)
:lt(index)	选取索引值小于index的元素，索引值从0开始	元素集合	$(“li:gt(1)”):在所有<li>元素中，选取索引值小于1的元素(不包括1)
:header	选取所有的标题元素	元素集合	$(":header"):选取整个网页中所有的<h1>、<h2>等标题元素
:animated	选取当前正在执行动画的所有元素	元素集合	$(“div:animated”):选取正在执行动画的<div>元素
:lang	选取指定语言下的所有元素	元素集合	$("div:lang(en)"):选取所有的<div lang="en">或<div lang="en-us">元素
:focus	选取当前获取焦点的元素	单个元素	$("input:focus"):选取当前获取焦点的<input>元素
:root	选取该文档的根元素	单个元素	$(":root"):永远都是选取<html>元素

内容过滤选择器

内容过滤选择器	功能	返回值	示例
:contains(text)	选取含有文本内容text的元素	元素集合	$(“div:contains(mlove)”):选取含有文本”mylove”的<div>元素
:empty	选择内容为空（不包含子元素或者文本）的元素	元素集合	$(“div:empty”):内容为空的div元素。如<div></div>
:has(selector)	选取含有选择器所匹配的元素的元素	元素集合	$(“div:has(li)”):选取含有<li>元素的<div>元素
:parent	选择含有子元素或文本的非空元素	元素集合	$(“div:parent”):选取含有子元素或文本元素的<div>元素。如<div>hello</div>

可见性过滤选择器

可见性过滤选择器	功能	返回值	示例
:hidden	获取所有的不可见元素，包括CSS属性中的display:none和visibility:hidden；input元素属性为type=hidden	元素集合	$("input:hidden"):选取所有的不可见<input>元素，包括<input style="display:none">、<input style="visibility:hidden">和<input type="hidden">
:visible	获取所有的可见元素	元素集合	$("input:visible"):选取所有可见的<input>元素

属性过滤选择器

属性过滤选择器	功能	返回值	示例
[attribute]	取所有含有此属性attribute的元素	元素集合	$(“div[id]”]:选取所有拥有属性id的<div>元素
[attribute=value]	选取属性的值为value的元素	元素集合	$(“div[class='xdl']”]:选取所有class值为"xdl"的<div>元素
[attribute!=value]	选取属性的值不等于value的元素	元素集合	$(“div[class!='xdl']”]:选取所有class值不为"xdl"的<div>元素
[attribute^=value]	选取属性值以value开头的元素	元素集合	$(“div[class^='xdl']”]:选取所有class值以"xdl"开头的<div>元素
[attribute$=value]	选取属性值以value结尾的元素	元素集合	$(“div[class$='xdl']”]:选取所有class值以"xdl"结尾的<div>元素
[attribute*=value]	取属性值包含value的元素	元素集合	$(“div[class*='xdl']”]:选取所有class值包含"xdl"的<div>元素
[selector1][selector2][selectorN]	获取同时满足多个属性的元素	元素集合	$("div[class="xdl][page]"):获取所有class值为"xdl"并包含page属性的<div>元素

子元素过滤选择器

子元素过滤选择器	功能	返回值	示例
:first-child	获取每个父元素的第一个元素	元素集合	$("ul li:first-child"):获取每个<ul>中的第一个<li>元素
:first-of-child	获取每个元素的所有同级同名元素的第一个兄弟元素	元素集合	$("li:first-of-type"):获取每个<li>中的所有同级的<li>元素的第一个兄弟<li>元素
:last-child	获取每个父元素的最后一个元素	元素集合	$("ul li:last-child"):获取每个<ul>中的最后一个<li>元素
:last-of-type	获取每个元素的所有同级同名元素的最后一个兄弟元素	元素集合	$("li:last-of-type"):获取每个<li>中的所有同级的<li>元素的最后一个兄弟<li>元素
:nth-child(index/even/odd/formula)	1.获取每个父元素下的第index个子元素(index从1开始) 2.获取每个父元素下的奇偶元素 3.获取每个父元素下与“带n参数的表达式”相关的元素	元素集合	1.$("ul li:nth-child(3)"):获取每个<ul>下的第3个子<li>元素 2.$("ul li:nth-child(even)"):获取每个<ul>下的所有第偶数个<li>元素 3.$("ul li:nth-child(3n)"):获取每个<ul>下的第3n个<li>元素
:nth-last-child(index/even/odd/formula)	同:nth-child(),不同点是:nth-last-child计数顺序为从最后一个元素开始到第一个元素	元素集合	同上
:nth-of-type(index/even/odd/formula)	同:nth-child(),不同点是:nth-of-type获取每个元素的所有同级同名的第index个元素、奇偶元素或formula相关元素	元素集合	1.$("li:nth-of-type(3)"):获取每个<li>下所有同级同名的元素中的第3个元素 2.$("li:nth-of-type(even)"):获取每个<li>下所有同级同名的元素中的第偶数个元素 3.$("li:nth-of-type(3n)"):获取每个<li>下所有同级同名的元素中的第3n个元素
:nth-last-of-type(index/even/odd/formula)	同:nth-of-type,不同点是:nth-last-of-type计数是从最后一个元素开始到第一个元素	元素集合	同上
:only-child	获取所有父元素中只有唯一一个子元素的元素集合	元素集合	$("ul li:only-child"):获取每个<ul>下只有唯一一个<li>元素的元素集合
:only-of-type	获取在同一级下只有唯一一个同名元素的元素集合	元素集合	$("li:only-of-type"):获取所有在同一级下只拥有唯一一个<li>元素的元素集合

表单对象属性过滤选择器

表单对象属性过滤选择器	功能	返回值	示例
:enabled	获取所有可用元素	元素集合	$("#form:enabled"):选取id值为form的表单中所有可用的元素
:disabled	获取所有不可用元素	元素集合	$("#form:disabled"):选取id值为form的表单中所有不可用元素
:checked	获取所有被选中的元素(包括单选框、复选框)	元素集合	$("input:checked"):获取所有被选中的<input>元素
:selected	获取所有被选中的选项元素	元素集合	$("select:selected"):获取所有被选中的<select>元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单属性过滤选择器</title>
			<script src="js/jquery-3.3.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li><input type="checkbox" value="1">荔枝</li>
			<li><input type="checkbox" value="2">芒果</li>
			<li><input type="checkbox" value="3">桂圆</li>
			<li><input type="checkbox" value="4">菠萝</li>
		</ul>
		<div>
			<button>全选</button>
			<button>反选</button>
			<button>全不选</button>
		</div>
	</body>
</html>
<script>
		$("button:contains(全选)").click(function(){
			$("input").prop("checked",true);
		});
		$("button:contains(反选)").click(function(){
			var objchecked = $("input:checked");
			$("input:not(:checked)").prop("checked",true);
			objchecked.prop("checked",false);
		});
		$("button:contains(全不选)").click(function(){
			$("input").prop("checked",false);
		});
		
	</script>

表单选择器

表单选择器	功能	返回值	示例
:input	选取所有的<input>、<textarea>、<select>和<button>元素	元素集合	$("#form:input"):选取id值为form元素下的所有<input>、<textarea>、<select>和<button>元素
:text	选取所有的单行文本框	元素集合	$(":text"):选取所有的单行文本框
:password	选取所有的密码框	元素集合	$(":password"):选取所有的密码框
:radio	选取所有的单选框	元素集合	$(":radio"):选取所有的单选框
:checkbox	选取所有的复选框	元素集合	$(":checkbox"):选取所有的复选框
:submit	选取所有的提交按钮	元素集合	$(":submit"):选取所有的提交按钮
:image	选取所有的图片按钮	元素集合	$(":image"):选取所有的图片按钮
:reset	选取所有的重置按钮	元素集合	$(":reset"):选取所有的重置按钮
:button	选取所有的按钮	元素集合	$(":button"):选取所有的按钮
:file	选取所有的上传域	元素集合	$(":file"):选取所有的上传域
:hidden	选取所有的不可见元素	元素集合	$(":hidden"):选取所有的不可见元素

点D点D

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery选择器

基本选择器基本选择器功能返回值示例 $("#id") 根据给定id匹配一个元素单个元素 $("#xdl"):选取id为xdl的元素 $(".class") 根据给定的类匹配元素元素集合 $(".xdl"):选择所有class值为xdl的元素 $("element") 根据给定的元素名匹配元素元素集合 ...
复制链接

扫一扫