jquery e
以下是关于 jQuery 的核心概念、常用方法及实用示例的整理：
jQuery 简介
jQuery 是一个快速、轻量级的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心特点是链式调用和跨浏览器兼容性。
基础语法
通过 $() 或 jQuery() 选择 DOM 元素，支持 CSS 选择器：
// 选择所有 <p> 元素
$("p").hide();常用方法
DOM 操作
// 获取/设置内容
$("#element").text("Hello");
$("#element").html("<b>Hello</b>");
// 修改属性
$("img").attr("src", "new-image.jpg");
// 添加/移除类
$("#div").addClass("highlight");事件处理
// 点击事件
$("#btn").click(function() {
alert("Button clicked");
});
// 动态事件委托
$("#parent").on("click", ".child", handler);动画效果
// 隐藏/显示
$("#box").fadeIn(500);
$("#box").slideUp();
// 自定义动画
$("#obj").animate({left: "250px"}, 1000);Ajax 请求
$.ajax({
url: "data.json",
method: "GET",
success: function(data) {
console.log(data);
}
});链式调用示例
$("#menu")
.css("color", "red")
.slideDown(300)
.delay(500)
.fadeOut();实用技巧
-
使用
$(document).ready()确保 DOM 加载完成：$(function() { // 初始化代码 }); -
遍历元素：
$("li").each(function(index) { console.log(index + ": " + $(this).text()); }); -
检查元素存在：
if ($("#element").length) { // 元素存在 }
性能优化建议
- 缓存选择器结果：
var $el = $("#element"); - 使用 ID 选择器优先于类选择器
- 事件委托减少绑定数量
最新版本 jQuery 3.x 支持现代浏览器并移除了旧版兼容代码，建议通过官方 CDN 引入：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
