jquery详解
jQuery 简介
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心特点是“Write Less, Do More”，通过链式调用和简洁的 API 提升开发效率。
jQuery 核心功能
DOM 操作
通过选择器快速定位元素，支持 CSS 选择器语法：
$("#id") // ID 选择器
$(".class") // 类选择器
$("div") // 标签选择器 事件处理
简化事件绑定与触发：
$("button").click(function() {
alert("按钮被点击");
}); 动画效果
内置滑动、淡入淡出等效果：
$("#box").fadeIn(1000); // 1秒淡入
$("#box").slideUp(500); // 0.5秒向上滑动 Ajax 支持
简化异步请求：
$.ajax({
url: "data.json",
success: function(data) {
console.log(data);
}
}); jQuery 常用方法
属性操作
$("img").attr("src", "new-image.jpg"); // 修改属性
$("div").addClass("highlight"); // 添加类 内容操作
$("#content").html("<p>新内容</p>"); // 替换HTML
$("#input").val("默认文本"); // 设置表单值 遍历与筛选
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
});
$("div").filter(".active").hide(); // 筛选并隐藏 jQuery 插件扩展
通过 $.fn 扩展自定义方法：
$.fn.highlight = function(color) {
this.css("background-color", color);
return this; // 保持链式调用
};
$("p").highlight("yellow"); 性能优化建议
- 缓存选择器结果避免重复查询：
var $elements = $(".items"); $elements.hide(); - 使用事件委托减少绑定数量：
$("#parent").on("click", ".child", handler);
兼容性与版本
- jQuery 1.x 支持 IE6/7/8，2.x+ 仅支持现代浏览器。
- 最新版本（如 3.6.0）优化性能并修复安全问题。
通过以上核心功能和实践技巧，jQuery 能显著简化前端开发流程，适合快速构建交互式网页应用。
