jquery使用教程
jQuery 基本介绍
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器，提供易于使用的 API，适合快速开发前端功能。
引入 jQuery
在 HTML 文件中通过 CDN 引入 jQuery：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>或下载本地文件后引入：
<script src="path/to/jquery.min.js"></script>选择器
jQuery 使用 CSS 选择器语法选取 DOM 元素：
$("#id") // 通过 ID 选择
$(".class") // 通过类名选择
$("div") // 通过标签名选择
$("div.class") // 组合选择 DOM 操作
修改内容
$("#element").text("新文本"); // 设置文本
$("#element").html("<b>加粗</b>"); // 设置 HTML 修改属性
$("#img").attr("src", "new-image.jpg"); // 修改 src 属性
$("#input").val("默认值"); // 修改表单值 样式操作
$("#element").css("color", "red"); // 单一样式
$("#element").css({ "color": "red", "font-size": "16px" }); // 多样式 事件处理
绑定点击事件：
$("#button").click(function() {
alert("按钮被点击");
}); 常见事件：
clickmouseenter/mouseleavekeypresssubmit
动画效果
显示/隐藏
$("#element").hide(); // 隐藏
$("#element").show(); // 显示
$("#element").toggle(); // 切换状态 淡入淡出
$("#element").fadeIn(); // 淡入
$("#element").fadeOut(); // 淡出 Ajax 请求
发起 GET 请求：
$.get("url", function(data) {
console.log("返回数据:", data);
}); 发起 POST 请求：
$.post("url", { key: "value" }, function(data) {
console.log("返回数据:", data);
}); 链式调用
jQuery 支持链式调用：
$("#element")
.css("color", "blue")
.slideUp()
.slideDown(); 插件扩展
通过 jQuery 插件扩展功能：
$.fn.myPlugin = function() {
// 自定义逻辑
};
$("#element").myPlugin(); 注意事项
- 确保 DOM 加载完成后执行代码：
$(document).ready(function() { // 代码逻辑 }); - 避免过度使用动画，影响性能。
- 使用最新版本 jQuery 以获得更好的安全性和性能。
以上内容涵盖了 jQuery 的核心功能，适合初学者快速上手。如需深入学习，可参考官方文档或实际项目实践。
