jquery写法
jQuery 基本语法
jQuery 的核心是通过选择器获取 DOM 元素，并对其进行操作。基本语法结构为：
$(selector).action()$是 jQuery 的别名，等价于jQuery。selector用于选择 HTML 元素（类似 CSS 选择器）。action()是对元素执行的操作方法。
选择器示例
通过 ID、类、标签名等选择元素：
$("#id") // 通过 ID 选择
$(".class") // 通过类名选择
$("p") // 选择所有 <p> 标签
$("div.class") // 选择 div 中特定类的元素
$("ul li:first") // 选择第一个 <li> 元素 常用 DOM 操作
修改内容与属性
$("#id").text("新文本") // 修改文本内容
$("#id").html("<b>加粗</b>") // 修改 HTML 内容
$("#id").attr("href", "url") // 修改属性值
$("#id").css("color", "red") // 修改样式 添加/删除元素
$("#parent").append("<p>新段落</p>") // 在内部末尾添加
$("#target").after("<div>插入</div>") // 在元素后插入
$("#id").remove() // 删除元素 事件处理
绑定点击、鼠标悬停等事件：
$("#btn").click(function() {
alert("按钮被点击");
});
$("#box").hover(
function() { $(this).css("background", "yellow"); }, // 鼠标进入
function() { $(this).css("background", "white"); } // 鼠标离开
); AJAX 请求
发送 GET/POST 请求并处理响应：
$.get("url", function(data) {
console.log("返回数据:", data);
});
$.post("url", { name: "John" }, function(data) {
alert("提交成功");
}); 链式调用
jQuery 支持链式调用多个方法：
$("#id").css("color", "red").slideUp(500).slideDown(500); 动画效果
内置动画方法：
$("#box").hide(1000); // 淡出
$("#box").fadeIn("slow"); // 淡入
$("#box").slideUp(); // 向上滑动隐藏
$("#box").animate({ left: "250px" }, 1000); // 自定义动画 注意事项
- 确保在代码前引入 jQuery 库：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> - 使用
$(document).ready()确保 DOM 加载完成后再执行脚本：$(document).ready(function() { // jQuery 代码 });
