jQuery是一个优秀的JavaScript库
jQuery选择器
基本选择器
- 普遍选择器
$("*")
- 标签选择器
$("div")
- ID选择器
$("#one")
- 类选择器
$(".one")
- 组合选择器 多个选择器使用逗号分隔
$("div,.one")
- 嵌套选择器 多个选择器共同使用
$("div.one")
层次选择器
- 后代选择器
$(".outer .inner")
- 子代选择器
$(".outer>.inner")
或者$(".outer>
代表选择的所有子代
兄弟选择器
- 下一个兄弟选择器
$(".one+.two")
或者$(".one+")
- 之后所有兄弟选择器
$(".one~.two")
表示之后所有兄弟中类为two的元素
$(".one~")
表示之后所有的兄弟元素
jQuery过滤器
jQuery的过滤器必须用在jQuery选择器后,表示对通过前面的jQuery选择器选择到的内容的过滤。
是建立在前面选择器已经选择到元素的基础之上的。
基本过滤器
- selector:first 获取所有已找到的元素中的第一个元素
- selector:last 获取所有已找到的元素中最后一个元素
- selector:even 获取所有已找到的元素中索引为偶数的元素(从0开始)
- selector:odd 获取所有已找到的元素中索引为奇数的元素(从0开始)
- selector:eq(index) 获取所有已找到的元素中索引等于index的元素
- selector:lt(index) 获取所有已找到的元素中索引小于index的元素
- selector:gt(index) 获取所有已找到的元素中索引大于index的元素
- selector:not(selector2) 获取所有已找到的元素中除了selector2的元素
- selector:header 获取所有已选择到的元素中的标题元素(
h1~h6
)
内容过滤器
- selector:contains(text) 获取所有已选择到的元素中文本包含text的元素
- selector:empty 获取所有已选择到的元素中的空元素(没有子节点)
- selector:parent 获取所有已选择到的元素中非空元素(有子节点)
- selector:has(selector2) 获取所有已选择到的元素中子元素为selector2的元素
$(".outer>:has('span')")
可见性过滤器
- 不占据屏幕空间的
display:none
<input type="hidden" />
- 占据屏幕空间的
visibility:hidden;
opacity:0;
- 使用:
- selector:hidden 选择所有不占据屏幕空间的元素
- selector:visible 选择所有占据屏幕空间的元素
属性过滤器
selector[attr]
获取所有已选择到的元素中具有属性attr的元素selector[attr=value]
获取所有已选择到的元素中具有属性attr,并且属性值为value的元素selector[attr^=v]
获取所有已选择到的元素中具有属性attr,并且属性值以v开头的元素selector[attr$=v]
获取所有已选择到的元素中具有属性attr,并且属性值以v结尾的元素selector[attr*=v]
获取所有已选择到的元素中具有属性attr,并且属性值以v结尾的元素selector[attr!=value]
获取所有已选择到的元素中不具有属性attr,并且属性值不为value的元素
后代选择器
选择器一定要先选择到后代元素,是对选择到的后代元素的过滤
selector:first-child
获取每个selector元素中第一个子元素(每个父元素的第一个子元素)
与selector:first
的区别,获取所有selector元素的子元素中的第一个(只有一个)
-
selector:last-child
获取每个selector元素中最后一个子元素(每个父元素的最后一个子元素)
注意与selector:last
的区别 -
selector:nth-child(index)
获取每个selector元素中索引为index的子元素**【注意】index从1开始** -
selector:first-of-type
获取每个selector元素中每种类型子元素中的第一个 -
selector:last-of-type
获取每个selector元素中每种类型子元素中的最后一个 -
selector:only-child
获取每个selector元素中独生子子元素
表单过滤器
主要是对选择的表单元素进行过滤HTML表单元素(<button>,<input>,<optgroup>,<option>,<select>,和<textarea>)
:enabled
选取所有可用元素:disabled
选取所有不可用元素:checked
选取所有被选中的元素,用于复选框和单选框:selected
选取所有被选中的选项元素,该选择器只适用于<option>
:focus
选择当前获取焦点的元素:input
选取所有的<input><textarea><select><button>
元素。
注意:$(":input")
是选择可以让用户输入的标签元素,而$("input')
是选择名字为input的标签元素:text
选取所有的单行文本框:password
选取所有的密码框:radio
选取所有的单选框:checkbox
选取所有的多选框:submit
选取所有的提交按钮:image
选取所有input类型为image的表单元素:reset
选取所有input类型为reset的表单元素:button
选取所有input类型为button的表单元素:file
选取所有input类型为file的表单元素