博客
关于我
jQuery选择器
阅读量:388 次
发布时间:2019-03-05

本文共 1961 字,大约阅读时间需要 6 分钟。

jQuery 选择器全面指南

一、基本选择器

jQuery 的选择器是灵活且强大的工具,能够帮助开发者精准定位 DOM 元素。以下是常见的基本选择器类型:

  • ID选择器

    使用 # 符号开头,可以唯一标识一个元素。例如:

    $("#test") // 选取 id 为 "test" 的元素
  • 类选择器

    使用 . 符号开头,匹配所有拥有指定类的元素。例如:

    $(".test") // 选取 class 为 "test" 的元素
  • 元素选择器

    使用元素名称,匹配页面中所有具有该名称的元素。例如:

    $("p") // 选取所有 

    元素

  • 通用选择器

    使用 * 表示匹配所有元素:

    $("*") // 选取所有元素
  • 组合选择器

    将多个选择器用逗号分隔,返回所有匹配的元素。例如:

    $("selector1,selector2,selector3,...") // 合并多个选择器结果
  • 二、层次选择器

    层次选择器用于定位元素的子节点或同辈节点,常见的有以下类型:

  • 直接子节点选择

    使用 > 符号,表示直接子节点。例如:

    $("a > b") // 选取 a 元素下的所有 b 子元素
  • 后代选择

    使用空格表示后代节点。例如:

    $("a b") // 选取 a 元素的所有 b 后代
  • 相邻元素选择

    使用 + 符号,表示紧接在某元素后面的相邻元素。例如:

    $("a + b") // 选取紧接在 a 元素后的下一个 b 元素

    注意:若 b 元素与 a 元素不相邻,则无效。

  • 同辈选择

    使用 ~ 符号,表示同辈节点。例如:

    $("a~b") // 选取 a 元素后的所有 b 同辈

    注意:jQuery 的 siblings() 方法可以选择任意同辈节点。

  • 滚动选择

    使用 :next:prev 方法,分别查找当前元素的下一个或上一个同辈节点。例如:

    $("a").nextAll("b:first") // 查找 a 元素之后的所有第一个 b 元素$("a").prevAll("b:first") // 查找 a 元素之前的所有第一个 b 元素
  • 三、过滤选择器

    过滤选择器通过特定规则筛选 DOM 元素,使用 : 开头的选择器。

  • 基本过滤

    使用 :visible 表示可见元素。例如:

    $(":visible") // 选取所有可见元素
  • 内容过滤

    使用 :parent:not(:empty) 来过滤元素内容。例如:

    $(":parent") // 选取所有元素的父节点$(":not(:empty)") // 过滤空白内容的元素
  • 可见性过滤

    结合可见性和层次选择器,例如:

    $("p:visible > span") // 选取所有可见的 p 元素的直接子节点 span
  • 属性过滤

    使用属性选择器结合过滤器,例如:

    $("[href='#']:visible" // 选取所有 href 属性为 # 的可见元素
  • 子元素过滤

    在子元素选择器前添加空格,例如:

    $(".one :nth-child(2)") // 选取类名为 one 的第二个子元素
  • 表单对象过滤

    使用表单属性如 namechecked 进行过滤。例如:

    $("input[name='username']:visible" // 选取可见的用户名输入框
  • 四、表单选择器

    表单选择器是处理表单元素的常见用法,以下是一些常见示例:

  • 表单元素选择

    使用元素选择器结合属性选择器。例如:

    $("input, select") // 选取所有输入框和下拉框
  • 表单值过滤

    结合过滤器选择特定值的表单元素。例如:

    $("select option:selected" // 选取被选中的下拉框选项
  • 表单事件过滤

    使用 jQuery 的事件绑定方法结合选择器。例如:

    $("form input:visible").on("change", function() {    // 表单输入发生变化时触发});
  • 五、jQuery 选择器语法

  • 选择器组合

    可以将多个选择器组合在一起,返回多个匹配结果。例如:

    $("div, p, span") // 选取所有 div、p 和 span 元素
  • 上下文选择

    使用上下文限定选择范围。例如:

    $("body div") // 选取 body 元素内的所有 div 元素
  • 动态选择

    使用 jQuery 方法动态添加或移除选择器。例如:

    $("[data-type='btn']:eq(0).click(function() {    // 处理点击事件});
  • 总结

    jQuery 的选择器系统强大且灵活,能够帮助开发者高效定位和操作 DOM 元素。通过合理运用基本选择器、层次选择器、过滤选择器等,可以实现复杂的内容管理和动态交互功能。

    转载地址:http://lnxwz.baihongyu.com/

    你可能感兴趣的文章
    MySQL 是如何加锁的?
    查看>>
    MySQL 是怎样运行的 - InnoDB数据页结构
    查看>>
    mysql 更新子表_mysql 在update中实现子查询的方式
    查看>>
    MySQL 有什么优点?
    查看>>
    mysql 权限整理记录
    查看>>
    mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
    查看>>
    MYSQL 查看最大连接数和修改最大连接数
    查看>>
    MySQL 查看有哪些表
    查看>>
    mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
    查看>>
    MySql 查询以逗号分隔的字符串的方法(正则)
    查看>>
    MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
    查看>>
    mysql 查询,正数降序排序,负数升序排序
    查看>>
    MySQL 树形结构 根据指定节点 获取其下属的所有子节点(包含路径上的枝干节点和叶子节点)...
    查看>>
    mysql 死锁 Deadlock found when trying to get lock; try restarting transaction
    查看>>
    mysql 死锁(先delete 后insert)日志分析
    查看>>
    MySQL 死锁了,怎么办?
    查看>>
    MySQL 深度分页性能急剧下降,该如何优化?
    查看>>
    MySQL 深度分页性能急剧下降,该如何优化?
    查看>>
    MySQL 添加列,修改列,删除列
    查看>>
    mysql 添加索引
    查看>>