基本选择器:
#id 根据Id匹配一个元素
.class 根据给定的类名匹配一个元素
element 根据元素名匹配一个元素
* 匹配所有元素
selecttor1,selector2 并集,返回两个选择器匹配到的元素
层次选择器:
ancestor descendant 根据祖先匹配所有的后代元素
parent>child 根据父元素匹配所有的子元素,直接后代
prev+next 匹配下一个兄弟元素 相当于next()方法
prev~siblings 匹配后面的兄弟元素 相当于nextAll()方法 siblings()方法为匹配所有的兄弟元素
简单过滤选择器:
:first或first() 匹配第一个元素
:last或last() 匹配最后一个元素
:not(selector) 匹配非selector能匹配到的元素
:even 匹配索引值为偶数的元素,索引号从0开始
:odd 匹配索引值为奇数的元素,索引号从0开始
:eq(index) 匹配指定索引号的元素,索引号从0开始
:gt(index) 匹配索引号大于给定索引值的元素,索引号从0开始
:lt(index) 匹配索引号小于给定索引值的元素,索引号从0开始
:header 匹配所有的标题元素 h1 h2 h3 h4 h5 h6
:animated 匹配所有正在执行动画的元素
内容过滤选择器:
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配后代中含有selector能匹配上元素的元素
:parent 匹配含有子元素或者文本的元素
可见性过滤选择器:
:hidden 匹配不可见元素,或者type="hidden"的元素 含有css样式:display:"none";的元素,无论CSS是内联,导入,链接式
:visible 获取所有的可见元素
属性过滤选择器:
[attribute] 匹配含有给定属性的元素
[attribute=value] 匹配含有属性=value的元素
[attribute!=value] 匹配含有属性但!=value的元素
[attribute^=value] 匹配属性值是以value开始的元素
[attribute$=value] 匹配属性值是以value结束的元素
[attribute*=value] 匹配属性值包含某些值的元素,部分前后,中间有也算
[selector][selector] 匹配属性选择器的交集
子元素过滤选择器:
:nth-child(eq|even|odd|index) 获取所有父元素特定位置的子元素
:first 获取所有父元素下的第一个子元素
:last 获取所有父元素下最后一个子元素
:only-child 获取所有父元素下唯一的一个元素
表单对象属性过滤选择器:
:enabled 获取表单中所有可用的元素
:disabled 获取表单中所有不可用的元素
:checked 获取表单张所有被选中的元素
:selected 获取表单中所有被选中的option的元素
表单选择器:
:input 获取所有的表单元素
:text 获取所有的单行文本框
:password 获取所有的密码框元素
:submit 获取所有的提交按钮
:image 获取所有的图像按钮
:reset 获取所有的重置按钮
:button 获取所有的按钮
1、基本选择器
(1)、#id 根据Id匹配一个元素
(2)、element 根据给定的元素名匹配元素
我是一个P
(3)、class 根据class属性匹配元素
(4)、* 匹配所有的元素
$("*").css("background-color","red");
(5)、selector1,selector2 选择器之间用逗号分隔 返回每一个选择器匹配到的元素
$(".div1,#span1").css("background-color","red");
2、层次选择器
(1)、ancestor descendant 根据祖先元素匹配所有的后代元素,返回的是匹配到的后代元素,用空格分开。
我是span1 会被选中,是#div1的后代span
我是span3 会被选中,也是#div1的后代span
我是span2 ***不会被选中,不是#div1的后代