jQuery选择器

jQuery选择器完全继承了CSS的风格。学会使用选择器是学习jQuery的基础，jQuery的行为规则必须在获取到元素之后才能生效。

jQuery选择器相比较getELementById()传统函数简洁的多，而且还能避免某些错误。当使用getELementById('#cr')时，若网页中没有id为cr的元素时，此时会报错。而使用jQuery就不会报错，jQuery获得的始终是一个对象。

基本选择器

• id选择器 $('#test')
• 类选择器 $('.test')
• 元素选择器 $('p')
• 通配符选择器 $('*') //选取所有的元素
• 选择多个元素并集体返回 $(div,span,p.myClass) //选取所有的<div>,<span>以及class为myClass的<p>标签的一组元素

层次选择器

• $('ancestor descendant') //选取ancestor元素里的所有descendant（后代）元素
• $('parent>chlid') //只选取parent元素下的child子元素
• $('prev+next') //选取紧邻在prev元素后的下一个next同辈元素
• $('prev~siblings') //选取紧邻在prev元素后的所有siblings同辈元素

可以使用next()方法来替代$('.prev+next')选择器。$('.prev+next') == $('prev').next('next')
可以使用nextAll()方法来替代$('#prev~siblings')选择器。$('#prev~next') == $('#prev').nextAll('next')

过滤选择器

1. 基本过滤选择器

• :first 选取第一个元素（返回单个元素）
  $('div:first')选取所有div元素中的第一个div元素
• :last 选取最后一个元素（返回单个元素）
  $('div:last')选取所有div元素中的最后一个div元素
• :not(selector) 去除所有与给定选择器匹配的元素（返回集合元素）
  $('input:not(.myClass)')选取class不是myClass的input元素
• :even 选取索引是偶数的所有元素，索引从0开始（返回集合元素）
  $('input:even')选取索引是偶数的input元素
• :odd 选取索引是奇数的所有元素，index从0开始（返回集合元素）
  $('input:odd')选取索引是奇数的input元素
• :eq(index) 选取索引是index的元素，索引从0开始（返回单个元素）
  $('input:eq(1)')选取索引是1的input元素
• :gt(index) 选取索大于index的元素，索引从0开始（返回集合元素）
  $('input:gt(1)')选取索引大于1的input元素
• :lt(index) 选取索引小于index的元素，索引从0开始（返回集合元素）
  $('input:lt(1)')选取索引小于1的input元素
• :header 选取所有的标题元素，例如h1,h2,h3...（返回集合元素）
  $(':header')选取网页中的所有标题
• :animated 选取所有正在执行动画的元素（返回集合元素）
  $('div:animated')选取正在执行动画的div元素
• :focus 选取当前获取焦点的元素 （返回集合元素）
  $(':focus') 选取当前获取焦点的元素

2.内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。

• :contains(text) 选取文本内容为text的元素（返回集合元素）
  $('div:contains('me')') 选取含有文本me的div元素
• :empty 选取不包含子元素或者文本的空元素（返回集合元素）
  $('div:empty') 选取不包含子元素或者文本的空元素
• :has(selector) 选取选择器所匹配的元素的元素（返回集合元素）
  $('div:selector(p)') 选取含有p元素的div元素
• :parent 选取包含子元素或者文本的元素（返回集合元素）
  $('div:parent') 选取包含子元素或者文本的div元素

3. 可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选中相应的元素

• :hidden 选取所有不可见的元素（返回集合元素）
  $(':hidden') 选取选取所有不可见的元素
• :visible 选取所有可见的元素（返回集合元素）
  $(':visible') 选取选取所有可见的元素
  在可见性过滤选择器，需要注意选择器:hidden，它不仅包含样式属性display为none的元素，也包括文本隐藏域(<input type='hidden'/>)和visibility:hidden之类的元素

4. 属性过滤选择器

属性过滤选择器的规则是通过元素的属性来获取相应的元素。

• [attr] 选取拥有此属性的元素（返回集合元素）
  $('div[id]') 选取拥有属性id的div元素
• [attr=value] 选取属性值为value的元素（返回集合元素）
  $('div[title=test]') 选取属性title为test的div元素
• [attr=!value] 选取属性值不为value的元素（返回集合元素）
  $('div[title=!test]') 选取属性title为不test的div元素（没有title的属性也会被选中）
• [attr^=value] 选取属性值以value开头的元素（返回集合元素）
  $('div[title^=test]') 选取属性title以test开头的div元素
• [attr$=value] 选取属性值以value结尾的元素（返回集合元素）
  $('div[title$=test]') 选取属性title以test结尾的div元素
• [attr*=value] 选取属性值包含value的元素（返回集合元素）
  $('div[title*=test]') 选取属性title中含有test的div元素

5. 子元素过滤选择器

子元素过滤选择器的规则相对应其他选择器有些复杂，需要将元素的子元素和父元素区分清楚，还要注意它和普通过滤选择器的区别。

• :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或奇偶元素。（index从1算起）**（返回集合元素）
  :eq()只匹配一个元素，而:nth-child()将为每一个父元素匹配子元素
• :first-child 选取每一个父元素的第一个子元素（返回集合元素）

$('ul li:first').css('color','#f0833c');    //选取所有li中的第一个li元素
$('ul li:first-child(odd)').css('color','#0f00c3'); //选取每一个父元素ul中的第一个子元素

• :last-child 选取每一个父元素的最后一个子元素（返回集合元素）
• :only-child 如果某个元素是它父元素中的唯一的子元素，那么它将会被匹配。如果父元素中含有其它子元素就不被匹配。（返回集合元素）
  $('ul li:only-child'); 在ul中选取是唯一子元素的li元素

千万注意:ntn-child中的index是从1开始的

6. 表单对象属性过滤选择器

• :enabled 选取所有可用元素（返回集合元素）
  $('#form1:enabled') 选取id为form1中所有可用的元素
• :disabled 选取所有不可用元素（返回集合元素）
  $('#form1:disabled ') 选取id为form1中所有不可用的元素
• :checked 选取所有被选中的元素。单选框、复选框（返回集合元素）
  $('input:checked') 选取所有被选中的input元素
• :selected选取所有被选中的选项元素。下拉列表（返回集合元素）
  $('#form1:selected') 选取所有被选中的选项的元素

表单选择器

为了使用户能够更加灵活的操作表单，jQuery特地加入了表单选择器。

• :input 选取所有的input、textarea、select、button元素
• :text 选取所有的单行文本框
• :password 选取所有的密码框
• :radio 选取所有的单选框
• checkbox 选取所有的复选框
• :submit 选取所有的提交按钮
• :img 选取所有的图像按钮
• :reset 选取所有的重置按钮
• :button 选取所有的按钮
• :file 选取所有的上传域
• hidden 选取所有的不可见元素

关于选择器中的空格问题

• .test .aa = E F是后代选择器
• .test.aa 是作用于一个元素上，只有这个元素同时包含这两个类才会有效果
  带空格的选择器之间的关系是“父子关系”，并且可以是非直接父子关系。不带空格的选择条件之间的逻辑为“且”