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

  • 相关阅读:
    Windows CE Notification API的使用方法
    探讨如何成为技术团队管理者
    Android应用---基于NDK的samples例程hello-jni学习NDK开发
    在eclipse中配置android ndk的自动编译环境builders
    用javah 导出类的头文件, 常见的错误及正确的使用方法
    Android下NDK开发环境搭建
    Android系统修改硬件设备访问权限
    Android调试工具之ADB
    关于前端小白的一点小建议
    Vue.js简单实践
  • 原文地址:https://www.cnblogs.com/yjxFive/p/9139839.html
Copyright © 2020-2023  润新知