jquery快速入门

jQuery 快速入门指南

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是快速掌握 jQuery 的核心要点。

引入 jQuery

在 HTML 文件中通过 CDN 引入 jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

基础语法

jQuery 通过 $ 符号或 jQuery 关键字调用，基本语法为：

$(selector).action()

• selector：用于选取 HTML 元素（类似 CSS 选择器）。
• action()：对选中元素执行的操作。

选择器示例

通过 ID、类或标签名选取元素：

$("#id")      // 通过 ID 选择
$(".class")   // 通过类选择
$("p")        // 通过标签选择

DOM 操作

修改元素内容或属性：

$("#demo").text("新内容");      // 修改文本
$("#demo").html("<b>加粗</b>"); // 修改 HTML
$("#demo").attr("href", "新链接"); // 修改属性

事件处理

绑定点击事件：

$("button").click(function() {
  alert("按钮被点击");
});

动画效果

隐藏/显示元素或添加动画：

$("#box").hide();     // 隐藏元素
$("#box").show();     // 显示元素
$("#box").fadeIn();   // 淡入效果

Ajax 请求

发送 GET 请求示例：

$.get("url", function(data) {
  console.log(data); // 处理返回数据
});

链式调用

jQuery 支持链式调用多个方法：

$("#box").css("color", "red").slideUp().slideDown();

实用工具方法

常用工具函数示例：

$.trim(" 字符串 ");  // 去除空格
$.isArray(obj);     // 检查是否为数组

通过以上核心功能，可以快速实现动态网页交互。建议结合官方文档和实际项目练习以巩固理解。