jQuery学习之二 jQuery选择器

一、jQuery选择器是什么
1.CSS选择器
2.jQuery选择器

二、jQuery选择器的优势
1.简洁的写法
2.支持从CSS1到CSS3选择器
3.完善的处理机制
  传统js选择器假如要操作的元素不存在会报错，jq不会，避免了判断存在操作的麻烦
  当需要使用jq判断某个元素在网页上是否存在时不能用
  if($('#id')){  xxx };
  要使用if($('#id').length > 0){ xxx };
  或先转化成DOM再判断if($('#id')[0]){ xxx };

三、jQuery选择器
1.基本选择器
  #id
  .class
  element
  *
  selector1,selector2,...selectorN

2.层次选择器
  $('.ancestorClass .sonClass'):   选中所有后代
  $('.fatherClass > .sonClass'):   选中子元素
  $('prev + next'):    选中代码顺序下一个兄弟
  $('prev ~ silbings'):   选中代码顺序后所有兄弟

3.过滤选择器
（1）基本过滤选择器
  :first             $("div:first")
  :last              $("div:last")
  :not(selector)     $("input:not(.myClass)")
  :even              $("input:even")
  :odd               $("input:odd")
  :eq(index)         $("input:eq(1)")
  :gt(index)         $("input:gt(1)")
  :lt(index)         $("input:lt(1)")
  :header            选取所有标题元素
  :animated          选取当前正在执行动画的所有元素
  :focus             选取当前获取焦点的元素

（2）内容过滤选择器
  :contains(text)    选取文本内容为“text”的元素
  :empty             选取不包含子元素或者文本的空元素
  :has(selector)     选取含有选择器所匹配的元素的选择器
  :parent            选择含有子元素或者文本的元素

（3）可见性过滤选择器
  :hidden            选取所有不可见的元素
  :visible           选取所有可见的元素

（4）属性过滤选择器
  [attribute]                拥有属性
  [attribute=value]          属性等于
  [attribute!=value]         属性不等于
  [attribute^=value]         属性以什么开头
  [attribute$=value]         属性以什么结尾
  [attribute*=value]         属性中包含什么值
  [attribute|=value]         属性以什么为前缀并且后跟'-'做连接
  [attribute~=value]         属性以空格分隔的值中含有某值
  [attribute1][attribute2][attributeN]       并列过滤

（5）子元素过滤选择器
  :nth-child(index/even/odd/equation)   选取每个父元素下的第index个元素或奇偶元素.(index从1算起)、
       eg: nth-child(even)      nth-child(odd)     nth-child(3n)      nth-child(3n+1)
  :first-child               选取每个父元素的第1个子元素
  :last-child                选取每个父元素的最后一个元素
  :only-child                如果某个元素是它父元素的唯一子元素，则被选中

（6）表单对象属性过滤选择器
  :enabled           选取所有可用元素
  :disabled          选取所有不可用元素
  :checked           选取所有被选中的元素(单选框，复选框)
  :selected          选取所有被选中的选项元素(下拉列表)

  判断是否聚焦、可视等可使用is(),eg:
   $("xxx").is(":visible")
   $("input").is(":enabled")

4.表单选择器
  :input             选取所有<input>、<textarea>、<select>、<button>     PS.注意$(":input")和$("input")的区别
  :text
  :password
  :radio
  :checkbox
  :submit
  :image
  :reset
  :button
  :file
  :hidden

四、应用jQuery改写示例

五、选择器中的一些注意事项
 1.选择器中最好不要含有"."、"#"、"("或"]"等特殊字符          
   如果含有这些特殊字符则需要加转义符转义
   eg:  <div id="id#b"></div>     →      获取：$("#id#b")×    $("#id\#b")√
 2.属性选择器的@符号问题
   旧版本使用了@，在新版本中已被淘汰
 3.选择器中含有空格的注意事项
   eg:  $(".test :hidden")   指的是带class="test"元素内的被hidden元素
        $(".test:hidden")    指的是带class="test"且被隐藏的元素

六、案例研究
  filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合

七、其他选择器