jquery 教程

jQuery 教程概览

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是核心内容与学习方法。

基础语法

jQuery 通过 $ 或 jQuery 关键字调用，基本语法为选择元素后执行操作：

$(selector).action();

示例：点击按钮隐藏段落

$("button").click(function() {
  $("p").hide();
});

选择器

jQuery 使用 CSS 选择器匹配元素：

• 元素选择器：$("p")
• ID 选择器：$("#demo")
• 类选择器：$(".test")
• 组合选择器：$("div, p")

DOM 操作

• 获取/设置内容：

  $("#div1").text(); // 获取文本
  $("#div1").html("<b>新内容</b>"); // 设置 HTML

• 修改属性：

  $("img").attr("src", "new-image.jpg");

• 添加/删除元素：

  $("ul").append("<li>新项目</li>"); // 末尾添加
  $("p").remove(); // 删除元素

事件处理

常见事件包括 click、mouseenter、keypress 等：

$("#btn").click(function() {
  alert("按钮被点击");
});

事件委托：

$("ul").on("click", "li", function() {
  $(this).toggleClass("active");
});

动画效果

• 显示/隐藏：

  $(".box").hide(1000); // 1秒内隐藏
  $(".box").show("slow");

• 淡入淡出：

  $("#img1").fadeIn(2000);

• 自定义动画：

  $("div").animate({left: '250px', opacity: '0.5'}, 1000);

Ajax 请求

加载远程数据：

$.get("url", function(data) {
  $("#result").html(data);
});

POST 请求：

$.post("url", {name: "John"}, function(data) {
  console.log(data);
});

插件扩展

jQuery 支持通过插件扩展功能，例如：

• Validation：表单验证
• DataTables：动态表格

引入插件后调用：

$("#form").validate();

学习资源

• 官方文档：jQuery API
• 在线练习：Codecademy
• 书籍推荐：《jQuery in Action》

通过实践项目（如动态表单、轮播图）巩固知识。