怎么用jquery
引入 jQuery 库
在 HTML 文件中通过 <script> 标签引入 jQuery 库。可以从 CDN 加载，也可以下载到本地使用。
<!-- 使用 CDN 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>基础语法
jQuery 的核心是通过 $ 或 jQuery 函数选择元素并操作。语法格式为 $(selector).action()。
// 选择所有 <p> 元素并隐藏
$("p").hide();选择元素
jQuery 使用 CSS 选择器语法选取元素。
// 通过 ID 选择
$("#myId");
// 通过类选择
$(".myClass");
// 通过标签名选择
$("div");
// 组合选择
$("div.myClass");事件处理
jQuery 提供了简洁的事件绑定方法。
// 点击事件
$("button").click(function() {
alert("按钮被点击");
});
// 鼠标悬停事件
$("p").hover(
function() { $(this).css("color", "red"); },
function() { $(this).css("color", "black"); }
);DOM 操作
jQuery 可以方便地操作 DOM 元素。
// 获取或设置内容
$("#myDiv").text("新文本");
let content = $("#myDiv").html();
// 添加元素
$("body").append("<p>追加的段落</p>");
// 移除元素
$("#myDiv").remove();动画效果
jQuery 内置了多种动画效果。
// 隐藏/显示
$("#myDiv").hide();
$("#myDiv").show();
// 淡入淡出
$("#myDiv").fadeIn();
$("#myDiv").fadeOut();
// 滑动效果
$("#myDiv").slideUp();
$("#myDiv").slideDown();AJAX 请求
jQuery 简化了 AJAX 请求的处理。
// GET 请求
$.get("test.php", function(data) {
alert("返回数据: " + data);
});
// POST 请求
$.post("test.php", { name: "John" }, function(data) {
alert("返回数据: " + data);
});链式调用
jQuery 支持链式调用，可以在一个语句中执行多个操作。
$("#myDiv").css("color", "red").slideUp(2000).slideDown(2000);实用工具方法
jQuery 提供了一些实用工具方法。
// 遍历数组
$.each([1, 2, 3], function(index, value) {
console.log(index + ": " + value);
});
// 扩展对象
let newObj = $.extend({}, obj1, obj2);
