JQuery技术总结（选择器篇）
JQuery技术总结（选择器篇）
jQuery 选择器
jQuery 选择器继承了 CSS 与 Path 语言的部分语法，允许通过标签名、属性名或内容对DOM 元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过 jQuery 选择器对页面元素的精准定位，才能完成元素属性和行为的处理。
选择器的优势
与传统的 JavaScript 获取页面元素和编写事务相比，jQuery 选择器具有明显的优势，具体表现在以下两个方面：
代码更简单。
完善的检测机制。
2. 完善的检测机制
在传统的 JavaScript 代码中，给页面中某元素设置事务时必须先找到该元素，然后赋予相应的属性或事件；如果该元素在页面中不存在或被前面代码所删除，那么浏览器将提示运行出错信息，影响后续代码的执行。因此，在 JavaScript 代码中，为了避免显示这样的出错信息，先要检测该元素是否存在，然后再运行其属性或事件代码，从而导致代码冗余，影响执行效率。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript 代码检测页面元素 </title>
<style type="text/css">
body{font-size:12px;text-align:center}
</style>
<script type="text/javascript">
window.onload=function(){
if(document.getElementById("divT"))
{
var oDiv=document.getElementById("divT");
oDiv.innerHTML=" 这是一个检测页面 ";
}
}
</script>
</head>
<body>
</body>
</html>
在 JavaScript 代码中，有一行代码如下：
if(document.getElementById("divT")){...}
该行代码用于检测所定位的页面元素是否存在，如果存在，则执行下面的代码，否则不执行；假设不编写该行代码检测元素的存在，则在浏览器中将出现出错提示信息。
jQuery 选择器详解
根据所获取页面中元素的不同，可以将 jQuery 选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器 6 种。
基本选择器是 jQuery 中使用最频繁的选择器，它由元素 Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找。
选择器 功能 返回值
#id 根据给定的 ID 匹配一个元素 单个元素
element 根据给定的元素名匹配所有元素 元素集合
.class 根据给定的类匹配元素 元素集合
* 匹配所有元素 元素集合
selector1,selectorN 将每一个选择器匹配到的元素合并后一起返回 元素集合
层次选择器
层次选择器通过 DOM 元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素。
选择器 功能 返回值
ancestor descendant 根据祖先元素匹配所有的后代元素 元素集合
parent > child 根据父元素匹配所有的子元素 元素集合
prev + next 匹配所有紧接在 prev 元素后的相邻元素 元素集合
prev ~ siblings 匹配 prev 元素之后的所有兄弟元素 元素集合
说明：ancestor descendant 与 parent > child 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev + next 可以使用 .next() 代替，而 prev ~siblings 可以使用 nextAll() 代替。
简单过滤选择器
过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头；简单过滤选择器是过滤选择器中使用最广泛的一种。
选择器 功能 返回值
first() 或 : first 获取第一个元素 单个元素
last() 或 : last 获取最后一个元素 单个元素
:not(selector) 获取除给定选择器外的所有元素 元素集合
:even 获取所有索引值为偶数的元素，索引号从 0 开始 元素集合
:odd 获取所有索引值为奇数的元素，索引号从 0 开始 元素集合
:eq(index) 获取指定索引值的元素，索引号从 0 开始 单个元素
:gt(index) 获取所有大于给定索引值的元素，索引号从 0 开始 元素集合
:lt(index) 获取所有小于给定索引值的元素，索引号从 0 开始 元素集合
:header 获取所有标题类型的元素，如 h1、h2…… 元素集合
:animated 获取正在执行动画效果的元素 元素集合
内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。
选择器 功能 返回值
:contains(text) 获取包含给定文本的元素 元素集合
:empty 获取所有不包含子元素或者文本的空元素 元素集合
:has(selector) 获取含有选择器所匹配的元素的元素 元素集合
:parent 获取含有子元素或者文本的元素 元素集合
可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征获取元素，。
选择器 功能 返回值
:hidden 获取所有不可见元素，或者 type 为 hidden 的元素 元素集合
:visible 获取所有的可见元素 元素集合
属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，如 ID 号或匹配属性值的内容，并以“[”号开始、以“]”号结束。
选择器 功能 返回值
[attribute] 获取包含给定属性的元素 元素集合
[attribute=value] 获取等于给定的属性是某个特定值的元素 元素集合
[attribute!=value] 获取不等于给定的属性是某个特定值的元素 元素集合
[attribute^=value] 获取给定的属性是以某些值开始的元素 元素集合
[attribute$=value] 获取给定的属性是以某些值结尾的元素 元素集合
[attribute*=value] 获取给定的属性是以包含某些值的元素 元素集合
[selector1][selector2][selectorN] 获取满足多个条件的复合属性的元素 元素集合
子元素过滤选择器
在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器 :eq(index)可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery 中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。
选择器 功能 返回值
:nth-child(eq|even|odd|index) 获取每个父元素下的特定位置元素，索引号从 1 开始 元素集合
:first-child 获取每个父元素下的第一个子元素 元素集合
:last-child 获取每个父元素下的最后一个子元素 元素集合
:only-child 获取每个父元素下的仅有一个子元素 元素集合
表单对象属性过滤选择器
表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如 enabled、disabled、checked、selected 属性。
选择器 功能 返回值
:enabled 获取表单中所有属性为可用的元素 元素集合
:disabled 获取表单中所有属性为不可用的元素 元素集合
:checked 获取表单中所有被选中的元素 元素集合
:selected 获取表单中所有被选中 option 的元素 元素集合
表单选择器
无论是提交还是传递数据，表单在页面中的作用是显而易见的。通过表单进行数据的提交或处理，在前端页面开发中占据重要地位。因此，为了使用户能更加方便地、高效地使用表单，在 jQuery 选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象。
选择器 功能 返回值
:input 获取所有 input、textarea、select 元素集合
:text 获取所有单行文本框 元素集合
:password 获取所有密码框 元素集合
:radio 获取所有单选按钮 元素集合
:checkbox 获取所有复选框 元素集合
:submit 获取所有提交按钮 元素集合
:image 获取所有图像域 元素集合
:reset 获取所有重置按钮 元素集合
:button 获取所有按钮 元素集合
:file 获取所有文件域 元素集合