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 能高效完成常见前端任务，适合快速开发或维护旧项目。
