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

posted @ 2018-06-05 15:00  姚继新  阅读(594)  评论(0编辑  收藏