jquery菜鸟

以下是针对 jQuery 初学者的基础指南，涵盖核心概念和实用示例：

jQuery 简介

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心特点是“Write Less, Do More”。

环境配置

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

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

基础语法

使用 $() 选择元素，支持 CSS 选择器语法：

$("p") // 选择所有 <p> 标签
$("#myId") // 选择 id="myId" 的元素
$(".myClass") // 选择 class="myClass" 的元素

常用操作

DOM 操作
修改元素内容与属性：

$("#demo").text("新内容"); // 修改文本
$("#demo").html("<b>加粗文本</b>"); // 修改 HTML
$("img").attr("src", "new-image.jpg"); // 修改属性

事件处理
绑定点击事件：

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

动画效果
隐藏/显示元素：

$("#box").hide(1000); // 1 秒内渐隐
$("#box").show(500); // 0.5 秒内渐显

Ajax 示例

从服务器加载数据：

$.get("data-url", function(data) {
    $("#result").html(data);
});

链式调用

jQuery 支持链式写法：

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

学习资源推荐

• 官方文档：jQuery API
• 交互式教程：Codecademy jQuery 课程
• 实战练习：jQuery 小案例合集

通过以上示例可快速上手基础功能，建议从简单项目开始实践。