第二章 jQuery选择器 读书笔记
2.1 jQuery 选择器概述
2.1.1 什么是选择器
jQuery允许通过标签名，属性名或内容对DOM元素进行快速、准确的选择。
2.1.2 选择器的优势
与传统的JavaScript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在以下两个方面：
代码更简单
完善的检测机制
示例2-1 使用JavaScript实现隔行变色
使用JavaScript实现隔行变色
学号 姓名 性别 总分
1001 张晓明 男 320
1002 李明启 女 350
循环页面的元素会影响打开速度，如果使用jQuery选择器实现上述页面效果，则需要在页面中加入一些代码，如：
代码清单2-2 使用jQuery选择器实现隔行变色
使用jQuery选择器实现隔行变色
学号 姓名 性别 总分
1001 张晓明 男 320
1002 李明启 女 350
语法：element:nth-child(an+b){style properties}
表示element 对应的元素中，第an+b(n可以是任意整数)个元素应用css样式
tr:nth-child(2n+1):表示表中奇数行将显示这个定义的样式
tr:nth-child(odd):表示表中奇数行将显示这个定义的样式
tr:nth-child(2n):表示表中偶数行将显示这个定义的样式
tr:nth-child(even):表示表中偶数行将显示这个定义的样式
2.完善的检测机制
在传统的JavaScript代码中，给页面中某元素设置事务时必须先找到该元素，然后赋予相应的属性或事件；如果该元素在页面中不存在或者被前面代码所删除，那么浏览器将提示运行出错信息， 因此，先要检测该元素是否存在，然后再运行其属性或事件代码。
在jQuery选择器定位页面元素时，无需考虑所定位的元素在页面中是否存在，即使改元素不存在，浏览器也不提示出错。
示例2-3 使用JavaScript输出文字信息
JavaScript 代码检测页面元素
jQuery 代码检测页面元素
根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。
其中，在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
| 基本选择器 | 层次选择器 | 过滤选择器 | 表单选择器 |
| 简单过滤选择器 | |||
| 内容过滤选择器 | |||
| 可见性过滤选择器 | |||
| 属性过滤选择器 | |||
| 子元素过滤选择器 | |||
| 表单对象属性过滤选择器器 |
2.2.1 基本选择器
基本选择器由元素Id,Class,元素名，多个选择符组成
表2-1 基本选择器语法
| 选择器 | 功能 | 返回值 |
| #id | 根据给定的ID匹配一个元素 | 单个元素 |
| element | 根据给定的元素名匹配所有元素 | 元素集合 |
| .class | 根据给定的类匹配元素 | 元素集合 |
| * | 匹配所有元素 | 元素集合 |
| selector1,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 |
示例 2-5 使用jQuery基本选择器选择元素
使用jQuery基本选择器
ID
CLASS
SPAN
123
| 关键代码 | 功能描述 | 页面效果 |
| $("#divOne").css("display","block"); | 显示ID为divOne的页面元素 | |
| $("div span").css("display","block"); | 显示元素名为span的页面元素 | |
| $(".clsFrame .clsOne").css("display","block"); | 显示类别名为clsOne的页面元素 | |
| $("*").css("display","block"); | 显示页面中所有元素 | |
| $("#divOne,span").css("display","block"); | 显示ID为divOne和元素名为span页面元素 |
2.2.2 层次选择器
层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系
表2-3 层次选择器
| 选择器 | 功能 | 返回值 |
| ancestor descendant | 根据祖先元素匹配所有的后代元素 | 元素集合 |
| parent > child | 根据父元素匹配所有的子元素 | 元素集合 |
| prev + next | 匹配所有紧接在prev元素后的相邻元素 | 元素集合 |
| prev ~ siblings | 匹配prev元素之后的所有兄弟元素 | 元素集合 |
说明：
ancestor descendant 与parent > child 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。
示例2-6 使用jQuery层次选择器选择元素
使用jQuery层次选择器
Left
Right_1
Right_2
| 关键代码 | 功能描述 | 页面效果 |
| $("div span").css("display","block"); | 显示 中所有的 |
|
| $("div>span").css("display","block"); | 显示 中子标记 |
|
| $("#divMid + div").css("display","block"); | 显示ID为divMid元素后的下一个 | |
| $("#divMid ~ div").css("display","block") | 显示ID为divMid元素后的所有 | |
| $("#divMid").siblings("div").css("display","block") | 显示ID为divMid元素的所有相邻 |
2.2.3 简单过滤选择器
过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号(:)开头
表2-5 简单过滤选择器语法
| 选择器 | 功能 | 返回值 |
| first()或:first | 获取第一个元素 | 单个元素 |
| last()或:last | 获取最后一个元素 | 单个元素 |
| :not(selector) | 获取除给定选择器外的所有元素 | 元素集合 |
| :even | 获取所有索引值为偶数的元素，索引号从0开始 | 元素集合 |
| :odd | 获取所有索引值为奇数的元素，索引号从0开始 | 元素集合 |
| :eq(index) | 获取指定索引值的元素，索引号从0开始 | 单个元素 |
| :gt(index) | 获取所有大于给定索引值的元素，索引号从0开始 | 元素集合 |
| :lt(index) | 获取所有小于给定索引值的元素，索引号从0开始 | 元素集合 |
| :header | 获取所有标题类型的元素，如h1、h2 | 元素集合 |
| :animated | 获取正在执行动画效果的元素 | 元素集合 |
示例2-7 使用jQuery基本过滤选择器选择元素
使用jQuery基本过滤选择器
基本过滤选择器
- Item 0
- Item 1
- Item 2
- Item 3
Span Move
| 关键代码 | 功能描述 | 页面效果 |
| $("li:first").addClass("GetFocus"); | 增加第一个元素的类别 | |
| $("li:last").addClass("GetFocus"); | 增加最后一个元素的类别 | |
| $("li:not(.NotClass)").addClass("GetFocus"); | 增加去除所有与给定选择器匹配的元素类别 | |
| $("li:even").addClass("GetFocus"); | 增加所有索引值为偶数的元素类别，从0开始计数 | |
| $("li:odd").addClass("GetFocus"); | 增加所有索引值为奇数的元素类别，从0开始计数 | |
| $("li:eq(1)").addClass("GetFocus"); | 增加一个给定索引值的元素类别，从0开始计数 | |
| $("li:gt(1)").addClass("GetFocus"); | 增加所有大于给定索引值的元素类别，从0开始计数 | |
| $("li:lt(4)").addClass("GetFocus"); | 增加所有小于给定索引值的元素类别，从0开始计数 | |
| $(":header").addClass("GetFocus"); | 增加标题类元素类别 | |
| $("#spnMove:animated").addClass("GetFocus"); | 增加动画效果元素类别 |
2.2.4 内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。
表2-7 内容过滤选择器语法
| 选择器 | 功能 | 返回值 |
| :contains(text) | 获取包含给定文本的元素 | 元素集合 |
| :empty | 获取所有不包含子元素或者文本的空元素 | 元素集合 |
| :has(selector) | 获取含有选择器所匹配的元素的元素 | 元素集合 |
| :parent | 获取含有子元素或者文本的元素 | 元素集合 |
使用jQuery内容过滤选择器
ABCD
A
12
EFaH
表 2-8 页面执行效果
| 关键代码 | 功能描述 | 页面效果 |
| $("div:contains('A')").css("display","block"); | 显示包含给定文本"A"的元素 | |
| $("div:empty").css("display","block"); | 显示所有不包含子元素或者文本的空元素 | |
| $("div:has(span)").css("display","block"); | 显示含有标记的元素 | |
| $("div:parent").css("display","block"); | 显示含有子元素或者文本的元素 |
2.2.5 可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征获取元素
表2-9 可见性过滤选择器语法
| 选择器 | 功能 | 返回值 |
| :hidden | 获取所有不可见元素，或者type为hidden的元素 | 元素集合 |
| :visible | 获取所有的可见元素 | 元素集合 |
使用jQuery可见性过滤选择器
Visible
表2-10 页面执行结果
| 关键代码 | 功能描述 | 页面效果 |
| $("div:visible").addClass("GetFocus"); | 增加所有可见元素类别 | |
| $("span:hidden").show().addClass("GetFocus"); | 增加所有不可见元素类别 |
2.2.6 属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以"]"号结束
表2-11 属性过滤选择器语法
| 选择器 | 功能 | 返回值 |
| [attribute] | 获取包含给定属性的元素 | 元素集合 |
| [attribute=value] | 获取等于给定的属性是某个特定值的元素 | 元素集合 |
| [attribute!=value] | 获取不等于给定的属性是某个特定值的元素 | 元素集合 |
| [attribuge^=value] | 获取给定的属性是以某些值开始的元素 | 元素集合 |
| [attribuge$=value] | 获取给定的属性是以某些值结尾的元素 | 元素集合 |
| [attribute*=value] | 获取给定的属性是以包含某些值的元素 | 元素集合 |
| [selector1][selector2][selector3] | 获取满足多个条件的复合属性的元素 | 元素集合 |
使用jQuery属性过滤选择器
ID
Title A
ID
Title AB
Title ABC
| 关键代码 | 功能描述 | 页面效果 |
| $("[id]").show(3000) | 显示所有含有id属性的元素 | |
| $("div[title='A']").show(3000); | 显示所有属性title的值是“A”的元素 | |
| $("div[title!='A']").show(3000); | 显示所有属性title的值不是"A"的元素 | |
| $("div[title^='A']").show(3000); | 显示所有属性title的值以"A"开始的元素 | |
| $("div[title$='C']").show(3000); | 显示所有属性title的值以“C”结束的元素 | |
| $("div[title*='B']").show(3000); | 显示所有属性title的值中含有“B”的元素 | |
| $("div[id='divAB'][title*='B']").show(3000); | 显示所有属性title的值中含有"B'且属性id的值是"divAB"的元素 |
2.2.7 子元素过滤选择器
突出指定某行的需求
jQuery可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。
表 2-13 子元素过滤选择器语法
| 选择器 | 功能 | 返回值 |
| :nth-child(eq|even|odd|index) | 获取每个父元素下的特定位置元素，索引号从1开始 | 元素集合 |
| :first-child | 获取每个父元素下的第一个子元素 | 元素集合 |
| :last-child | 获取每个父元素下的最后一个子元素 | 元素集合 |
| :only-child | 获取每个父元素下的仅有一个子元素 | 元素集合 |
使用jQuery子元素过滤选择器
- Item 1-0
- Item 1-1
- Item 1-2
- Item 1-3
- Item 2-0
- Item 2-1
- Item 2-2
- Item 2-3
- Item 3-0
| 关键代码 | 功能描述 | 页面效果 |
| $("li:nth-child(2)").addClass("GetFocus"); | 增加每个父元素下的第二个子元素类别 | |
| $("li:first-child").addClass("GetFocus"); | 增加每个父元素下的第一个子元素类别 | |
| $("li:last-child").addClass("GetFocus"); | 增加每个父元素下的最后一个子元素类别 | |
| $("li:only-child").addClass("GetFocus"); | 增加每个父元素下的仅有一个子元素类别 |
表单对象属性过滤器通过表单中的某对象属性特征获取该元素，如enabled、disabled、checked、selected
表2-15 表单对象属性过滤选择器
| 选择器 | 功能 | 返回值 |
| :enable | 获取表单中所有属性为可用的元素 | 元素集合 |
| :disable | 获取表单中所有属性为不可用的元素 | 元素集合 |
| :checked | 获取表单中所有被选中的元素 | 元素集合 |
| :selected | 获取表单中所有被选中option的元素 | 元素集合 |
使用jQuery子元素过滤选择器
表2-16 页面执行效果
关键代码
功能描述
页面效果
$("#form1 input:enabled").addClass("GetFocus")
增加表单中所有属性为可用的元素类别
$("#form1 input:disabled").addClass("GetFocus")
增加表单中所有属性为不可用的元素类别
$("#form1 input:checked").addClass("GetFocus");
增加表中所有被选中的元素类别
$("#Span2").html("选中项是："+$("select option:selected").text());
显示表单中所有被选中option的元素内容
2.2.9 表单选择器
表2-17 表单选择器语法
选择器
功能
返回值
:input
获取所有input textarea select
元素集合
:text
获取所有单行文本框
元素集合
:password
获取所有密码框
元素集合
:radio
获取所有单选按钮
元素集合
:checkbox
获取所有复选框
元素集合
:submit
获取所有提交按钮
元素集合
:image
获取所有图像域
元素集合
:reset
获取所有重置按钮
元素集合
:button
获取所有按钮
元素集合
:file
获取所有文件域
元素集合
代码清单2-13 使用jQuery表单过滤选择器获取元素
使用jQuery表单过滤选择器
表 2-18 页面执行效果
| 关键代码 | 功能描述 | 页面效果 |
| $("#form1 div").html("表单共找出Input类型元素："+$("#form1 :input").length); | 显示input类型元素的总数量 | |
| $("#form1 :text").show(3000); | 显示所有文本框对象 | |
| $("#form1 :password").show(3000); | 显示所有密码框对象 | |
| $("#form1 :radio").show(3000); | 显示所有单选按钮 | |
| $("#form1 :checkbox").show(3000); | 显示所有复选框对象 | |
| $("#form1 :submit").show(3000); | 显示所有提交按钮对象 | |
| $("#form1 :image").show(3000); | 显示所有图片域钮对象 | |
| $("#form1 :reset").show(3000); | 显示所有重置按钮对象 | |
| $("#form1 :button").show(3000); | 显示所有按钮对象 | |
| $("#form1 :file").show(3000); | 显示所有文件域对象 |
导航条在项目中的应用
以上代码在chrome浏览器下，点击“简化”按钮出现如下警告：
event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.
2.3.4
在页面代码中，首先通过如下代码：
$(".clsContent").css("display","none");
获取类名称为"clsContent"的元素集合，并实现其内容的显示或者隐藏。与此同时，通过下面代码变换图片：
$(".clsHead span img").attr("src","../images/2/a2.gif");
其中“.clsHead span img”表示获取类型clsHead中下的![]()
标记，即图片元素；attr(key,value)是jQuery中一个设置元素属性的函数，其功能是为所匹配的元素设置属性值，key是属性名称，value是属性值或内容。因此，此行代码的功能是，获取图片元素并改变其图片来源。
首先通过如下代码，检测当前内容的隐藏或显示状态
if($(".clsContent").is(":visible")){
在超级链接单击事件中，通过下面的代码检测单击的是“简化”还是“更多”字样
if($(".clsBot > a").text()=="简化"){
在代码中
$("ul li:gt(4):not(:last)").hide();