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");
二、层级选择器
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");
三、过滤选择器 - 在选择器前，具有:符号
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");
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");
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");
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");
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+以上可以实现大部分 其他的新浏览器基本都可以实现
*/
