zoukankan      html  css  js  c++  java
  • JQuery选择器大全

    1. 基本选择器

    选择器 描述 返回 示例
    #id      单个元素  $("#test")
    .class   集合元素 $(".test")
    element   集合元素 $("p")
    *   匹配所有元素 集合元素 $("*")
    selector1,selector2   集合元素 $("div,span,p")

     

     

     

     

     

    2. 层次选择器 

    选择器 描述 返回 示例
    $("ancestor descendant") 选取所有后代    集合元素  $("div span")
    $("parent>child") 选取直接后代 集合元素 $("div.span")
    $("prev+next") 选取紧接在prev元素后的next元素 单个元素 $(".one+div")
    $("prev~siblings")   选取紧接在prev元素后的所siblings元素 集合元素 $(".one~div")

    3. 过滤选择器

      (1)基本过滤选择器

    选择器 描述 返回 示例
    :first      单个元素  $("div:first")
    :last      单个元素  $("div:last")
    :not(selector)   集合元素 $("input:not(.myclass)")
    :even   索引从0开始 集合元素 $("input:even")
    :odd
      集合元素 $("input:odd")
    :eq(index)   单个元素 $("input:eq(1)")
    :gt(index)   集合元素 $("input:gt(1)")
    :lt(index)   集合元素 $("input:lt(1)")
    :header 选取所有的标题元素 集合元素 $(":header")
    :animated 选取当前正在执行动画的元素 集合元素 $(":animated")
    :focus 选取当前获取焦点的元素 单个元素 $(":focus")

      (2)内容过滤选择器

    选择器 描述 返回 示例
    $(":contains(text)")      集合元素  $("div:contains('我')")
    $(":empty") 选取不包含子元素或者文本的空元素 集合元素 $("div:empty")
    $(":has(selector)")   集合元素 $("div:has(p)")
    $(":parent")   选取含有子元素或者文本的元素 集合元素 $("div:parent")

      (3)可见性过滤选择器

    选择器 描述 返回 示例
    :hidden 选取所有不可见元素     集合元素  $(":hidden")
    :visible 选取所有可见元素 集合元素 $("div:visible")

      (4)属性过滤选择器

    选择器 描述 返回 示例
    [attribute] 选取拥有此属性的元素    集合元素  $("div[id]")
    [attribute=value] 选取属性的值为value的元素  集合元素 $("div[title=test]") 
    [attribute!=value]   集合元素 $("div[title!=test]")
    [attribute^=value] 选取属性的值以value开始的元素 集合元素 $("div[title^=test]")
    [attribute$=value] 选取属性的值以value结束的元素 集合元素 $("div[title$=test]")
    [attribute*=value] 选取属性的值含有value的元素 集合元素 $("div[title*=test]")
    [attribute|=value]

    选取属性等于给定字符串或以该字

    符串为前缀(该字符串后跟一个连字

          "-")的元素

    集合元素 $("div[title|='en']")
    [attribute~=value]

    选取属性用空格分隔的值中包含一个

         给定值的元素

    集合元素 $("div[title~='en']")

    [attribute1][attribute2]

      [attributeN]

    用属性选择器合并成一个复合属性选

    择器,满足多个条件。每选择一次,

       缩小一次范围

    集合元素 $("div[id][title$='test']")

      (5)子元素过滤选择器

    选择器 描述 返回 示例

    :nth-child(index/even/

    odd/equation)

    选取每个父元素下的第index

    个子元素或者奇偶元素(index

             从1算起)

       集合元素 

    $("ul li:nth-child(even)")

    $("ul li:nth-child(2)")

    $("ul li:nth-child(3n)")

    :first-child 选取每个父元素的第一个元素  集合元素 $("ul li:first-child")
    :last-child 选取每个父元素的最后一个元素 集合元素 $("ul li:last-child")
    :only-child

    如果某个元素是它父元素中唯一的

    子元素,那么将会被匹配。如果父元

         素含有其它元素,则不会匹配

    集合元素 $("ul li:only-child")

      (6)表单对象过滤选择器

    选择器 描述 返回 示例
    :enabled 选取所有可用的元素    集合元素  $("#form1:enabled")
    :disabled 选取所有不可用的元素 集合元素 $("#form2:disabled")
    :checked
    选取所有被选中的元素(单选框,复选框) 集合元素
    $("input:checked")
    :selected 选取所有被选中的选项元素(下拉列表) 集合元素 $("select option:selected")

    4. 表单选择器

    选择器 描述 返回 示例
    :input

    选取所有的<input>、<textarea>

    <select>和<button>元素

       集合元素  $(":input")
    :text

    选取所有的单行文本框

    集合元素 $(":text")
    :password

    选取所有的密码框

    集合元素 $(":password")
    :radio

    选取所有的单选框

    集合元素 $(":radio")
    :checkbox

    选取所有的多选框

    集合元素 $(":checkbox")
    :submit

    选取所有的提交按钮

    集合元素 $(":submit")
    :image

    选取所有的图像按钮

    集合元素 $(":image")
    :reset

    选取所有的重置按钮

    集合元素 $(":reset")
    :button

    选取所有的按钮

    集合元素 $(":button")
    :file

    选取所有的上传域

    集合元素 $(":file")
    :hidden

    选取所有的不可见元素

    集合元素 $(":hidden")
  • 相关阅读:
    为什么要使用href=”javascript:void(0);”
    切图要点
    css属性学习
    CentOS7使用yum安装RabbitMQ
    Linux下,root权限才能启动1024以下端口的程序
    Gitlab备份和恢复操作记录
    rpm批量卸载所有带有Java的文件
    如何使用微软官方工具制作win10启动盘
    重装系统时,将MBR分区转为GPT 分区
    walle 2.0 上线部署
  • 原文地址:https://www.cnblogs.com/seanbrucexxl/p/3793346.html
Copyright © 2011-2022 走看看