菜鸟教程jquery
jQuery 简介
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器，提供易于使用的 API，适合快速开发前端功能。
基础语法
jQuery 通过选择器获取 DOM 元素，并对其执行操作。基本语法结构为：
$(selector).action()$是 jQuery 的别名。selector用于查找 HTML 元素（如#id、.class、tag）。action()是对元素执行的操作（如hide()、click()）。
常用方法
DOM 操作
// 获取/设置内容
$("#demo").text("Hello");
$("#demo").html("<b>Hello</b>");
// 修改属性
$("img").attr("src", "new-image.jpg");
// 添加/移除类
$("#div1").addClass("highlight");
$("#div1").removeClass("highlight"); 事件处理
// 点击事件
$("button").click(function() {
alert("Button clicked");
});
// 表单提交事件
$("form").submit(function(e) {
e.preventDefault(); // 阻止默认提交
console.log("Form submitted");
}); 动画效果
// 隐藏/显示
$("#box").hide(1000); // 1秒内渐隐
$("#box").show(1000);
// 滑动效果
$("#panel").slideUp();
$("#panel").slideDown(); Ajax 请求
jQuery 简化了 Ajax 调用：
$.ajax({
url: "data.json",
type: "GET",
success: function(data) {
console.log("Data received:", data);
},
error: function(xhr, status, error) {
console.error("Error:", error);
}
}); 链式调用
jQuery 支持链式写法，连续调用多个方法：
$("#div1").css("color", "red").slideUp(500).slideDown(500); 学习资源推荐
- 菜鸟教程 jQuery 部分：提供从基础到进阶的完整示例。
- 官方文档：jQuery API 查阅详细方法说明。
- Codecademy 或 freeCodeCamp：通过交互式练习巩固知识。
通过以上内容可快速掌握 jQuery 核心功能，适用于动态网页开发和旧项目维护。
