jquery如何使用
引入 jQuery 库
在 HTML 文件中通过 <script> 标签引入 jQuery 库。可以从官方 CDN 或下载本地文件引入：
<!-- 使用 CDN 引入最新版本 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 或下载本地文件 -->
<script src="jquery.min.js"></script>基础语法
jQuery 的核心是通过 $() 或 jQuery() 选择 DOM 元素，并对其执行操作。语法格式为：
$(selector).action();selector：CSS 选择器（如#id、.class、tag）。action()：对元素执行的方法（如click()、hide()）。
常用方法示例
DOM 操作
// 获取/设置内容
$("#element").text("Hello"); // 设置文本
$("#element").html("<b>Hello</b>"); // 设置 HTML
// 修改属性
$("img").attr("src", "new-image.jpg");
// 添加/移除类
$("#element").addClass("active");
$("#element").removeClass("inactive");事件处理
// 点击事件
$("#button").click(function() {
alert("Button clicked!");
});
// 表单提交事件
$("form").submit(function(e) {
e.preventDefault(); // 阻止默认提交
console.log("Form submitted");
});AJAX 请求
$.ajax({
url: "api/data",
method: "GET",
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.error(error);
}
});链式调用
jQuery 支持链式调用，多个方法可连续执行：
$("#element")
.css("color", "red")
.slideUp(1000)
.slideDown(1000);动态元素绑定
使用 on() 方法为动态生成的元素绑定事件：
$(document).on("click", ".dynamic-button", function() {
console.log("Dynamic button clicked");
});动画效果
内置动画方法如 fadeIn()、slideToggle()：
$("#box").fadeIn(500); // 500ms 淡入
$("#box").slideToggle(); // 滑动切换显示/隐藏遍历元素
使用 each() 遍历匹配的元素：
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
});注意事项
- 确保 DOM 加载完成后执行代码，使用
$(document).ready()：$(document).ready(function() { // jQuery 代码 }); // 或简写 $(function() { // jQuery 代码 }); - 避免过度使用链式调用，以免代码难以维护。
- 在现代项目中，考虑使用原生 JavaScript 或现代框架（如 React/Vue），jQuery 适用于旧项目或简单场景。
