jquery语法
jQuery 是一种快速、简洁的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是核心语法和常见用法：
基础语法结构
jQuery 的核心是通过 $() 或 jQuery() 函数选择元素并对其操作。基本语法为：
$(selector).action()selector：用于查找 HTML 元素的CSS选择器。action()：对选中元素执行的操作（如事件或方法）。
选择器示例
// 通过ID选择元素
$("#myId").hide();
// 通过类选择元素
$(".myClass").css("color", "red");
// 通过标签名选择元素
$("p").fadeOut();文档就绪事件
确保代码在DOM加载完成后执行：
$(document).ready(function() {
// jQuery代码
});
// 简写形式
$(function() {
// jQuery代码
});常见方法
DOM操作
// 获取或设置内容
$("#element").text("新文本");
$("#element").html("<b>加粗文本</b>");
// 修改属性
$("img").attr("src", "new-image.jpg");
// 添加或移除类
$("#div").addClass("highlight");
$("#div").removeClass("oldClass");事件处理
// 点击事件
$("#btn").click(function() {
alert("按钮被点击");
});
// 表单提交事件
$("form").submit(function(e) {
e.preventDefault(); // 阻止默认提交
console.log("表单已提交");
});动画效果
// 隐藏/显示
$("#box").hide(1000); // 1秒内渐隐
$("#box").show("slow");
// 滑动效果
$("#panel").slideUp();
$("#panel").slideDown();Ajax请求
$.ajax({
url: "api/data",
method: "GET",
success: function(response) {
console.log(response);
},
error: function(xhr) {
console.error("请求失败");
}
});链式调用
jQuery 支持链式调用，可连续执行多个方法：
$("#element")
.css("color", "blue")
.slideUp(500)
.slideDown(500);注意事项
- 使用
$符号前需确保 jQuery 库已加载。 - 选择器性能：优先使用ID选择器，复杂选择器可能影响性能。
- 现代浏览器已支持许多 jQuery 功能（如
querySelector），可根据需求权衡是否引入 jQuery。
