★ FEATURED ARTICLE jQuery 本质上是一个 JavaScript 工具库不是 Python 库。但它对 Python 生态仍有明显价值一方面jQuery 在 2026 年发布了 4.0 版本仍然是全球大量网站中使用率极高的前端库之一另一方面Python 中也有受 jQuery 启发的解析库 PyQuery可以直接用类似 jQuery 的语法处理 HTML。因此本报告以“jQuery 老牌工具库”为主题但采用 Python 技术报告写法先讲 jQuery 本身再给出 jQuery 前端代码示例随后展示 Python 中如何用 PyQuery 复刻 jQuery 风格最后补充 Selenium jQuery 的自动化测试思路。全文附带代码、解析与技术亮点。1. 背景jQuery 为什么被称为“老牌工具库”jQuery 诞生于 2006 年由 John Resig 发布核心理念是“Write Less, Do More”。在 jQuery 出现之前前端开发面临三个突出问题浏览器兼容性差尤其是 IE 与 Firefox、Chrome 等浏览器行为不一致原生 DOM API 冗长选择元素、绑定事件、修改内容都需要较多代码AJAX 请求缺少统一封装异步交互开发成本较高。jQuery 通过统一的选择器、链式调用、事件封装和 AJAX 接口把前端开发从“浏览器脚本”推向了更工程化的阶段。到 2026 年jQuery 发布了 4.0 版本移除对 IE10 及更早版本的支持迁移到 ES Modules并引入 Trusted Types 安全机制。它已经不再是新项目的首选但在 WordPress、企业后台、遗留系统、CMS 模板和简单交互页面中仍然大量存在。2. jQuery 的核心能力jQuery 的能力主要集中在四个方面。2.1 选择器jQuery 使用 CSS 选择器语法选取元素例如$(p)// 所有段落$(#main)// id 为 main 的元素$(.btn)// class 为 btn 的元素$(ul li.active)// ul 下 class 为 active 的 li这比原生 JavaScript 早期写法简洁很多也更容易表达复杂层级关系。2.2 DOM 操作jQuery 可以方便地读取、修改、插入和删除节点$(#title).text(新标题);$(.content).html(p新内容/p);$(ul).append(li新增项/li);$(.old).remove();这些方法降低了 DOM 操作的门槛使前端交互开发更直观。2.3 事件处理jQuery 统一了浏览器事件模型$(.btn).on(click,function(){alert(点击了按钮);});它还支持事件委托适合处理动态生成的元素。2.4 AJAX 交互jQuery 的 AJAX 封装曾经是前端访问后端接口的常用方式$.getJSON(/api/items,function(data){console.log(data);});在现代前端中fetch和axios已经更常用但 jQuery AJAX 在遗留系统中仍然常见。3. jQuery 代码示例与解析下面是一个简单的 jQuery 页面交互示例。!DOCTYPEhtmlhtmlheadmetacharsetutf-8titlejQuery 示例/titlescriptsrchttps://code.jquery.com/jquery-4.0.0.min.js/script/headbodyh1idtitle原始标题/h1ulidlistliPython/liliJavaScript/liliJava/li/ulbuttonidadd添加语言/buttonbuttonidhighlight高亮第一项/buttonscript$(function(){// 1. 添加语言$(#add).on(click,function(){$(#list).append(liGo/li);});// 2. 高亮第一项$(#highlight).on(click,function(){$(#list li).first().css(color,red).css(font-weight,bold);});});/script/body/html代码解析$(function () { ... })表示 DOM 加载完成后执行$(#add).on(click, ...)绑定按钮点击事件$(#list).append(...)向列表末尾插入新节点$(#list li).first()选取第一个li.css().css()展示了 jQuery 典型的链式调用。亮点选择器直观接近 CSS 写法链式调用减少中间变量DOM 操作与事件绑定高度统一适合快速实现轻量级交互。4. Python 中的“jQuery 风格”PyQuery如果要在 Python 中体验 jQuery 的操作方式可以使用PyQuery。它不是 jQuery 本身而是把 jQuery 的选择器和 DOM 操作风格移植到 Python 中底层依赖 lxml 进行 HTML/XML 解析。安装方式pipinstallpyquery示例代码frompyqueryimportPyQueryaspq html ul idlist li classlangPython/li li classlangJavaScript/li li classlang activeJava/li /ul docpq(html)# 1. 选择所有 liitemsdoc(#list li)foriteminitems.items():print(item.text())# 2. 选择 class 为 active 的 liactivedoc(#list li.active)print(激活项,active.text())# 3. 修改内容doc(#list).append(li classlangGo/li)# 4. 输出修改后的 HTMLprint(doc(#list).html())解析pq(html)将 HTML 字符串解析为可操作对象doc(#list li)使用 CSS 选择器选取元素.items()用于遍历多个匹配节点.text()获取文本内容.append()插入新节点.html()获取子节点 HTML。亮点对熟悉 jQuery 的开发者非常友好CSS 选择器表达能力强适合爬虫、HTML 清洗、模板后处理与requests配合可以快速搭建“请求 解析”流水线。需要注意的是PyQuery 只能处理静态 HTML不能执行 JavaScript。如果页面内容依赖前端动态渲染仍需配合 Selenium、Playwright 等工具。5. Python 自动化测试中的 jQuery 协同在 Web 自动化测试中Python 通常负责测试流程、断言和数据校验而 jQuery 可以在浏览器环境中简化 DOM 查询和交互。示例思路如下fromseleniumimportwebdriver driverwebdriver.Chrome()driver.get(https://example.com)# 通过执行 jQuery 脚本获取页面标题文本title_textdriver.execute_script(return $(#title).text();)print(title_text)# 也可以通过 jQuery 触发点击driver.execute_script($(#add).click();)这种方式适合已经加载了 jQuery 的页面。如果页面未引入 jQuery则不能直接使用。此时更稳妥的做法是使用 Selenium 原生定位方法例如find_element、CSS 选择器或 XPath。亮点可以用 jQuery 快速定位复杂元素适合遗留系统的自动化回归与 PyTest、Unittest 等框架结合后可形成完整测试链路。6. 技术亮点总结维度jQueryPython 生态映射选择器CSS 选择器选取 DOMPyQuery 支持同类选择器DOM 操作修改、插入、删除节点PyQuery 可解析和重构 HTML链式调用多步操作连写PyQuery 同样支持链式风格自动化测试浏览器端简化交互Selenium 可执行 jQuery 脚本适用场景遗留系统、轻量交互爬虫解析、测试断言、HTML 处理jQuery 的价值已经从“前端首选库”转变为“长期存在的基础设施”。它没有被完全淘汰而是退居幕后继续支撑大量真实系统。对 Python 开发者而言理解 jQuery 有助于维护遗留 Web 项目、编写自动化测试脚本以及使用 PyQuery 进行高效 HTML 解析。jQuery 代表的是前端工程化的早期范式而 PyQuery 则把这种范式带入了 Python 数据处理和网页解析场景。7. 学习建议如果要系统掌握这一主题可以按以下路径学习先理解 jQuery 的选择器、DOM 操作、事件和 AJAX阅读 jQuery 4.0 的变更了解它如何现代化使用 PyQuery 在 Python 中练习 HTML 解析结合requests完成静态页面抓取结合 Selenium 理解浏览器端 jQuery 调用对比 BeautifulSoup、lxml、PyQuery 的差异形成自己的选型判断。jQuery 本身不是 Python 库但它的 API 思想、DOM 操作方式和插件生态仍然值得以 Python 技术报告的视角重新梳理。对于需要长期阅读代码、维护系统、编写解析脚本和自动化测试的开发者来说这类“老牌工具库”并不是过时知识而是理解 Web 技术演进的重要参照。
阅读完成 · 觉得有帮助？
