jQuery 参考手册学习笔记

1. 简介

jQuery 是一个高效、精简并且功能强大的 JavaScript 类库，它简化了 HTML 文档遍历和操作、事件处理、动画等常见任务的操作。jQuery 使得开发者能够更加便捷、快捷的开发出高质量、高交互性的 Web 应用程序。

2. 基本语法

jQuery 的基本语法格式为 $(selector).action()。通过 $ 符号，我们可以定义 jQuery，而 selector 则是要操作的 HTML 元素，而后面的 action 则是对该元素执行的动作。

下面是一些常用的 jQuery 动作：

2.1 显示和隐藏元素

jQuery 可以通过 .show() 和 .hide() 方法来显示和隐藏 HTML 元素。

jsCopy Code
// 显示元素
$("p").show();

// 隐藏元素
$("p").hide();

2.2 添加和移除 CSS 类

jQuery 可以通过 .addClass() 和 .removeClass() 方法来添加和移除 HTML 元素的 CSS 类。

jsCopy Code
// 添加类
$("#myDiv").addClass("highlight");

// 移除类
$("#myDiv").removeClass("highlight");

2.3 获取和设置元素属性

jQuery 可以通过 .attr() 方法来获取和设置 HTML 元素的属性。

jsCopy Code
// 获取属性
var href = $("a").attr("href");

// 设置属性
$("img").attr("alt", "图片描述");

2.4 处理 HTML 内容

jQuery 可以通过 .html() 方法来获取和设置 HTML 元素的内容。

jsCopy Code
// 获取内容
var content = $("p").html();

// 设置内容
$("p").html("新的段落内容");

3. 实例操作

下面是一些具体的实例，展示了 jQuery 的常见用法：

3.1 动态添加元素

可以使用 .append() 方法向文档中添加新的元素。

jsCopy Code
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append("这是通过 jQuery 动态添加的新元素。");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>这是一个新的列表项。</li>");
  });
});

点击按钮时，会动态在 p 元素或者 ol 元素末尾添加新的元素。

3.2 响应事件

可以使用 .on() 方法绑定事件处理函数。

jsCopy Code
$(document).ready(function(){
  $("p").on({
    mouseenter: function(){
      $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
      $(this).css("background-color", "white");
    },
    click: function(){
      $(this).css("background-color", "yellow");
    }
  });
});

当鼠标进入 p 元素时，元素背景颜色变为浅灰色；当鼠标移出 p 元素时，恢复为白色；当点击 p 元素时，元素背景颜色变为黄色。

4. 总结

通过本文档的学习，我们了解了 jQuery 的基本语法、常用动作以及实例操作。jQuery 是一个非常强大、方便的 JavaScript 类库，在 Web 开发中有很广泛的应用。