jquery使用手册
以下是关于jQuery使用手册的整理内容，涵盖核心功能、常用方法及操作示例：
基本语法结构
jQuery通过$()或jQuery()选择DOM元素，支持CSS选择器：
// 选择所有<p>元素
$("p").hide();
// 选择ID为test的元素
$("#test").click(function() { alert("Clicked"); });事件处理
绑定事件的方法简洁直观：
$("#btn").on("click", function() {
$(this).css("background-color", "red");
});
// 简写形式
$("#btn").click(function() { /* 逻辑 */ });DOM操作
常用DOM操作方法：
// 修改内容
$("#div1").html("<b>新内容</b>");
// 修改属性
$("img").attr("src", "new_image.jpg");
// 添加元素
$("#list").append("<li>新增项</li>");
// 移除元素
$("#item").remove();动画效果
内置动画方法链式调用：
$("#box")
.slideUp(300)
.delay(500)
.fadeIn(400);
// 自定义动画
$("#target").animate({
left: '250px',
opacity: '0.5'
}, 1000);AJAX请求
简化异步数据交互：
$.get("test.php", { name: "John" }, function(data) {
$("#result").html(data);
});
// POST请求示例
$.post("save.php",
{ key: "value" },
function(response) {
console.log(response);
}
);实用工具方法
提供常用工具函数：
// 遍历数组
$.each([1,2,3], function(index, value) {
console.log(index + ": " + value);
});
// 检测类型
$.isNumeric("123"); // true插件扩展机制
支持扩展自定义方法：
// 定义插件
$.fn.greenify = function() {
this.css("color", "green");
};
// 使用插件
$("p").greenify();性能优化建议
- 缓存jQuery对象：
var $elem = $("#elem"); - 使用ID选择器最快，避免过度复杂的层级选择
- 事件委托优化：
$("#parent").on("click", ".child", handler) - 链式操作减少DOM访问
官方文档建议参考最新版本文档（目前为jQuery 3.x），部分废弃方法如.live()已被移除。浏览器兼容性问题需注意IE9+的完整支持。
