菜鸟jquery
jQuery 基础入门
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是初学者需要掌握的核心内容。
引入 jQuery
在 HTML 文件中通过 CDN 引入 jQuery：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>选择器
jQuery 使用 CSS 选择器语法来选取 DOM 元素：
$("p") // 选择所有 <p> 元素
$("#myId") // 选择 id="myId" 的元素
$(".myClass") // 选择 class="myClass" 的元素
$("div p") // 选择 <div> 内的所有 <p> 元素事件处理
常见事件绑定方法：
$("button").click(function() {
alert("按钮被点击");
});
$("input").keypress(function(event) {
console.log("按键码: " + event.which);
});DOM 操作
基本操作方法：
$("#content").html("<b>新内容</b>"); // 设置HTML内容
$("#content").text("纯文本内容"); // 设置文本内容
$("#myDiv").append("<p>追加内容</p>"); // 在末尾添加内容
$("#myDiv").remove(); // 移除元素动画效果
简单动画实现：
$("#box").hide(1000); // 1秒内渐隐
$("#box").show(500); // 0.5秒内渐显
$("#box").toggle(300); // 切换显示状态
$("#box").fadeTo(1000, 0.5); // 渐变到半透明AJAX 请求
基本 AJAX 示例：
$.get("test.php", function(data) {
$("#result").html(data);
});
$.post("submit.php",
{ name: "John", age: 30 },
function(response) {
console.log("响应: " + response);
}
);实用技巧
链式调用
jQuery 支持方法链式调用：
$("#myDiv")
.css("color", "red")
.slideUp(200)
.slideDown(200);遍历元素
使用 each() 方法遍历：
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
});表单操作
获取和设置表单值：
$("input#username").val(); // 获取输入值
$("input#username").val("新值"); // 设置输入值
$("input[type='checkbox']").prop("checked", true); // 勾选复选框最佳实践
-
始终使用 $(document).ready() 确保 DOM 加载完成：
$(document).ready(function() { // 代码在这里执行 }); -
缓存 jQuery 选择结果以提高性能：
var $elements = $(".myClass"); $elements.hide(); -
使用最新版本 jQuery 并考虑迁移到现代框架如 Vue/React 用于复杂应用。
-
优先使用 CSS 实现简单动画，jQuery 动画会触发重绘影响性能。
-
注意选择器性能，ID 选择器最快，复杂选择器较慢。
