Zepto.js selector 模块详解扩展 :first、:visible 等 jQuery 风格高级选择器【免费下载链接】zeptoZepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API项目地址: https://gitcode.com/gh_mirrors/ze/zeptoZepto.js 是一个极简、仅约 2KB 起步的 JavaScript 库提供与 jQuery 高度兼容的 API专为现代浏览器打造。而 src/selector.js 正是让 Zepto 的$()选择器长得像 jQuery的关键可选模块——它扩展了:first、:last、:visible等 10 种 jQuery 风格高级选择器让你的移动端代码无缝迁移。为什么需要 Zepto 高级选择器Zepto 核心的选择器能力基于浏览器原生的querySelectorAll见 src/zepto.js它对#id、.class等简单选择器还做了快速优化。但原生 CSS 选择器不支持jQuery 的扩展语法例如$(#list li:first) // 取第一个 li $(.box:visible) // 只取可见的盒子 $(#item:eq(2)) // 取第 3 个元素selector 模块正是用来补齐这块短板的。它通过劫持核心的zepto.qsa与zepto.matches两个方法在原有能力之上加了一层过滤器实现方式见 src/selector.js。10 种内置过滤器一览selector 模块在 src/selector.js 中一次性注册了 10 个过滤器全部挂在$.expr[:]上选择器作用示例效果:first取集合中的第 1 个元素$(#list li:first):last取集合中的最后 1 个元素$(#list li:last):eq(n)取索引为 n 的元素从 0 开始$(#list li:eq(1)):visible元素宽高大于 0 且 display 不为 none$(.box:visible):hidden与:visible相反取不可见元素$(.box:hidden):parent过滤出有子节点的元素$(#list li:parent):selected取被选中的option$(#sel option:selected):checked取被勾选的 radio / checkbox$(input:checked):contains(text)文本中包含指定字符串的元素$(#list li:contains(two)):has(selector)内部匹配某选择器的元素$(#child li:has(ul))几个细节值得了解:visible的判断标准元素必须有宽度或高度且display不为none逻辑见 src/selector.js:eq的索引从 0 开始与数组下标一致:has与:contains带括号传参参数会先尝试转为数字失败则去掉引号作为文本见 src/selector.js。选择器是怎么被解析的整个过程由一个核心函数process驱动源码位于 src/selector.js用正则(.*):(\w)(?:\(([^)])\))?$把选择器拆成基础部分 过滤器名 括号参数三段若过滤器名在已注册的 10 个中就用原生querySelectorAll先查基础部分再对每个候选节点逐一执行过滤器函数最后通过zepto.uniq去重uniq定义在 src/zepto.js。此外还有一个巧思针对 *这类直接子元素查询模块会给父节点临时打一个带时间戳的唯一 class查完立即移除从而绕开浏览器对 *语法支持不佳的问题实现见 src/selector.js。如何把 selector 加入你的自定义构建selector 是可选模块默认构建zepto event ajax form ie并不包含它。Zepto 的优势正在于可按需组合、保持体积最小。自定义构建只需修改MODULES环境变量构建逻辑在 make 中npm install MODULESzepto event selector npm run-script dist构建完成后即可在dist/zepto.min.js中获得支持高级选择器的产物模块说明也可参考 README.md 中的模块表格。使用限制这些写法不支持源码注释中明确说明了能力边界src/selector.js❌ 复杂嵌套表达式li:has(label:contains(foo)) li:has(label:contains(bar))❌ 过滤器与组合器混用的部分结构ul.inner:first li建议把过滤器放在选择器末尾保持单层结构这样最稳妥。用官方测试用例快速上手仓库自带的 test/selector.html 是一份极佳的活文档每个测试都对应一种选择器的真实用法$(#list li:eq(1)).text() // → two $(.visibility:visible).attr(id) // → vis $(#child).find( li:has(ul)) // 含嵌套 ul 的 li运行方式安装依赖后执行npm start启动本地测试服务器test/server.coffee即可在浏览器中查看结果。小结selector 模块以极小的代价约 85 行源码为 Zepto 补齐了10 种 jQuery 风格选择器它通过覆盖zepto.qsa/zepto.matches无缝增强核心不影响原有性能路径记得在自定义构建时把selector加入MODULES并注意它不支持复杂嵌套表达式。如果你正在把 jQuery 项目迁移到更轻量的 Zepto这个模块能显著降低迁移成本。✨【免费下载链接】zeptoZepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API项目地址: https://gitcode.com/gh_mirrors/ze/zepto创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考