jquery笔记
jQuery 简介
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。
jQuery 基本语法
$(selector).action()$是 jQuery 的别名selector用于选择 HTML 元素action()是对选中元素执行的操作
常用选择器
$("#id") // ID 选择器
$(".class") // 类选择器
$("element") // 标签选择器
$("parent child") // 后代选择器 DOM 操作
$("#demo").text("Hello") // 设置文本内容
$("#demo").html("<b>Hi</b>") // 设置 HTML 内容
$("#demo").val() // 获取表单元素的值
$("#demo").attr("href") // 获取属性值 事件处理
$("#btn").click(function() {
alert("Clicked");
});
$(document).ready(function() {
// 文档加载完成后执行
}); 动画效果
$("#box").hide() // 隐藏元素
$("#box").show() // 显示元素
$("#box").fadeIn() // 淡入
$("#box").fadeOut() // 淡出
$("#box").slideUp() // 向上滑动隐藏
$("#box").slideDown() // 向下滑动显示 Ajax 请求
$.ajax({
url: "data.json",
method: "GET",
success: function(data) {
console.log(data);
},
error: function(err) {
console.log("Error:", err);
}
}); 链式调用
jQuery 支持链式调用，多个操作可以连在一起执行：
$("#demo").css("color", "red").slideUp().slideDown(); 实用方法
$.each(array, function(index, value) {
console.log(index, value);
});
$.trim(" text ") // 去除字符串两端空格 注意事项
- 避免过度使用 jQuery，现代 JavaScript（ES6+）已能实现许多功能。
- 使用
$(document).ready()确保 DOM 加载完成后再执行脚本。 - 注意选择器性能，优先使用 ID 或类选择器。
以上是 jQuery 的核心功能和常见用法，适合快速上手和日常开发参考。
