jQuery实战

jQuery 基础用法

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。

DOM 操作
通过选择器获取元素并修改内容或属性：

$("#myId").text("新内容"); // 修改文本  
$(".myClass").attr("src", "image.jpg"); // 修改属性  
$("div").addClass("highlight"); // 添加类  

事件绑定
使用 on() 方法绑定事件：

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

jQuery 动画效果

显示/隐藏元素

$("#box").hide(500); // 500ms 隐藏  
$("#box").show("slow"); // 慢速显示  
$("#box").toggle(); // 切换状态  

自定义动画
使用 animate() 实现复杂动画：

$("#box").animate({  
    opacity: 0.5,  
    left: "+=50px"  
}, 1000);  

Ajax 请求

加载远程数据

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

简化方法

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

插件扩展

使用第三方插件
例如，验证插件 jQuery Validation：

$("#form").validate({  
    rules: {  
        email: { required: true, email: true }  
    }  
});  

自定义插件
扩展 jQuery 功能：

$.fn.myPlugin = function() {  
    this.css("color", "red");  
    return this; // 支持链式调用  
};  
$("p").myPlugin();  

性能优化

选择器优化
避免过度使用通用选择器：

$("div.myClass"); // 优于 $(".myClass")  

事件委托
减少事件绑定数量：

$("#parent").on("click", ".child", function() {  
    // 处理子元素点击  
});  

兼容性与升级

迁移到现代框架
若需升级，可使用 jQuery Migrate 插件过渡，逐步替换为原生 JavaScript 或框架（如 React/Vue）。

通过以上方法，jQuery 能高效完成常见前端任务，适合快速开发或维护旧项目。