jQuery 技术文档

前言

jQuery 可能是目前最受欢迎的 JavaScript 库之一。它简化了在网页中操作和遍历 HTML 文档、处理事件以及执行动画等任务的方法。 本文将介绍 jQuery 的主要语法和概念，如何使用它来访问和修改 HTML 内容和样式，并处理事件。

语法

语法基本结构如下：

$(selector).action()

• $ 定义 jQuery。
• selector（选择器）查询 HTML 元素。
• action() 执行操作（比如添加文本）。

其中，$ 符号名为 jQuery 或者别名，使用时常就是 jquery() 或 $()。\

jQuery 语法基于 CSS 选择器，可以使用 CSS 选择器的大部分语法来查询 HTML 元素，如下所示：

• $(this) 当前 HTML 元素。
• $("p") 所有 <p> 元素。
• $("p:first") 第一个 <p> 元素。
• $("ul li:first") 第一个 <ul> 元素下的第一个 <li> 元素。

基本事件绑定

$(selector).event(function(){
  // event code
});

可以使用 jQuery 绑定事件，以及向元素添加或从元素删除事件处理程序。

• $(document).ready(function()) 当 页面文档加载完毕后才执行的代码。
• $(this).click(function() {}) 当用户点击当前元素时执行代码。
• $("button").on("click", function() {}) 当用户单击所有 <button> 元素时执行代码。\

操作 HTML 元素

常用方法：

• .html() 设置或获取所选元素的 HTML 内容。
• .text() 设置或获取所选元素的文本内容。
• .val() 获取或设置表单字段的值。

$("p").html(); // 获取 p 标签的 HTML 内容
$("p").html("Hello World!"); // 设置 HTML 内容
$("a").attr("href"); // 获取 href 属性值
$("input").val(); // 获取 input 的值

操作 CSS 样式

常用方法：

• .addClass() 添加类
• .removeClass() 删除类
• .toggleClass() 如果类存在则删除，不存在则添加。

$("p").addClass("highlight"); // 添加类
$("p").removeClass("highlight"); // 删除类
$("p").toggleClass("highlight"); // 添加或删除类

jQuery 动画效果

常用方法：

• .hide() 隐藏所选的元素。
• .show() 显示所选的元素。
• .toggle() 切换元素的可见状态。
• .fadeIn() 淡入元素。
• .fadeOut() 淡出元素。
• .slideUp() 向上滑动元素。
• .slideDown() 向下滑动元素。

$("p").hide(); // 隐藏 p 元素
$("p").show(); // 显示 p 元素
$("p").toggle(); // 切换 p 元素的可见性
$("p").fadeIn(); // 减弱 p 元素的 opacity 属性，使其淡入
$("p").fadeOut(); // 增加 p 元素的 opacity 属性，使其淡出

总结

本文介绍了 jQuery 的主要语法和概念，以及如何使用它来访问和修改 HTML 内容和样式，并处理事件。通过深入了解 jQuery，开发人员能够更有效地编写 JavaScript 代码，加速网站的开发和维护。