jQuery 表单元素选择器

$(":input")  选择所有input textarea select 和button元素

$(":text")  匹配文本框

$(":password")  密码框

$(":radio")  单选按钮

$(":checkbox")  复选框

$(":submit")  提交按钮

$(":image") 图像域

$(":reset") 重置按钮

$(":button")  所有按钮

$(":file") 文件域

jQuery --子元素筛选选择器：

$(":first-child") 所有父级元素下的第一个子元素

$(":last-child")   所有父级元素下的最后一个子元素

$(":only-child") 所有父级元素下只有唯一子元素的元素

$(":nth-child") 选择所有父元素下的第n个子元素，从1开始计数

$(":nth-last-child") 选择所有父元素下的第n个子元素，从倒叙开始计算

jQuery--属性选择器，基于属性来定位一个元素

$("[attribute|='value']")

$("[attribute*='value']") 等

|   *     ~   =  !=    ^=  $

浏览器支持：

• [att=val]、[att]、[att|=val]、[att~=val]  属于CSS 2.1规范

• [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范

• [name!="value"]  属于jQuery 扩展的选择器

CSS选择器无论CSS2.1版本还是CSS3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下浏览器才不支持

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

jQuery --可见性筛选选择器

$(":visible")  --选择所有显示的元素

$(":hidden")  --选择所有隐藏的

注意：

a、hidden选择器，不仅仅包含样式display="none"的元素，还包含隐藏表单、visibility等

 b、我们有几种方式可以隐藏一个元素：

1. CSS display的值是none。

2. type="hidden"的表单元素。

3. 宽度和高度都显式设置为0。

4. 一个祖先元素是隐藏的，该元素是不会在页面上显示

5. CSS visibility的值是hidden

6. CSS opacity的指是0

c、

如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

d、不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式

jQuery-内容筛选选择器：

$(":contain(text)")  --选择包含指定文本的元素

$(":parent") -- 选择所有包含子元素文本的元素

$(":empty") -- 选择所有没有子元素的元素（包含文本节点）

$(":has(selector)")  -- 选择元素中至少包含指定选择器的元素

.html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）

筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头,例如：

$(":first")  匹配第一个元素

$(":last")  匹配最后一个元素

$(":not(selector)") 过滤selector元素

$(":eq(inde)") 匹配的集合中找到所以呢值为index的元素

$(":gt(index)") 选择匹配集合中所有大于给定index的元素

$(":even") 选择索引值为偶数的元素，从0开始

$(":odd") 选择索引值为奇数的元素，从0开始

$(":It(index)") 选择匹配集合中所有小于给定index的元素

$(":header") 选择所有标题元素

$(":lang(language)") 选择指定语言的所有元素

$(":root) 选择该文档 的根元素

$(":animated) 选择所有正在执行动画效果的元素

选择器中的层级选择器就是用来处理:

子元素 后代元素 兄弟元素 相邻元素

$('parent>child') --子选择器

$('ancestor descendant') --后代选择器

$(".prev +next") --相邻兄弟选择器

$(".prev~siblings") --一般兄弟选择器

我们应该要避免出现这么冗余繁琐的选择器，可以最简单的在a元素的父元素上加一个id，或者class直接定位即可。当然这样的处理可能无形中可能要多出一个无意义的属性了

通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可

 this.style.color = "red"

但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象

id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题，比如:

1. IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的

2. getElementById的参数在IE8及较低的版本不区分大小写

3. IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A

4. IE8及较低的版本，浏览器不支持getElementsByClassName

css:

* {padding: 0; margin: 0;}

jQuery全选择器，通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素，eg：

$( "*" )

总体：

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

元素选择器：根据给定（html）标记名称选择所有的元素

$( "element" )

搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持

类选择器，顾名思义，通过class样式类名来获取节点

$( ".class" )

类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选