Jquery-选择器

2019独角兽企业重金招聘Python工程师标准>>>

1.基本选择器
1-1 #Id ID选择器
1-2 element html标签选择器
1-3 .class 类选择器
1-4 selector1,selector2,selectorN 组合选择器OR
1-5 * 通配符选择器
选择器中的特殊字符需要用 \\ 转义
为提高效率应该尽量使用getElementById getElementsByTagName等获取DOM对象后再传给jqurey进行处理
eg1:
<label id="colorRed:a" for="colorRed">Red</label>
$("#colorRed\\:a").css("color","red")
eg2:
var all = document.getElementsByTagName("*");
$(all).css("color","red");

2.层级选择器
2-1.间接层级选择器 ancestor descendant
div p 选取div下的p元素 p只要在div下即可
2-2.父子层级选择器 parent>child
div > p 选取div下的p元素 p必须是div的直接子元素
2-3.兄弟选择器 prev + next
只选择之后的一个节点
2-4.同级选择器 prev ~ siblings
选择之后的所有节点

3.伪类选择器
3-1. 基本的伪类选择器
:first 匹配第一个元素 eg:$("li:first")
:last 匹配最后一个元素 eg:$("li:last")
:not 从结果集去掉指定元素 eg:$("li:not(:first,:last)")
:even 匹配偶数元素 从0开始计数 eg:$("li:even")
:odd 匹配奇数元素 从0开始计数 eg:$("li:odd")
:eq 匹配指定索引的元素 从0开始计数 eg:$("li:eg(0)")
:gt 匹配大于指定索引的元素 从0开始计数 eg:$("li:gt(0)")
:lt 匹配小于指定索引的元素 从0开始计数 eg:$("li:lt(3)")
:header 匹配h1,h2,h3之类的标题元素
:animated 匹配正在执行动画效果的元素

3-2.内容相关的伪类选择器
:contains 匹配指定内容的元素 eg:$("div:contains('Red')").css("color","yellow");匹配含有指定内容的div
:empty 匹配不包含子元素或文本的空元素
:has 匹配含有指定元素的元素。$("li:has('label')").css("color","yellow");
:parent 匹配含有子元素或文本的元素

3-3.显示状态伪类选择器
:hidden 匹配所有不可见元素，或type为hidden的元素
:visible 匹配所有可见元素

3-4.子元素伪类选择器
:nth-child 匹配父元素下的第N个子或奇偶元素
:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:only-child 如果是父元素的唯一子元素,则匹配
nth-child(even) 匹配偶数位元素
nth-child(odd) 匹配奇数位元素
nth-child(3n) 匹配X3位元素
nth-child(3n+1) 匹配X3+1位元素
nth-child(2) 匹配第2个元素
 
:first-child 与:first的不同在于 :first是符合筛选条件的第一个元素 :first-child不仅是符合筛选条件的第一个元素 还要是父元素的第一个子元素

3-5.表单对象伪元素选择器
:input 匹配所有input button select textarea元素
:text 匹配所有单行文本框
:password 匹配所有密码框
:radio 匹配所有单按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件
:hidden 匹配所有不可见元素

3-6.表单属性伪元素选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中元素（复选框 单选按钮 不包括select）
:selected 匹配所有选中的option元素

4.属性选择器
[attribute] 包含指定属性的元素
[attribute=value] 匹配指定属性值的元素
[attribute!=value] 匹配不含有指定属性 或 属性值不等于指定值的元素
[attribute^=value] 匹配以指定属性值开头的元素
[attribute$=value] 匹配以指定属性值结尾的元素
[attribute*=value] 匹配含有指定属性值的元素
[selector1][selector2][selectorN] 复合选择器AND 须同时具有指定属性

 

转载于:https://my.oschina.net/dajianguo/blog/894233