2.1JQuery选择器是什么
1、简洁的写法
2.3.2层次选择器
在实际开发过程中可以使用next()方法代替$("prev+next")选择器，使用nextAll()来代替$("prev~siblings")选择器。
2.3.3过滤选择器
2，内容过滤选择器
内容过滤选择器
3，可见性过滤选择器
可见性过滤选择器是根据元素的可见与不可见状态来选择相应的元素。
4,属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
5，子元素过滤选择器
子元素过滤选择器的介绍以及说明：
：nth-child()选择器介绍
6，表单对象属性过滤选择器
7、表单选择器
在JQuery中使用表单选择器可以快速的获取到表单中的元素或者特定的元素。
1、CSS选择器
要使某一个CSS样式作用于一个特定的HTML元素，就需要找到这个元素，在CSS中执行这个任务的表现规则成为CSS选择器。
常用的CSS选择器的分类以及介绍：
|
选择器
|
语法
|
描述
|
示例
|
|
标签选择器
|
E{
CSS规则
}
|
以HTML元素作为选择符 |
div{
width:200px
height:100px;
background-color:red;
}
|
|
ID选择器
|
#IdValue{
CSS规则
}
|
以HTML元素的唯一标识ID作为选择符
|
#IdValue{
width:200px
height:100px;
background-color:red;
} |
|
类选择器
|
E.className{
CSS规则
}
|
以HTML元素的class作为选择符
|
.divclass{
width:200px
height:100px;
background-color:red;
} |
| 群组选择器 | E1,E2,E3{ CSS规则 } |
多个HTML原色对应同一个CSS样式
|
div，p,ul{
width:200px
height:100px;
background-color:red;
}
|
| 后代选择器 |
E F{
CSS规则
}
|
HTML元素E的任意后代元素F
|
#link a{
text-decoration:none;
}
|
| 通配符选择器 |
*{
CSS规则
}
|
HTML所有元素作为选择符
|
*{
margin:0;
padding:0;
font-size:15px;
}
|
除此之外，CSS还有伪类选择器、子选择器、临近选择器，属性选择器。但是主流的浏览器并不完全支持这些选择器。
2、JQuery选择器
JQuery选择器的特点与CSS选择器的使用方式类似。
程序实例：
$(document).ready(function () {
$(".divclass").click(function () {
alert("Hello World");
});
});
2.2JQuery的优势
使用$("#tagid")来代替getElementById()方法，使用$("div")来代替getElementByTagName()方法。简化了代码的书写，便于开发。
2、支持CSS1到CSS3选择器
JQuery支持CSS1、CSS2的全部和CSS3的部分选择器。同时也拥有少量的独有的选择器。所以在使用JQuery开发的时候几乎不用考虑浏览器的兼容性问题。
3、完善的处理机制
使用JQuery选择器不仅比传统的getElementById()、getElementByTagName()函数简洁的多，同时还避免了很多错误。因为在使用getElementById()、getElementByTagName()方法的时候有时候需要判断元素是否存在，但是使用JQuery就不需要判断元素是否存在。
2.3JQuery选择器
JQuery选择器包括：基本选择器、层次选择器、过滤选择器和表单选择器。
2.3.1基本选择器
基本选择器是JQuery最常用的选择器，也是最简单的选择器。可以通过HTML元素的id，class和标签名称来查找DOM元素。在网页中每一个id名称只能使用一次，但是class可以使用多次。基本选择器的说明如下：
基本选择器
|
选择器
|
描述
|
返回 |
示例
|
|
#id(id选择器)
|
根据给定的id匹配一个元素 |
单个元素
|
$("#test")选取id值为test的html元素 |
|
.class(类选择器)
|
根据给定的类名称匹配一个元素 | 集合元素 | $(".test")选取所有class值为test的html元素 |
|
*
|
匹配所有元素
|
集合元素
|
$("*")选取所有的元素 |
|
element
|
根据给定的元素名称匹配元素 |
集合元素
|
$("p")选取页面中所有的p标签 |
|
selector1,selector2,selector3........selectorN
|
将每一个选择器匹配到的元素合并到一起以后返回 |
集合元素
|
$("div,span,p,myClass,myId")选取所有的div,span,p和class值为myClass以及id值为myId的html元素 |
如果想要通过DOM元素之间的层次关系选择特定的元素，可以通过层次选择器来实现。
层次选择器介绍说明
|
选择器
|
描述
|
返回
|
示例
|
| $("ancestor descendant") | 选取祖先(ancestor)元素所有的后代(descendant)元素 |
集合元素
|
$("div span")选取div中的所有的span元素 |
| $("parent>child") | 选择父类(parent)元素之下的子元素(child)，与$("ancestor descendant")有区别，$("ancestor descendant")是选择后代元素 |
集合元素
|
$("div>span")选取<div>元素下面元素名称是<span>的子元素 |
| $("prev+next") | 选取紧接在prev后面的next | 集合元素 | $(".one+div")选取class为one的下一个<div>同辈元素 |
| $("prev~siblings") |
选取prev元素之后所有的siblings元素
|
集合元素
|
$("#two~div")选取id为two的元素后面的所有的<div>同辈元素 |
|
|
选择器 |
方法
|
程序实例 |
| 等价关系 | $(".one+div") | $(".one").next("div"); |
$(".one").next("div").css("background-color","#bbffaa");
|
| 等价关系 |
$("#prev~div")
|
$("#prev").nextAll("div"); |
$("#prev").nextAll("div").css("background-color","#bbffaa");
|
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器的语法基本相同， 也就是选择器都是以冒号(:)开头，按照不同的过滤规则过滤过滤选择器可以分成：基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤选择器和表单对象属性过滤选择器。
1，基本过滤选择器
基本过滤选择器
| 选择器 |
描述
|
返回
|
示例
|
|
：first
|
选取第一个元素 |
单个元素
|
$("div:first")选取所有div中的第一个元素 |
|
：last
|
选取最后一个元素 | 单个元素 | $("div:last")选取所有div元素中的最后一个元素 |
|
：not(selector)
|
去除所有与给定选择器匹配的元素
|
集合元素
|
$("input:not(.myClass)")选择所有class值不是myClass的input元素 |
|
:even
|
选取索引是偶数的所有元素，索引是从0开始 | 集合元素 | $("input:even")选取所有的索引为偶数的input元素 |
|
:odd
|
选取所有索引为奇数的元素，索引从0开始 |
集合元素
|
$("input:odd")选取所有索引为奇数的input元素 |
|
：eq(index)
|
选取索引等于index的元素，index从0开始 | 单个元素 | $("input:eq(1)")选取index等于1的input元素 |
|
：gt(index)
|
选取索引大于index的元素，index从0开始
|
集合元素
|
$("input:gt(1)")选取索引大于1而不包括1的元素 |
|
：lt(index)
|
选取索引小于index的元素，index从0开始 |
集合元素
|
$("input:lt(4)")选取index小于4而不包括4的元素 |
|
：header
|
选取所有的标题元素，例如：h1,h2,h3等等 |
集合元素
|
$(":header")选取网页中的所有的标题元素 |
|
：animated
|
选取当前页面中正在执行动画的所有元素 |
集合元素
|
$(div:animated)选取当前页面中正在执行动画的所有的div元素 |
|
：focus
|
选取当前获得焦点的元素 | 集合元素 |
$(":focus")选取当前获取焦点的所有元素
|
|
选择器
|
描述
|
返回
|
示例
|
|
:contains(HelloWorld)
|
选取含有文本内容为"HelloWorld"的元素 |
集合元素
|
$("div:contains("China")")选取包含文本"China"的所有div元素 |
|
:empty
|
选取不包含子元素或者文本的空元素
|
集合元素
|
|
|
：has(selector)
|
选取含有选择器匹配元素的元素 |
集合元素
|
$("div:has(p)")选取含有p元素的div元素 |
|
：parent
|
选取含有子元素或者文本元素的元素 |
集合 元素
|
$("div:parent")选取拥有子元素（包括文本元素）的div元素 |
|
选择器
|
描述
|
返回
|
示例
|
|
：hidden
|
选取所有不可见的元素 |
集合元素
|
$(:hidden)选取所有不可见的元素，包括<input type="hidden"/><div style="display:none">和<div style="visibility: hidden">
|
|
:visable
|
选取所有可见的元素 |
集合元素
|
$("div:visable")选取所有的可见的div元素 |
属性过滤选择器
|
选择器
|
描述
|
返回
|
示例
|
| [attribute] | 选择拥有此属性的元素 |
集合元素
|
$("div[id]")选择拥有属性id的元素 |
|
[attribute=value]
|
选择属性值为value的元素 |
集合元素
|
$("div[title=test]")选择title值为"test"的div元素 |
| [attribute!=value] |
选择属性值不等于value的元素
|
集合元素 |
$("div[title!=test]")选择title值不等于"test"的div元素（没有title属性的div元素也会被选择）
|
|
[attribute^=value]
|
选择以value开始的元素
|
集合元素
|
$("div[title^=test]")选择title值以test开始的div元素
|
| [attribute$=value] | 选择以value结束的元素 |
集合元素
|
$("div[title$=test]")选择title值以test结束的div元素 |
| [attribute*=value] | 选择属性值含有value的元素 |
集合元素
|
$("div[title*=test]")选择title值中含有test的div元素
|
| [attribute|=value] | 选取属性等于给定字符串或以该字符串为前缀（该字符串后面跟一个"-"）的元素 |
集合元素
|
$("div[title|="en"]")选择title值等于"en"或者"en"为前缀(该字符串后跟一个"-")的div元素
|
| [attribute~=value] | 选择属性用空格分隔的值中包含一个给定值的元素 |
集合元素
|
$("div[title~="uk"]")选择属性title用空格分隔的值中包括"uk"的div元素 |
| [attribute1][attribute2]...[attributeN] | 用属性选择器合并成一个复合的属性选择器，满足多个条件 |
集合元素
|
$("div[id][title=test]")选择拥有id值并且title值等于test的div元素 |
| 选择器 | 描述 | 返回 |
示例
|
|
：nth-child(index/even/odd/equation)
|
选组每一个父元素的第index个元素或者奇偶元素(index从1开始计算) | 集合元素 |
：eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且：nth-child的index从1开始计算，：eq(index)的index从0开始计算
|
|
:first-child
|
选择每一个父元素的第一个子元素 |
集合元素
|
：first只返回单个元素，:first-child会为每一个父元素匹配自己的第一个子元素。例如：$("ul li:first-child")选择每一个ul元素的第一个li标签
|
|
：last-child
|
选择每一个父元素的最后一个子元素 |
集合元素
|
：last只返回单个元素，：last-child选择每一个父类元素的最后一个子元素。例如：$("ul li:last-child")表示选择ul中最后一个li元素
|
|
：only-child
|
如果某一个元素是父元素中唯一的子元素将会被匹配，如果该父元素里面还有其他元素，则不会被匹配 | 集合元素 | $("ul li:only-child")在ul元素中选择是唯一元素的li元素 |
|
选择器
|
描述
|
|
：nth-child(even)
|
选取每一个父元素下index值是偶数的元素 |
|
：nth-child(odd)
|
选取每一个父元素下index值为奇数的元素
|
|
：nth-child(2)
|
选取每一父元素下index值为2的子元素 |
|
：nth-child(3n)
|
选择每一个父元素下index值是3的倍数的元素（n从1开始）
|
|
：nth-child(3n+1)
|
选择每一个父元素下index值是3n+1的元素（n从1开始） |
|
选择器
|
描述
|
返回
|
示例
|
|
：enabled
|
选取所有可用的元素 |
集合元素
|
$("#form1:enabled")选择id为form1的表单内所有的可用元素
|
|
：disabled
|
选取所有不可用的元素 | 集合元素 |
$("#form2:disabled")选取id为form2的表单内的所有可用的元素
|
|
：checked
|
选取所有被选中的元素(单选框、复选框) |
集合元素
|
$("input:checked")选取所有被选中的input元素
|
|
:selected
|
选取所有被选中的选项元素（下拉列表） |
集合元素
|
$("select options:selected")选取所有被选中的选项元素
|
表单对象属性过滤示例
|
选择器
|
描述 |
返回
|
示例
|
| :input |
选取所有的<input>，<textare>、<select>、<button>
|
集合元素
|
$(":input")选取所有的input、select、textarea、button元素 |
|
:text
|
选择所有的单行文本框元素 | 集合元素 |
$(":text")选取所有的单行文本框元素
|
|
:password
|
选择所有的密码框元素
|
集合元素
|
$(":password")选取所有的密码框元素
|
|
:radio
|
选择所有的单选框 | 集合元素 |
$("radio")选择所有的单选框
|
| :checkbox | 选择所有的多选框 | 集合元素 |
$(":checkbox")选取所有的复选框
|
|
:submit
|
选择所有的提交按钮
|
集合元素
|
$(":submit")选择所有的提交按钮元素
|
| :image | 选择所有的图像按钮 | 集合元素 | $(":image")选取所有的图像按钮 |
|
:reset
|
选取所有的重置按钮 |
集合元素
|
$(":reset")选择所有的重置按钮
|
|
:button
|
选择所有的button | 集合元素 | $(":button")选择所有的按钮 |
| :file | 选择我所有的上传区域 |
集合元素
|
$("file")选择我所有的上传区域 |
| :hidden | 选择所有不可见的元素 |
集合元素
|
$(":hidden")选择所有不可见的
|