欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

学习笔记 · JQuery选择器

程序员文章站 2022-07-13 11:59:47
...

学习笔记 · JQuery选择器


作者：氯磷Rolin

参考书籍：《HTML+CSS+JavaScript 编程入门指南 下册》

jQuery选择器

  • jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
  • jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
  • jQuery 中所有选择器都以美元符号开头：$()。

选择器的使用方法

jQuery选择器的用法如下，在下面分项中将不再演示选择器的用法

  • JavaScript:
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	$(function () {
		$('input').on('click', function () {
			var b = $(".top");
			$("#btn").css("width","200px");
			b.css("background-color","pink");
			$("tr:first").css("background-color","yellow");
		});
	});
</script>
  • HTML:
<body>
		<div class="top">
			<input type="button" value="点我" id="btn"/>
			<table border="2">
				<tr>
					<td>123</td>
					<td>456</td>
					<td>789</td>
				</tr>
				<tr>
					<td>abc</td>
					<td>def</td>
					<td>ghi</td>
				</tr>
			</table>
		</div>
	</body>
  • 运行结果：
    学习笔记 · JQuery选择器
    学习笔记 · JQuery选择器

基本选择器

基本选择器在实际应用中比较广泛，建议重点掌握jQuery的基本选择器，它是其他类型选择器的基础，是jQuery最重要的部分。

ID选择器

利用DOM元素的id属性值来筛选匹配的元素，并以jQuery包装集的形式返回给对象。

