jquery代码讲解
jQuery 基础语法结构
jQuery 通过 $() 或 jQuery() 选择器获取 DOM 元素，支持 CSS 选择器语法。例如：
$("p") // 选择所有 <p> 标签
$("#myId") // 选择 id="myId" 的元素
$(".myClass") // 选择 class="myClass" 的元素 事件绑定与处理
使用 .on() 方法绑定事件，.click() 等为快捷方式：
$("#btn").on("click", function() {
alert("按钮被点击");
});
// 快捷方式
$("#btn").click(function() {
$(this).hide(); // 隐藏当前元素
}); DOM 操作
- 修改内容：
$("#element").text("新文本"); // 设置纯文本 $("#element").html("<b>加粗文本</b>"); // 设置 HTML - 修改属性：
$("#img").attr("src", "new-image.jpg"); // 修改 src 属性 $("#checkbox").prop("checked", true); // 修改布尔属性
动态样式控制
通过 .css() 方法直接修改样式：
$("#box").css("color", "red"); // 单一样式
$("#box").css({ "color": "red", "font-size": "20px" }); // 多样式对象 Ajax 请求
jQuery 封装了简化 Ajax 的方法：
$.ajax({
url: "api/data",
method: "GET",
success: function(response) {
console.log("数据加载成功", response);
},
error: function(xhr, status, error) {
console.error("请求失败", error);
}
});
// 快捷方式
$.get("api/data", function(data) {
console.log(data);
}); 动画效果
内置动画方法如 .fadeIn()、.slideUp()：
$("#box").fadeIn(1000); // 淡入效果（1秒）
$("#box").slideUp(500, function() {
console.log("动画完成");
}); 链式调用
jQuery 支持链式调用，提高代码简洁性：
$("#box")
.css("background", "yellow")
.slideUp(1000)
.slideDown(1000); 插件扩展
通过 $.fn 扩展自定义方法：
$.fn.highlight = function(color) {
this.css("background", color || "#ff0");
return this; // 保持链式调用
};
$("p").highlight("red"); 性能优化建议
- 缓存选择器结果：
var $element = $("#myId"); - 使用事件委托：
$("#parent").on("click", ".child", handler); - 最小化 DOM 操作，合并多次修改。
以上内容涵盖 jQuery 的核心功能，适用于快速上手和日常开发需求。
