五、JS05 jQuery 选择器

五、jQuery 选择器

5.1 jQuery 选择器概述

选择器是 jQuery 的基础，对事件的处理，遍历 DOM 和 Ajax 操作都依赖于选择器

jQuery 选择器可以通过 CSS 选择器、条件过滤两种方式获取元素

5.1.1 什么是 jQuery 选择器

• 在 CSS 中，选择器的操作是获取元素，而后为其添加 CSS 样式美化外观
• jQuery 不仅良好地基础了 CSS 选择器的语法，还继承了其获取页面元素便捷高效的特点
• jQuery 选择器与 CSS 选择器不同之处在于，jQuery 选择器是为获取的元素添加行为
• jQuery 的操作都建立在获取元素之上，否则无法实现想要的效果

5.1.2 jQuery 选择器的优势

jQuery 选择器有以下两点优势

1、简介的写法

• $() 函数在很多 JS 库中被当做一个选择器函数来使用，jQuery 中是如此
• 其中 $() 函数代替 JS 中的函数 示例

//代替 javaScript 中的 document.getElementById();
$("#id")
//代替 javaScript 中的 document.getElementByTagName();
$("tagName");

2、完善的处理机制

• 使用 jQuery 选择器要比传统的 javaScript 函数要更为简洁
• 如果元素不存在时，JS 不会保存阻塞其他代码的运行

5.1.3 jQuery 选择器的类型

jQuery 可以通过 CSS 选择器和过滤选择器两种方式选取元素，每种方式又有不同的方法来获取元素

具体 jQuery 选择器的类型如下

• 通过 CSS 选择器选取元素
  • 基本选择器
  • 层次选择器
  • 属性选择器
• 通过过滤选择器选取元素
  • 基本过滤选择器
  • 可见性过滤选择器

6.2 通过 CSS 选择器选取元素

jQuery 支持大多 CSS 选择器

其中常用的有 CSS 的基本选择器、层次选择器、属性选择器

CSS 中的这些选择器，在 jQuery 中同样适用

6.2.1 基本选择器

• jQuery 基本选择器与 CSS 基本选择器相同
• jQuery 基本选择器继承了 CSS 选择器的语法和功能
• 主要由元素标签名、class、id 和多个选择器组成
• 通过基本选择器可以实现大多数页面元素查找
• jQuery 基本选择器主要包括标签选择器、类选择器、id 选择器、并集选择器和全局选择器
• jQuery 基本选择器详细说明

名称	语法构成	描述	返回值	示例
标签选择器	element	匹配指定的标签名元素	元素集合	$(“h2”) 选取所有的 h2 元素
类选择器	.class	匹配指定的 class 元素	元素集合	$(“.title”) 选取所有以 class 为 title 的元素
id 选择器	#id	匹配指定的 id元素	单个元素	$(“#title”) 选取以 id 为 title 的元素
并集选择器	selector1,selector2, …,selectorN	将每个选择器匹 配的元素合并后一起返回	元素集合	$(“div,p,title”) 选取所有以 div、p 和class 为 title 的元素
全局选择器	*	匹配所有元素	元素集合	$(“*”) 选取所有元素

6.2.2 层次选择器

• jQuery 中的层次选择器与 CSS 中的层次选择器相同

• 它们都是根据获取元素与其父元素、子元素、兄弟元素关系而构成的选择器

• 可以使用 jQuery 的层次选择器，通过 DOM 元素之间的层次关系来获取元素

• jQuery 中也有四种层次选择器：后代选择器、子选择器、相邻元素选择器和同辈元素选择器

• jQuery 层次选择器详细说明

