jquery 菜鸟
以下是针对 jQuery 初学者的基础指南，涵盖核心概念和常用操作：
jQuery 简介
jQuery 是一个快速、轻量级的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心特点是“Write Less, Do More”。
引入 jQuery
在 HTML 文件中通过 CDN 引入 jQuery：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>基础语法
使用 $ 符号或 jQuery 关键字调用函数，通过选择器定位元素：
$(selector).action();常用选择器
- 元素选择器：
$("p") - ID 选择器：
$("#demo") - 类选择器：
$(".test") - 属性选择器：
$("[href]")
DOM 操作
修改元素内容：
$("#demo").text("Hello World"); // 设置文本
$("#demo").html("<b>Hello</b>"); // 设置 HTML修改属性：
$("img").attr("src", "new-image.jpg"); // 修改属性
$("input").val("New Value"); // 修改表单值事件处理
绑定点击事件：
$("button").click(function() {
alert("Button clicked!");
});常见事件：
mouseenter()/mouseleave()keypress()submit()
动画效果
隐藏/显示元素：
$("#box").hide(); // 隐藏
$("#box").show(); // 显示
$("#box").toggle(); // 切换状态滑动效果：
$("#panel").slideDown(); // 下滑
$("#panel").slideUp(); // 上滑Ajax 请求
发送 GET 请求：
$.get("url", function(data) {
console.log(data);
});发送 POST 请求：
$.post("url", { key: "value" }, function(data) {
console.log(data);
});链式调用
jQuery 支持方法链式调用：
$("#demo").css("color", "red").slideUp().slideDown();实用技巧
遍历元素：
$("li").each(function() {
console.log($(this).text());
});动态添加元素：
$("ul").append("<li>New Item</li>");学习资源
- 官方文档：jQuery API
- 交互式教程：Codecademy
- 示例库：jQuery Learning Center
通过实践上述基础操作，可快速掌握 jQuery 的核心功能。
