jquery选择器就是为了选择界面上的元素的。
jquery 选择器=css选择器选择器{属性:属性值}+自定义选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
1.基本选择器
1. 元素选择器:基于元素名选取元素。
最常见的css选择器当属元素选择器了,在HTML文档中该选择器通常是指某种HTML元素
比如p,h2,span,a,div乃至html
使用方式:$("element")
多个元素:$("element1,element2,element3,...")
2.类选择器 .class 通过指定的 class 查找元素。
2.1 单类选择器
单纯的元素选择器似乎还过于粗糙了,比如我们希望在文档中突出加粗显示某种重要的内容,例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中,或者它可能出现在多种不同的元素中。这个时候,我们可以考虑使用类选择器(class selector)要使用类选择器我们需要首先对文件元素添加一个class属性,
使用方法:点号”.”加上类名就组成了一个类选择器。$(".class")
2.2 多类选择器
在实践的做法中,元素的calss属性可能不止包含一个单词,而是一串单词,各个单词之间用空格隔开。
注意会选择含有此类的元素,不管该元素还包含多少其他的类,也不管他们在类列表中出现的顺序。
使用方式:$(".class1,.class2")
3.id选择器:#id 唯一 元素添加一个id属性,
ID选择器和类选择器有些类似,但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类,一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次,也就是一个ID只能唯一标识一个元素(不是一类元素,而是一个元素)。类似类属性,在使用ID选择器前首先要在元素中添加ID属性。id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。它是唯一属性,区别于类选择器。
使用方式:$("#id值")
4.通配符选择器 *
选取所有的元素$("*")
5.上下文选择器 (contextual selectors)
,后代选择器的规则就是用空格连接2个或多个选择器。空格的含义为:…的后代。多个选择器的情况如下: ul li li { ...}
6. 组合选择器
$(".classname .classname1 #id1") 使用空格分开就是取交集 同时满足 与后面的属性选择器相似
$(".classname,.classname1,#id1") 使用逗号分开就是取并集
2.层级选择器
ancestor descendant //后代元素选择器
("parent descendant")选择器选取指定元素的后代的所有元素。
$("#id .classname ")
parent > child //子元素选择器。
$("#id>.classname ") 选取指定元素的直接子元素的所有元素
prev + next //相邻兄弟元素选择器 匹配所有紧接在 prev 元素后的 next 元素
$("#id + .classname ")
prev ~ sibling //通用兄弟元素选择器 匹配 prev 元素之后的所有同辈 siblings 元素
$("#id ~ .classname ")
3.过滤选择器:基本过滤;内容过滤;可见性过滤;属性过滤;子元素过滤;表单对象属性过滤.
基本过滤选择器
:first 相同的多个元素时选取第一个,不用管该元素属于谁
$("li:first")
:last
$("li:last") //最后一个li
:not(selector)
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
注意选择器不需要使用引号
:even
$("li:even") //挑选下标为偶数的li
:odd
$("li:odd") //挑选下标为奇数的li
:eq(index)
$("li:eq(4)") //下标等于 4 的li(第五个 li 元素)
:gt(index)
$("li:gt(2)") //下标大于 2 的li 不包括2
:lt(index) 匹配所有小于给定索引值的元素
$("li:lt(2)") //下标小于 2 的li 不包括2
:header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:focus 匹配当前获取焦点的元素。
lang 选择匹配语言的元素
对于HTML元素,语言值由lang属性决定,也可能由来自meta元素或HTTP头信息决定。
target
root
在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是<html>元素。
内容过滤选择器
:empty
匹配所有不包含子元素或者文本的空元素
:parent
匹配包含文本(text)或者含有子元素的元素
:has(selector)
包含指定子元素的元素
:contains(text)
包含指定文本内容的指定元素
使用方式:$("元素名称:empty")
可见性过滤选择器
$("li:hidden") //匹配所有不可见元素,或type为hidden的元素
$("li:visible") //匹配所有可见元素
属性过滤选择器
注意属性与属性值的区别
[attribute] 选择含有属性attr的元素
[attribute=value] 选择属性值等于value的元素
[attribute!=value] 选择属性值不等于value的元素
[attribute^=value] 选择属性值以value开始的元素
[attribute$=value]选择属性值以value结束的元素
[attribute*=value]选择属性值包含value结束的元素
[attrSel1][attrSel2][attrSelN] 选取同时满足多个属性的条件的元素
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
='man']") //多属性选过滤,同时满足两个属性的条件的元素
子元素过滤选择器
:first-child
:last-child
:nth-child
:only-child
:nth-last-child()
:first-of-type
:last-of-type
:nth-last-of-type()
:nth-of-type()
:only-of-type
表单对象属性过滤选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
:selected 匹配所有选中的option元素
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
4.表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
(":text") 等价于("input:text")效率更高,下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":image") //匹配所有图像域
$(":hide") //匹配所有不可见元素,或者type为hidden的元素
$(":button") //所有button按钮
$(":file") //所有文件域
5.其他选择器
this选择器
| $(this) | 选取当前 HTML 元素 |