jquery笔记
jQuery 基础语法
jQuery 通过 $ 或 jQuery 关键字调用，基本语法为：
$(selector).action()selector：用于选择 DOM 元素（如"p"、".class"、"#id"）。action()：对元素执行的操作（如hide()、click()）。
选择器
jQuery 支持 CSS 选择器，常见用法：
$("p") // 选择所有 <p> 元素
$("#demo") // 选择 id="demo" 的元素
$(".test") // 选择 class="test" 的元素
$("input[type='text']") // 选择类型为 text 的 input DOM 操作
获取/设置内容
$("#div").html() // 获取 HTML 内容
$("#div").html("新内容") // 设置 HTML 内容
$("#input").val() // 获取表单值 修改属性
$("img").attr("src", "new-image.jpg") // 修改 src 属性
$("a").removeAttr("target") // 删除属性 添加/删除元素
$("#list").append("<li>新项</li>") // 末尾添加
$("#list").prepend("<li>首项</li>") // 开头添加
$("#item").remove() // 删除元素 事件处理
常见事件
$("button").click(function() { alert("点击事件"); });
$("input").change(function() { console.log("值变化"); });
$(document).ready(function() { /* DOM 加载完成后执行 */ }); 事件委托
$("#parent").on("click", "child", function() {
// 处理子元素事件
}); 动画效果
基础动画
$("#box").hide(1000); // 隐藏（1秒）
$("#box").show("slow"); // 显示（慢速）
$("#box").toggle(); // 切换显示/隐藏 自定义动画
$("#box").animate({
opacity: 0.5,
left: "+=50px"
}, 500); // 500毫秒完成 AJAX 请求
GET/POST 请求
$.get("url", {param: "value"}, function(data) {
console.log(data);
});
$.post("url", {data: "value"}, function(response) {
alert("提交成功");
}); 完整 AJAX 示例
$.ajax({
url: "api/data",
type: "GET",
dataType: "json",
success: function(result) {
$("#result").html(result.message);
},
error: function(xhr, status, error) {
console.error(error);
}
}); 实用技巧
链式调用
$("#div").css("color", "red").slideUp(500).slideDown(500); 遍历元素
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
}); 扩展插件
$.fn.myPlugin = function() {
this.css("background", "yellow");
};
$("#box").myPlugin(); 以上内容涵盖了 jQuery 的核心功能，适合快速查阅和复习。