如果页面中出现了两个相同的id属性值，那么在页面运行时会报出JS运行错误的对话框。所以在页面中设置id值时要保持唯一。

  • ID选择器的使用方法：$(#element);

元素选择器

元素选择器是根据元素名称匹配相应的元素。指向的是DOM元素的标签名，也就是说元素选择器是根据元素的标签名选择的。如<div></div> <input />等

  • 元素选择器的使用方法：$("element") -->$("div")

这个选择器选择的所有该标签的元素，如$("div")选择的是所有div元素。

  • 如果有多个<div>元素而只想取其中某个指定的元素时，可以使用：$("div").eq(0) or $("div").get(0)
  • 其中eq()返回的是一个jQuery对象，而get()返回的是一个DOM对象

元素选择器返回的是一组jQuery包装集，一组的包装集可以使用eq()或get()获取特定元素

类名选择器

类名选择器是通过元素拥有的css类的名称查找匹配DOM元素的。
一个元素可以有多个CSS类，一个CSS类也可以匹配到多个元素。如果在元素中有一个匹配的class的名称，就可以被类名选择器选择到。

类名选择器也是一组jQuery包装集

  • 类名选择器使用方法：$(".class"); --> $(".word_color");

复合选择器

复合选择器可以将多个选择器组合在一起，两个选择器间用,分隔，只要复合其中一个条件就可以被匹配，返回的也是一组jQuery包装集。

  • 复合选择器使用方法：$("selector1,selector2,selectN") -->$("span,div.top,#element")

通配符选择器(*)

通配符就是指*，它代表着页面上的所有元素，如果使用$("*")，将取得页面上所有的DOM元素集合的jQuery包装集。

  • 通配符选择器使用方法：$("*")

层级选择器

除了基本的选择器外，jQuery的层级选择器更加灵活，也更强大。
因为DOM的结构就是层级结构，所以我们经常要根据层级关系进行选择。

祖孙选择器（ancestor descendant选择器）

ancestor descendant选择器中的ancestor代表祖先，descendant代表子孙，用于在给定的元素下匹配所有的后代元素。

  • ancestor 是指任何有效的选择器
  • descendant 是用以匹配元素的选择器，并且他是ancestor所指定的后代元素
  • 祖孙选择器的使用方法：$("ancestor descendant") -->$("ul li")
  • $("ul li")指 ul 下所有 li 的子元素

孩子选择器 (parent > child 选择器)

该选择器中parent代表父元素，child代表子元素。该选择器只能选择父元素的直接子元素

如果子元素的子元素里含有选择器标签，也不会被选中

  • 孩子选择器的使用方法: $("parent > child") --> $("form > input")
  • 此行匹配表单中的直接子元素 <input />

相邻选择器 (prev + next 选择器)

该选择器用于匹配所有紧接在 prev 元素后的 next 元素。其中prev和next是两个同辈元素。

  • prev 指任何有效的选择器
  • next 是一个有效的选择器并紧挨着prev选择器
  • 该选择器只会选择相邻最近的一个元素
  • 相邻选择器的用法：$("prev + next")–>$("#fuc + td")

示例：$("#fuc + td"); 只会选择 456 而不会选中 789

<tr>
	<td id="fuc">123</td>
	<td>456</td>
	<td>789</td>
</tr>

随后选择器（prev ~ siblings选择器）

prev ~ siblings 选择器用于匹配 prev 元素之后的所有 siblings 元素，其中prev和siblings是两个同辈元素。

  • prev 是指任何有效的容器
  • siblings 是一个有效的选择器，其元素和prev选择器匹配的元素是同辈元素
  • 使用方法：$("prev ~ siblings") --> $("div ~ p")
  • 选择所有在div后面，且和div同辈的p元素

过滤选择器

过滤选择器包括简单过滤器、内容过滤器、可见性过滤器、表单对象过滤器、子元素选择器等

简单过滤器

简单过滤器以：开头，用于实现简单过滤效果的过滤器，例如匹配找到的第一个元素等

过滤器 说明 示例
:first 匹配找到的第一个元素 $("tr:first") 匹配表格的第一行
:last 匹配找到的最后一个元素 $("tr:last") 匹配表格的最后一行
:even 匹配所有索引值为偶数的元素 $("tr:even") 匹配表格的偶数行
:odd 匹配所有索引值为奇数的元素 $("tr:odd") 匹配表格的奇数行
:eq(index) 匹配一个给定索引值的元素 $("tr:eq(3)") 匹配表格的第4行(索引值从0开始)
:gt(index) 匹配所有大于给定索引值的元素 $("tr:gt(3)") 匹配表格第四个及以下的元素
:lt(index) 匹配所有小于给定索引值的元素 $("tr:lt(2)") 匹配表格第三个及以上的元素
:header 匹配如h1,h2,h3…之类的标题元素 $(":header") 匹配所有标题元素
:not(selector) 去除所有与给定选择器匹配的元素 $("input:not(:checked)") 匹配没有选中的input元素
:animated 匹配所有正在执行动画效果的元素 $(":animated") 匹配所有正在执行动画效果的元素

内容过滤器

内容过滤器是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选的。

过滤器 说明 示例
:contaions(text) 匹配包含给定文本的元素 $("li:contains('DOM')") 匹配含有DOM文本内容的li元素
:empty 匹配所有不包含子元素或者文本的空元素 $("li:empty)匹配不包含子元素或者文本的li元素
:has(selector) 匹配含有选择器所匹配元素的元素 $("td:has(p))匹配含有<p>标签的表格单元格td
:parent 匹配含有子元素或者文本的元素 $("li:parent)匹配含有子元素或者文本的li元素

可见性过滤器

元素的可见状态分为两种，分别是隐藏状态和现实状态。可见性过滤器就是利用元素的可见状态匹配元素的。

在应用:hidden过滤器时，display属性是none以及input元素的type属性为hidden的元素会被匹配到
因此可见性过滤器也有如下两种

  • :hidden 隐藏元素过滤器
  • :visible 可见元素过滤器

表单对象的属性过滤器

表单对象的属性过滤器通过表单元素的状态属性（如选中、不可用等状态）匹配元素，包括如下四种

过滤器 说明 示例
:checked 匹配所有被选中的元素 $("input:checked") 匹配checked属性为checked的input元素
:disabled 匹配所有不可用的元素 $("input:disabled") 匹配disabled属性为disabled的input元素
:enabled 匹配所有可用的元素 $("input:enabled") 匹配enabled属性为enabled的input元素
:selected 匹配所有选中的option元素 $("select option:selected") 匹配select元素中被选中的option元素

子元素选择器

子元素选择器用于筛选给定的某个元素的子元素，具体的过滤条件视选择器的种类而定。
jQuery提供的子元素选择器如下：

选择器 说 明 示例
:first-child 匹配所有给定元素的第一个子元素 $("ul li:fist-child") 匹配ul元素中的第一个 li 元素
:last-child 匹配所有给定元素的最后一个子元素 $("ul li:last-child") 匹配ul元素中的最后一个 li 元素
:only-child 匹配元素中唯一的子元素 $("ul li:only-child") 匹配只含有一个li元素的ul元素，选中其中的li元素
:nth-child(index/even/odd/equation) 匹配其父元素下第N个子或奇偶元素，index从1开始 $("ul li:nth-child(even)") 匹配ul元素中索引值为偶数的li元素

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

选择器 说 明 示 例
[atribute] 匹配包含给定属性的元素 $("div[name]") 匹配含有name属性的div元素
[atribute=value] 匹配给定的属性是某个特定值的元素 $("div[name=‘test’]") 匹配name属性是test的div元素
[atribute!=value] 匹配所有含有指定的属性，但属性不属于特定值的元素 $("div[name!=‘test’]") 匹配name属性不是是test的div元素(但要有name属性)
[atribute=value]* 匹配给定的属性是以某些值的元素 $("div[name*=‘test’]") 匹配name属性含有test的div元素
[atribute^=value] 匹配给定的属性是以某些值开始的元素 $("div[name^=‘test’]") 匹配name属性是以test开头的div元素
[atribute$=value] 匹配给定的属性是以某些值结尾的元素 $("div[name$=‘test’]") 匹配name属性是以test结尾的div元素
[selector1][selector2][selectorN] 符合属性选择器，在同时满足多个条件时使用 $("div[id][name^='test']") 匹配具有id属性且name属性是以test开头的div元素

表单选择器

  • 表单作为HTML中一种特殊的元素，操作方法较为多样性和特殊性，开发者不但可以使用之前的常规选择器或过滤器，也可以使用jQuery为表单专门提供的选择器和过滤器来准确的定位表单元素。
  • 常用于匹配在表单中出现的元素
选择器 说 明 示 例
:input 匹配所有input元素 $(":input")匹配所有的input元素 $("form :input") 匹配<form>标签中所有的input元素，form和:之间有空格
:button 匹配所有的普通按钮 $(":button")
:checkbox 匹配所有的复选框 $(":checkbox")
:file 匹配所有的文件域 $(":file")
:hidden 匹配所有的不可见元素 $(":hidden")
:image 匹配所有的图像域 $(":image")
:password 匹配所有的密码域 $(":password")
:radio 匹配所有的单选按钮 $(":radio")
:reset 匹配所有的重置按钮 $(":reset")
:submit 匹配所有的提交按钮 $(":submit")
:text 匹配所有的单行文本框 $(":text")
相关标签： 学习笔记 java css jquery html javascript

上一篇： jquery 遍历 slice(start,[end])

下一篇： JQuery学习笔记 选择器 --- 过滤选择器

推荐阅读