jquery 格式
jQuery 格式基础
jQuery 是一个快速、简洁的 JavaScript 库，其核心语法基于 CSS 选择器，通过链式调用简化 DOM 操作。以下是常见格式示例：
选择元素与操作
通过 $() 或 jQuery() 选择元素，支持 CSS 选择器语法：
$("#id") // ID 选择器
$(".class") // 类选择器
$("div") // 标签选择器
$("div.class") // 组合选择器 链式调用
jQuery 方法通常返回对象自身，支持链式调用：
$("p").css("color", "red").hide(500).show(500); 事件处理
使用 .on() 或简写方法绑定事件：
$("#btn").click(function() {
alert("按钮被点击");
});
// 等效于
$("#btn").on("click", function() {
// 事件逻辑
}); AJAX 请求
jQuery 提供简洁的 AJAX 方法：
$.ajax({
url: "data.json",
method: "GET",
success: function(data) {
console.log(data);
},
error: function(error) {
console.error("请求失败", error);
}
});
// 简写形式
$.get("data.json", function(data) {
console.log(data);
}); DOM 操作
常见 DOM 操作方法示例：
$("#container").append("<p>新段落</p>"); // 插入内容
$("p").remove(); // 删除元素
$("#input").val("默认值"); // 设置表单值 动画效果
内置动画方法如 hide()、show()、animate()：
$("#box").hide(1000); // 淡出
$("#box").animate({left: "250px"}, 500); // 自定义动画 注意事项
- 确保在文档加载完成后执行代码：
$(document).ready(function() { // jQuery 代码 });
// 简写形式
$(function() {
// jQuery 代码
});
- 避免过度使用链式调用，以免降低可读性。
- 使用最新版本 jQuery（如 3.x+）以获得更好的性能和安全性。
通过以上格式和示例，可快速上手 jQuery 的基本操作。如需更复杂功能，可参考官方文档或社区资源。
