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 通过 $ 符号定义，基本语法为 $(selector).action()：

• selector：用于查找 HTML 元素。
• action()：对元素执行的操作。

// 隐藏所有 <p> 元素
$("p").hide();

常用选择器

• 元素选择器：$("p") 选择所有 <p> 元素。
• ID 选择器：$("#demo") 选择 ID 为 demo 的元素。
• 类选择器：$(".test") 选择所有 class 为 test 的元素。

事件处理

jQuery 提供简洁的事件绑定方法：

// 点击按钮时隐藏段落
$("button").click(function() {
    $("p").hide();
});

效果与动画

• 隐藏/显示：hide()、show()、toggle()
• 淡入淡出：fadeIn()、fadeOut()、fadeToggle()
• 滑动效果：slideDown()、slideUp()、slideToggle()

// 点击按钮淡出段落
$("button").click(function() {
    $("p").fadeOut();
});

DOM 操作

• 获取内容：text()、html()、val()
• 设置内容：text("新内容")、html("<b>新内容</b>")
• 添加元素：append()、prepend()
• 删除元素：remove()、empty()

// 在 div 末尾添加文本
$("div").append("追加内容");

Ajax 请求

jQuery 简化了 Ajax 调用：

$.get("url", function(data) {
    alert("数据加载成功：" + data);
});

链式调用

jQuery 支持链式调用，多个操作可写在一行：

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

学习资源推荐

1. 官方文档：jQuery API Documentation
2. 在线教程：W3Schools jQuery 教程
3. 实战练习：Codecademy jQuery 课程

通过以上基础内容，可以快速上手 jQuery 的常见操作。实际开发中多练习案例，逐步掌握更高级的功能。