jQuery选择器

jQuery选择器

1、作用: 选择要操作的DOM元素

步骤:

第一步: 选择要操作的节点(元素,标签)对象(JQuery对象)

第二步: 使用JQuery对象中的方法和属性进行相关的操作

2、种类

基本选择器

1)ID选择器 -> $("#ID名称") -> 返回0个或1个节点

2)类选择器 -> $(".类名") -> 返回0个或多个节点(包装集,数组)

3)标记选择器 -> $("标记名") -> 返回0个或多个节点(包装集,数组)

4)组合选择器 -> $("选择器1","选择器2",....) -> 返回0个或多个几点(包装集,数组)

5)通配符选择器 -> $("*") -> 返回全部的元素节点

层次选择器(父子,兄弟)

1)(所有)后代元素 -> $("祖先元素 后代元素")

2)(直接)子元素 -> $("父元素 > 子元素")

3)(相邻)弟弟元素 -> $("哥哥元素 + 弟弟元素")

4)(所有)弟弟元素 -> $("哥哥元素 ~ 弟弟元素")

过滤选择器 -> 包装集中进行相应的过滤操作

1)基本过滤选择器

包装集中的第一个元素 -> $("包装集选择器:first")

包装集中的最后一个元素 -> $("包装集选择器:last")

去除所有与给定选择器匹配的元素 -> $("包装集选择器:not(选择器)")

包装集中的下标索引为偶数的元素 -> $("包装集选择器:even")

包装集中的下标索引为奇数的元素 -> $("包装集选择器:odd")

包装集中指定下标索引的元素 -> $("包装集选择器:eq(下标索引)")

包装集中大于指定下标索引的元素 -> $("包装集选择器:gt(下标索引)")

包装集中小于指定下标索引的元素 -> $("包装集选择器:lt(下标索引)")

选择标题标签 -> $(":header")

匹配所有正在执行动画效果的元素 -> $("包装类选择器:animated")

2)内容过滤选择器

选择包装集中包含某文本内容的元素 -> $("选择器:contains('文本内容')")

选择空元素的节点对象 -> $("选择器:empty")

匹配含有选择器所匹配的元素的元素 -> $("选择器:has(选择器)")

匹配含有子元素或者文本的元素 -> $("选择器:parent")

3)可见性过滤选择器

匹配所有不可见元素(包括type为hidden的元素) -> $("选择器:hidden")

匹配所有课件元素 -> $("选择器:visible")

4)属性过滤选择器

选择拥有属性[attribute]的元素 -> 选择器​("div[id]")

选择属性attribute的值等于value的元素 -> 选择器​("input[name=password]")

选择属性attribute的值不等于value的元素 -> 选择器​("input[name!=password]")

选择属性attribute的值以value开始的元素 -> 选择器​("input[name^=password]")

选择属性attribute的值以value结尾的元素 -> 选择器​=value]") -> ​=password]")

选择属性attribute的值含有value的元素 -> 选择器​("input[name*=password]")

多个属性选择器的合并 -> 选择器​("div style")

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")

3、表单选择器

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")