名称	语法构成	描述	返回值
后代选择器	root offspring	选取 root 元素里的所有 offspring (后代) 元素	元素集合	$(“#menu span”) 选取 #menu 下所有的 元素
子选择器	parent>child	选取 parent 元素下的 child (子) 元素	元素集合	$(“#menu>span”) 选取 #menu 下的子元素
相邻元素选择器	prev+next	选取紧邻 prev 元素 之后的 next 元素	元素集合	$(“h2+dl”) 选取紧邻 元素 之后的同辈元素 元素
同辈元素选择器	prev~sibings	选取 prev 元素之后的 所有 sibings() 同辈元素	元素集合	$(“h2~dl”) 选取 元素 之后所有的同辈元素

• 在 jQuery层次选择器中
  • 可以使用 next() 方法(获取下一个元素) 来替代 相邻元素选择器
  • 也可以使用 nextAll() 方法(获取元素之后的所有同辈元素) 来替代同辈元素选择器

6.2.3 属性选择器

• 属性选择器就是通过 HTML 元素的属性选择元素的选择器
• 它与 CSS 中的属性选择器语法完全一致
• 从语法构成上来看，它遵循 CSS 选择器
• 从类型上来看，它属于 jQuery 中按条件过滤获取元素的选择器之一
• jQuery 属性选择器详细说明

语法构成	描述	返回值	示例
[attribute]	选取包含指定属性的元素	元素集合	$(“[href]”) 选取还有 href 属性的元素
[attribute=value]	选取等于指定属性是某个特定值的元素	元素集合	$(“[href=‘#’]”) 选取 href 属性值为 “#” 的元素
[attribute!=value]	选取不等于指定属性是某个特定值的元素	元素集合	$(“[href!=‘#’]”) 选取 href 属性值不为 “#” 的元素
[attribute^=value]	选取给定属性是以某些特定值开始的元素	元素集合	$(" [href^=‘en’]" )选曲 href 属性值 以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	元素集合	$(" [href$='.jpg']")选取 href 属性值 以 .jpg 结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	元素集合	$(" [href=‘txt’]" )选取 href 属性值 中含有 txt 的元素

6.3 通过条件过滤选取元素

过滤选择器主要通过特定的过滤规则筛选出所需的 DOM 元素

过滤规则与 CSS 中的 伪类语法相同，及都以一个冒号 ( : ) 开头

冒号前是需要过滤的元素，冒号后是过滤条件

按照不同的过滤条件，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器

以下主要介绍 基本选择器和可见性选择器

6.3.1 基本过滤选择器

• 基本过滤选择器是过滤选择器中最常见的一种
• 基本过滤选择器详细说明

语法	描述	返回值	示例
:first	选取第一个元素	单个元素	$(“li:first”) 选取所有 元素中的第一个 元素
:last	选取最后一个元素	单个元素	$(“last”) 选取所有 元素中的最后一个 元素
:not(selector)	选取去除所有与给定选择器匹配的元素	集合元素	$(“li:not(.three)”) 选取 class 不是 three 的元素
:even	选取索引是偶数的所有元素 (index 从 0 开始)	集合元素	$(“li:even”) 选取索引是偶数的所有 元素
:odd	选取索引是奇数的所有元素 (index 从 0 开始)	集合元素	$(“li:odd”) 选取索引是奇数的所有 元素
:eq(index)	选取索引等于 index 的元素 （index 从 0 开始）	单个元素	$(“li:eq(1)” ) 选取索引等于 1 的 元素
:gt(index)	选取索引大于 index 的元素 （index 从0开始）	集合元素	$(" li:gt(1)" ) 选取索引大于 1 的 元素 （注：大于1，不包括1）
:lt(index)	选取索引小于 index 的元素 （index 从0开始）	集合元素	$(“li:lt(1)” ) 选取索引小于 1 的 元素 （注：小于1，不包括1）
:header	选取所有标题元素，如 h1~h6	集合元素	$(“:header” ) 选取网页中所有标题元素
:focus	选取当前获取焦点的元素	集合元素	$(“:focus” ) 选取当前获取焦点的元素
:animated	选择所有动画	集合元素	$(“:animated” ) 选取当前所有动画元素

6.3.2 可见性过滤选择器

• jQuery 选择器还可以通过元素的显示状态来获取元素
• jQuery 中，通过元素显示状态选取元素的选择器称为可见性过滤选择器
• 可见性过滤选择器的详细说明

语法	描述	返回值	示例
:visible	选取所有可见的元素	集合元素	$(“:visible” ) 选取所有可见的元素
:hidden	选取所有隐藏的元素	集合元素	$(“:hidden” ) 选取所有隐藏的元素

6.3.3 jQuery 选择器的注意事项

在使用 jQuery 选择器时，有一些问题是必须注意的，否则无法显示正确效果

1、选择器中含有特殊符号的注意事项

• W3C 规范中，规定属性值中不能含有某些特殊字符，但是不代表不能含有
• 当表达式中有 # 或 . 等特殊字符时，按照普通方法处理，就会出错
• 解决这类错误就需要使用到转义符转义
• 当表达式中含有特殊符号 例如

<div id="id#a">aadiv>
<div id="id[2]">ccdiv>

<script type="text/javascript">
	$("#id#a");
    $("#id[2]");
script>

• 这类代码正常运行下去则会报错
• 这时需要使用转义符对符号进行转义
• 正确写法如下

$("#id\\#a");
$("#id\\[2\\]");

2、选择器中含有空格的注意事项

• 选择器中的空格也是不容忽视的，多一个空格或少一个空格，可能会得到截然不同的结果
• 所以在使用 jQuery 选择器时，要格外注意选择器中的空格