jQuery选择器

jQuery 选择器


一、基本选择器
  1. id选择器 #id
  2. class选择器 .class
  3. 元素选择器 element
  4. * 匹配所有元素

 1     //#id 选择器
 2     $("#d1").css("background","red");
 3     //.class 选择器
 4     $(".mini").css("background","red");
 5     //元素选择器
 6     $("div").css("background","red");
 7     // * 匹配所有
 8     $("*").css("background","red");
 9     //多个选择器并列使用,中间使用","分隔
10     $("#d1,.mini").css("background","red");
View Code

 

二、层级选择器
  1. acestor descendant 匹配父元素下所有后代元素
  2. parent > child 匹配父元素下所有子元素
  3. prev + next 匹配紧接在prve元素后的next元素
  4. prev ~ sibings 匹配prev元素之后的所有siblings元素

1     //祖先与后代 所有子元素包括 孙子 曾孙子...
2     $("body div").css("background","red");
3     //父元素与子元素 不包含孙子以下元素
4     $("body>div").css("background","red");
5     //next 下一个兄弟节点
6     $("#one+div").css("background","red");
7     // 所有的下边的兄弟元素
8     $("#one~div").css("background","red");
View Code

 

三、过滤选择器 - 在选择器前,具有:符号
  3.1 基本选择器
    1. :first 获取第一个元素 (.first())
    2. :last 获取最后一个元素 (.last())
    3. :not() 否定选择器
    4. :even 偶数匹配 从0开始
    5. :odd 奇数匹配
    6. :eq(index) 匹配一个给定索引值的元素
    7. :gt(index) 匹配所有大于给定索引值的元素
    8. :lt(index) 匹配所有小于给定索引值的元素
    9. :header 匹配h1之类的标题元素
    10. :animated 匹配所有正在执行动画效果的元素

 1     //获取div元素中的第一个
 2     $("div:first").css("background","green");
 3     //获取div元素中的最后一个
 4     $("div:last").css("background","green");
 5     //:even 偶数 从零开始
 6     $("div:even").css("background","green");
 7     //:odd 奇数
 8     $("div:odd").css("background","green");
 9     //jQuery是数组集合 比较的数组的下标
10     $("div:gt(1)").css("background","green");
11     $("div:lt(1)").css("background","green");
12     $("div:eq(1)").css("background","green");
13     //:not()
14     $("div:not('.mini')").css("background","green");
15     //获取所有标题元素(h1 - h6) - 不常用
16     $(":header").css("background","green");
View Code

 

  3.2 子元素选择器
    1.   :nth-child(n) 匹配父元素下的第N个或奇偶元素
      :nth-child(even)
      :nth-child(odd)
      :nth-child(3n)
      :nth-child(2)
      :nth-child(2n+1)
    2.  :first-child 匹配第一个子元素
      ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
    3. :first-child 匹配最后一个子元素
      ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
    4. :only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配
      如果父元素中含有其他元素,那将不会被匹配

1     //:nth-chilid(n) n 从1开始
2     $("div:nth-child(2)").css("background","red");
3     //获取div元素的第一个子元素
4     $("div:first-child").css("background","red");
5     //获取div元素的最后一个子元素
6     $("div:last-child").css("background","red");
7     //如果哪个div元素只有一个子元素,那么选中
8     $("div:only-child").css("background","red");
View Code

  3.3 内容选择器
    1. :contains("text") 匹配包含给定文本的元素
    2. :empty 匹配所有不包含子元素或者文本的空元素
    3. :has(ele) 匹配含有选择器所匹配的元素的元素
    4. :parent 匹配含有子元素或者文本的元素

1     //文本包含"div11"的div元素 ele.text里包含
2     $("div:contains('div11')").css("background","green");
3     //不包含任何文本内容或子元素的div元素
4     $("div:empty").css("background","green");
5     //包含任何文本内容或子元素的div元素
6     $("div:parent").css("background","green");
7     //包含class为mini的div元素的父div元素
8     $("div:has('.mini')").css("background","green");
View Code

  3.4 可见性选择器
    1. :hidden 匹配所有不可见元素,或者type为hidden的元素
    2. :visible 匹配所有的可见元素
  3.5.属性选择器
    1. [attribute] 匹配包含给定属性的元素 例($("div[id]"))
    2. [attribute=value] 匹配给定的属性是某个特定值的元素 例($("div[id='div']"))
    3. [attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
      此选择器等价于:not([attr=value])
    4. [attribute^=value] 匹配给定的属性是以某些值开始的元素
    5. [attribute$=value] 匹配给定的属性是以某些值结尾的元素
    6. [attribute*=value] 匹配给定的属性是以包含某些值的元素
    7. [selector1][selector2] 复合属性选择器,需要同时满足多个条件时使用

 1     //包含属性title的div元素
 2     $("div[title]").css("background","green");
 3     //包含属性title=text1的div元素
 4     $("div[title=text1]").css("background","green");
 5     //包含属性title!=text1的div元素(包含没有该属性的div元素)
 6     $("div[title!=text1]").css("background","green");
 7     //包含属性title值是以text开始的div元素
 8     $("div[title^=text]").css("background","green");
 9     //包含属性title值是以t1结束的div元素
10     $("div[title$=t1]").css("background","green");
11     // 包含属性title值包含t1的div元素
12     $("div[title*=t1]").css("background","green");
13     //多个属性过滤选择器并列使用
14     $("div[title$=t1][id]").css("background","green");
View Code

 

  3.6 表单对象选择器
    1. :enabled 匹配所有可用元素
    2. :disabled 匹配所有不可用元素
    3. :checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
    4. :selected 匹配所有选中的option元素
四、表单选择器
  1. :input 匹配所有 input, textarea, select 和 button 元素
  2. :text 匹配所有的单行文本框
  3. :password 匹配所有密码框
  4. :radio 匹配所有单选按钮
  5. :checkbox 匹配所有复选框
  6. :submit 匹配所有提交按钮
  7. :image 匹配所有图像域
  8. :reset 匹配所有重置按钮
  9. :button 匹配所有按钮
  10. :file 匹配所有文件域

/*
css3选择器实现了jQuery选择器的大部分,不过兼容性不够,IE9+以上可以实现大部分 其他的新浏览器基本都可以实现
*/

 

posted @ 2015-11-05 22:46  Medeor  阅读(254)  评论(0编辑  收藏  举报