jQuery选择器大全
jQuery选择器
一、作用: 选择要操作的DOM元素
步骤:
第一步: 选择要操作的节点(元素,标签)对象(JQuery对象)
第二步: 使用JQuery对象中的方法和属性进行相关的操作
二、种类
1、基本选择器
1) ID选择器 -> $("#ID名称") -> 返回0个或1个节点
2) 类选择器 -> $(".类名") -> 返回0个或多个节点(包装集,数组)
3) 标记选择器 -> $("标记名") -> 返回0个或多个节点(包装集,数组)
4) 组合选择器 -> $("选择器1","选择器2",....) -> 返回0个或多个几点(包装集,数组)
5) 通配符选择器 -> $("*") -> 返回全部的元素节点
2、层次选择器(父子,兄弟)
1) (所有)后代元素 -> $("祖先元素 后代元素")
2) (直接)子元素 -> $("父元素 > 子元素")
3) (相邻)弟弟元素 -> $("哥哥元素 + 弟弟元素")
4) (所有)弟弟元素 -> $("哥哥元素 ~ 弟弟元素")
3、过滤选择器 -> 包装集中进行相应的过滤操作
1) 基本过滤选择器
包装集中的第一个元素 -> $("包装集选择器:first")
包装集中的最后一个元素 -> $("包装集选择器:last")
去除所有与给定选择器匹配的元素 -> $("包装集选择器:not(选择器)")
包装集中的下标索引为偶数的元素 -> $("包装集选择器:even")
包装集中的下标索引为奇数的元素 -> $("包装集选择器:odd")
包装集中指定下标索引的元素 -> $("包装集选择器:eq(下标索引)")
包装集中大于指定下标索引的元素 -> $("包装集选择器:gt(下标索引)")
包装集中小于指定下标索引的元素 -> $("包装集选择器:lt(下标索引)")
选择标题标签 -> $(":header")
匹配所有正在执行动画效果的元素 -> $("包装类选择器:animated")
2) 内容过滤选择器
选择包装集中包含某文本内容的元素 -> $("选择器:contains('文本内容')")
选择空元素的节点对象 -> $("选择器:empty")
匹配含有选择器所匹配的元素的元素 -> $("选择器:has(选择器)")
匹配含有子元素或者文本的元素 -> $("选择器:parent")
3) 可见性过滤选择器
匹配所有不可见元素(包括type为hidden的元素) -> $("选择器:hidden")
匹配所有课件元素 -> $("选择器:visible")
4) 属性过滤选择器
选择拥有属性[attribute]的元素 -> $("选择器[attribute]") -> $("div[id]")
选择属性attribute的值等于value的元素 -> $("选择器[attribute=value]") -> $("input[name=password]")
选择属性attribute的值不等于value的元素 -> $("选择器[attribute!=value]") -> $("input[name!=password]")
选择属性attribute的值以value开始的元素 -> $("选择器[attribute^=value]") -> $("input[name^=password]")
选择属性attribute的值以value结尾的元素 -> $("选择器[attribute$=value]") -> $("input[name$=password]")
选择属性attribute的值含有value的元素 -> $("选择器[attribute*=value]") -> $("input[name*=password]")
多个属性选择器的合并 -> $("选择器[[selector1][selector2][selectorN]]) -> $("div[style][id='text']")
5) 子元素过滤选择器 -> 下标从1开始
:nth-child(index/even/odd/equation) 区别:eq(index) -> 只选择一个元素,下标索引从0开始;而:nth-child(index) -> 可选择多个元素,下标索引从1开始
:first-child -> 第一个子元素
:last-child -> 最后一个子元素
:only-child -> 匹配某个元素是父元素中唯一的子元素
6) 表单对象属性过滤选择器
:enabled -> 选择可用元素 -> $("选择器:enabled")
:disabled -> 选择不可用元素 -> $("选择器:disabled")
:checked -> 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) -> $("选择器:checked")
:selected -> 选择中元素(下拉列表框->匹配所有选中的option元素) -> $("select option:selected")
4、表单选择器
1) :input -> 匹配所有 input, textarea, select 和 button 元素 ->$(":input")
2) :text -> 匹配所有的单行文本框 -> $(":text")
3) :password -> 匹配所有密码框 -> $(":password")
4) :radio -> 匹配所有单选按钮 -> $(":radio")
5) :checked -> 匹配所有复选框 -> $(":checkbox")
6) :submit -> 匹配所有提交按钮 -> $(":submit")
7) :image -> 匹配所有图像域 -> $(":image")
8) :reset -> 匹配所有重置按钮 -> $(":reset")
9) :button -> 匹配所有按钮 -> $(":button")
10) :file -> 匹配所有文件域 -> $(":file")
11) :hidden -> 匹配所有不可见元素，或者type为hidden的元素 -> $("选择器:hidden")
