jquery从入门到精通

jQuery 从入门到精通

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是从入门到精通的系统学习路径。

基础入门

安装与引入 通过 CDN 引入 jQuery：

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

或下载本地文件引入：

<script src="jquery-3.6.0.min.js"></script>

基本语法 jQuery 的核心是 $ 符号，用于选取元素并执行操作：

$(document).ready(function() {
    // 文档加载完成后执行
});

简写形式：

$(function() {
    // 文档加载完成后执行
});

选择器 jQuery 使用 CSS 选择器选取元素：

$("#id")          // ID 选择器
$(".class")       // 类选择器
$("div")          // 标签选择器
$("div.class")    // 组合选择器

DOM 操作 常见操作：

$("p").text("Hello");      // 设置文本内容
$("p").html("<b>Hi</b>");  // 设置 HTML 内容
$("input").val("value");   // 设置表单值
$("div").addClass("new");  // 添加类
$("div").removeClass("old"); // 移除类

进阶操作

事件处理 绑定事件：

$("button").click(function() {
    alert("Clicked");
});

常用事件：

• click、dblclick、mouseenter、mouseleave、keypress、submit。

动画效果 基础动画：

$("div").hide();       // 隐藏
$("div").show();       // 显示
$("div").toggle();     // 切换显示/隐藏
$("div").fadeIn();     // 淡入
$("div").fadeOut();    // 淡出
$("div").slideUp();    // 向上滑动隐藏
$("div").slideDown();  // 向下滑动显示

自定义动画：

$("div").animate({
    opacity: 0.5,
    left: "+=50",
    height: "toggle"
}, 1000);

Ajax 交互 加载数据：

$.ajax({
    url: "data.json",
    method: "GET",
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error(error);
    }
});

简写方法：

$.get("data.json", function(data) {
    console.log(data);
});

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

高级技巧

链式操作 jQuery 支持链式调用：

$("div")
    .addClass("highlight")
    .css("color", "red")
    .fadeOut(1000);

插件开发 创建自定义插件：

(function($) {
    $.fn.greenify = function() {
        this.css("color", "green");
        return this;
    };
}(jQuery));

$("p").greenify();

性能优化

• 缓存选择器结果：

  var $div = $("div");
  $div.hide();
  $div.show();

• 使用事件委托：

  $("ul").on("click", "li", function() {
    console.log($(this).text());
  });

精通实践

源码分析 阅读 jQuery 源码，理解其设计思想和实现细节。

项目实战 通过实际项目（如动态表单、单页应用）巩固技能。

社区参与 参与开源项目，学习最佳实践。

通过系统学习和实践，可以逐步掌握 jQuery 的核心功能并达到精通水平。