jquery语法

jQuery 是一种快速、简洁的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是核心语法和常见用法：

基础语法结构

jQuery 的核心是通过 $() 或 jQuery() 函数选择元素并对其操作。基本语法为：

$(selector).action()

• selector：用于查找 HTML 元素的CSS选择器。
• action()：对选中元素执行的操作（如事件或方法）。

选择器示例

// 通过ID选择元素
$("#myId").hide();

// 通过类选择元素
$(".myClass").css("color", "red");

// 通过标签名选择元素
$("p").fadeOut();

文档就绪事件

确保代码在DOM加载完成后执行：

$(document).ready(function() {
    // jQuery代码
});

// 简写形式
$(function() {
    // jQuery代码
});

常见方法

DOM操作

// 获取或设置内容
$("#element").text("新文本");
$("#element").html("<b>加粗文本</b>");

// 修改属性
$("img").attr("src", "new-image.jpg");

// 添加或移除类
$("#div").addClass("highlight");
$("#div").removeClass("oldClass");

事件处理

// 点击事件
$("#btn").click(function() {
    alert("按钮被点击");
});

// 表单提交事件
$("form").submit(function(e) {
    e.preventDefault(); // 阻止默认提交
    console.log("表单已提交");
});

动画效果

// 隐藏/显示
$("#box").hide(1000); // 1秒内渐隐
$("#box").show("slow");

// 滑动效果
$("#panel").slideUp();
$("#panel").slideDown();

Ajax请求

$.ajax({
    url: "api/data",
    method: "GET",
    success: function(response) {
        console.log(response);
    },
    error: function(xhr) {
        console.error("请求失败");
    }
});

链式调用

jQuery 支持链式调用，可连续执行多个方法：

$("#element")
    .css("color", "blue")
    .slideUp(500)
    .slideDown(500);

注意事项

• 使用 $ 符号前需确保 jQuery 库已加载。
• 选择器性能：优先使用ID选择器，复杂选择器可能影响性能。
• 现代浏览器已支持许多 jQuery 功能（如 querySelector），可根据需求权衡是否引入 jQuery。