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》
通过实践项目（如动态表单、轮播图）巩固知识。
