jQuery快速入门指南

jQuery简介

jQuery是一个轻量级的JavaScript库，旨在简化HTML文档遍历、事件处理、动画效果和Ajax交互。其核心优势包括：

跨浏览器兼容：统一不同浏览器的API差异
链式调用 ：支持通过.连接多个操作
丰富的插件生态：如jQuery UI、jQuery Mobile等

基础语法

1. 引入jQuery

html 复制代码

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 文档就绪事件

确保DOM加载完成后执行代码：

javascript 复制代码

$(document).ready(function() {
    // 代码逻辑
});

// 简写形式
$(function() {
    // 代码逻辑
});

核心功能

1. 选择器

支持CSS选择器语法，快速定位元素：

javascript 复制代码

$("#id")        // ID选择器
$(".class")     // 类选择器
$("div")        // 元素选择器
$("input[type='text']") // 属性选择器

2. DOM操作

修改内容：

javascript 复制代码

$("#element").html("<b>新内容</b>");  // 设置HTML
$("#element").text("纯文本");        // 设置文本
$("#element").val("输入值");         // 设置表单值

修改属性：

javascript 复制代码

$("#img").attr("src", "new.jpg");    // 修改src属性
$("#link").removeAttr("target");     // 删除属性

样式操作：

javascript 复制代码

$("#div").css("color", "red");                // 单个样式
$("#div").css({"color": "red", "font-size": "20px"}); // 多个样式
$("#div").addClass("highlight");               // 添加类
$("#div").toggleClass("active");               // 切换类

3. 事件处理

绑定事件：

javascript 复制代码

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

// 通用事件绑定
$("#input").on("focus", function() {
    $(this).css("background", "#eee");
});

事件委托（适用于动态元素）：

javascript 复制代码

$("#table").on("click", "tr", function() {
    $(this).toggleClass("selected");
});

4. 动画效果

基础动画：

javascript 复制代码

$("#box").hide(1000);                 // 隐藏（1秒）
$("#box").slideUp(500);               // 向上滑动
$("#box").fadeIn(2000);               // 淡入

自定义动画：

javascript 复制代码

$("#move").animate({
    left: "200px",
    opacity: 0.5
}, 1000);

5. Ajax交互

基础请求：

javascript 复制代码

$.ajax({
    url: "/api/data",
    type: "GET",
    dataType: "json",
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});

简写方法：

javascript 复制代码

// GET请求
$.get("/api/data", function(data) {
    $("#result").html(data);
});

// POST请求
$.post("/api/save", { name: "Tom" }, function(res) {
    alert(res.message);
});

高级技巧

1. 链式调用

javascript 复制代码

$("#list")
    .find("li")
    .eq(2)
    .css("color", "blue")
    .end()
    .append("<li>新条目</li>");

2. 扩展方法

自定义jQuery插件：

javascript 复制代码

$.fn.highlight = function(color) {
    this.css("background", color || "#ff0");
    return this; // 保持链式调用
};

// 使用
$("div").highlight().fadeOut(1000);

常见问题

$(this)的作用域 ：在事件回调中，$(this)指向当前触发事件的元素。
动态元素事件失效 ：通过事件委托解决（如.on()的第二参数）。
性能优化 ：缓存选择器结果（如var $element = $("#elem")）。

总结

jQuery通过简洁的语法大幅提升前端开发效率，尤其适合处理DOM操作和Ajax交互。尽管现代框架（如Vue/React）逐渐流行，但jQuery在遗留项目维护和快速原型开发中仍有重要价值。

注：以上内容涵盖基础到进阶应用，可根据实际需求调整代码细节。