jquery学习笔记
jQuery 学习笔记
核心概念
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心是 $ 或 jQuery 函数，用于选择 DOM 元素并对其进行操作。
// 基本语法
$(selector).action();选择器
jQuery 选择器基于 CSS 选择器，支持常见的选择方式：
$("#id") // ID 选择器
$(".class") // 类选择器
$("p") // 标签选择器
$("div p") // 后代选择器
$("div > p") // 子元素选择器
$(":button") // 表单元素选择器DOM 操作
jQuery 提供丰富的 DOM 操作方法：
// 获取/设置内容
$("#elem").html(); // 获取 HTML
$("#elem").text("new"); // 设置文本
// 属性操作
$("#img").attr("src"); // 获取属性
$("#img").attr("src", "new.jpg"); // 设置属性
// 类操作
$("#elem").addClass("active");
$("#elem").removeClass("inactive");事件处理
jQuery 简化了事件绑定：
$("#btn").click(function() {
alert("Clicked!");
});
// 常用事件
$("#input").keyup(function() {
console.log($(this).val());
});
// 事件委托
$("#list").on("click", "li", function() {
$(this).toggleClass("selected");
});动画效果
内置动画方法：
$("#box").hide(500); // 隐藏
$("#box").show("slow"); // 显示
$("#box").toggle(200); // 切换
// 自定义动画
$("#box").animate({
opacity: 0.5,
left: "+=50"
}, 1000);Ajax 请求
简化异步请求处理：
$.get("url", function(data) {
console.log(data);
});
$.post("url", { name: "John" }, function(data) {
$("#result").html(data);
});
// 完整 Ajax
$.ajax({
url: "api/data",
type: "GET",
dataType: "json",
success: function(response) {
console.log(response);
}
});链式调用
jQuery 支持链式写法：
$("#div")
.css("color", "red")
.slideUp(200)
.slideDown(200);实用工具方法
提供辅助函数：
$.trim(" text "); // 去空格
$.each(array, function(index, value) {
console.log(value);
});
// 类型判断
$.isArray(obj);
$.isFunction(obj);插件扩展
可通过插件扩展功能：
// 自定义插件
$.fn.highlight = function(color) {
this.css("background", color);
return this;
};
$("p").highlight("yellow");性能优化
- 缓存选择器结果：
var $elem = $("#elem"); - 使用 ID 选择器最快
- 事件委托减少绑定数量
- 合并 DOM 操作
常见问题
-
$(document).ready()确保 DOM 加载完成后执行：$(function() { // 初始化代码 }); -
解决
$冲突：var jq = $.noConflict(); jq("#elem").hide(); -
遍历元素：
$("li").each(function(index) { console.log(index + ": " + $(this).text()); });
