zoukankan      html  css  js  c++  java
  • jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。jQuery选择器完全继承了CSS的风格。利用jQuery选择器,可以非常便捷的找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器。

    jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。

    1.基本选择器

    选择器描 述返 回示 例
    #id 匹配给定的id 单个元素 $(“header”)
    .class 匹配给定的类名 集合元素 $(“.test”)
    E 匹配给定的标签名 集合元素 $(“div”)
    * 匹配所有元素 集合元素 $(“*’)
    E, .class, E… 匹配给定的集合 集合元素 $(“span, .tiPS”)

    2.层次选择器

    选择器描 述返 回示 例
    $(“ancestor descendant”) 匹配ancestor里的所有
    descendant(后代)元素
    集合元素 $(“body div”)
    $(“parent>child”) 匹配parent下的所有
    child(子)元素
    集合元素 $(“div>span”)
    $(“prev+next”) 匹配紧接在prev后的
    next元素
    集合元素 $(“.error+span”)
    $(“prev~siblings”) 匹配prev后的所有
    siblings元素
    集合元素 $(“span~a”)

    3.过滤选择器

    3.1 基本过滤选择器

    选择器描 述返 回示 例
    :first 匹配第一个元素 单个元素 $(“div:first”)
    :last 匹配最后一个元素 单个元素 $(“span:last”)
    :even 匹配索引是偶数的元素
    索引从0开始
    集合元素 $(“li:even”)
    : odd 匹配索引是奇数的元素
    索引从0开始
    集合元素 $(“li:odd”)
    :eq(index) 匹配索引等于index的元
    素(索引从0开始)
    单个元素 $(“input:eq(2)”)
    :gt(index) 匹配索引大于index的元
    素(索引从0开始)
    集合元素 $(“input:gt(1)”)
    :lt(index) 匹配索引小于index的元
    素(索引从0开始)
    集合元素 $(“input:lt(5)”)
    :header 匹配所有h1,h2…等
    标题元素
    集合元素 $(“:header”)
    :animated 匹配所有正在执行
    动画的元素
    集合元素 $(“div:animated”)

    3.2 内容过滤选择器

    选择器描 述返 回示 例
    :contains(text) 匹配含有文本内容text
    的元素
    集合元素 $(“p:contains(今天)”)
    :empty 匹配不含子元素或
    文本元素的空元素
    集合元素 $(“p:empty”)
    :has(selector) 匹配包含selector元素
    的元素
    集合元素 $(“div:has(span)”)
    :parent 匹配含有子元素或文本
    的元素
    集合元素 $(“div:parent”)

    3.3 可见性过滤选择器

    选择器描 述返 回示 例
    :hidden 匹配所有不可见
    的元素
    集合元素 $(“:hidden”)
    :visible 匹配所有可见元素 集合元素 $(“:visible”)

    3.4 属性过滤选择器

    选择器描 述返 回示 例
    [attr] 匹配拥有此属性
    的元素
    集合元素 $(“img[alt]“)
    [attr=value] 匹配属性值为value
    的元素
    集合元素 $(“a[title=test]“)
    [attr!=value] 匹配属性值不等于
    value的元素
    集合元素 $(“a[title!=test]“)
    [attr^=value] 匹配属性值以value
    开头的元素
    集合元素 $(“img[alt^=welcome]“)
    [attr$=value] 匹配属性值以value
    结尾的元素
    集合元素 $(“img[alt$=last]“)
    [attr*=vlaue] 匹配属性值中含有
    value的元素
    集合元素 $(“div[title*=test]“)
    [attr1][attr2]… 通过多个属性
    进行匹配
    集合元素 $(“div[id][title*=test]“)

    3.5 子元素过滤选择器

    选择器描 述返 回示 例
    :nth-child 匹配每个父元素下的
    第index个子元素
    索引从1开始
    集合元素 $(“div:nth-child(2)”)
    :first-child 匹配每个父元素的
    第一个子元素
    集合元素 $(“div:first-child”)
    :last-child 匹配每个父元素的
    最后一个子元素
    集合元素 $(“div:last-child”)
    : only-child 某元素是它父元素中
    的唯一的子元素
    则匹配它
    集合元素 $(“div:only-child”)

    3.6 表单对象属性过滤选择器

    选择器描 述返 回示 例
    :enabled 匹配所有可用元素 集合元素 $(“form :enabled”)
    :disabled 匹配所有不可用
    的元素
    集合元素 $(“form :disabled”)
    :checked 匹配所有被选中的元素
    (含单选框,复选框)
    集合元素 $(“input:checked”)
    :selected 匹配所有被选中的
    选项元素
    集合元素 $(“select :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”)
  • 相关阅读:
    关于jar包的创建及引用相关问题
    关于Android系统一次能创建多大的Bitmap?
    Android开发导入第三方Jar包
    Javascript操作表格
    installanywhere 打包j2ee的方法II(转)
    C#网页自动登录和提交POST信息的多种方法
    JavaScript手册javascript语法javascript函数
    javascript 禁止复制网页
    [Android实例] Handler+ExecutorService(线程池)+MessageQueue模式+缓存模式(转)
    android消息处理系统原理
  • 原文地址:https://www.cnblogs.com/cnsdhzzl/p/5546636.html
Copyright © 2011-2022 走看看