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使用CSS选择器语法选取DOM元素：

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

事件处理

绑定事件监听器：

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

DOM操作

修改元素内容或属性：

$("#myDiv").html("新内容"); // 修改HTML内容
$("#myImg").attr("src", "new-image.jpg"); // 修改属性

动画效果

内置动画方法：

$("#box").hide(); // 隐藏元素
$("#box").show(); // 显示元素
$("#box").fadeIn(); // 淡入
$("#box").slideUp(); // 向上滑动隐藏

Ajax请求

发送异步请求：

$.ajax({
    url: "data.json",
    method: "GET",
    success: function(data) {
        console.log(data);
    }
});

链式调用

jQuery支持链式调用：

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

实用工具方法

常用工具函数：

$.trim(" 字符串 "); // 去除空格
$.isArray([]); // 检查是否为数组
$.each([1, 2, 3], function(index, value) {
    console.log(value);
});

插件扩展

使用第三方插件或自定义插件：

// 示例：使用jQuery UI插件
$("#datepicker").datepicker();

性能优化

优化jQuery代码：

• 缓存选择器结果：var $elem = $("#myElem");
• 使用事件委托：$("#parent").on("click", ".child", handler);
• 避免频繁DOM操作

兼容性处理

处理浏览器差异：

// 检测浏览器特性
if ($.support.ajax) {
    // 支持Ajax
}

最佳实践

• 将代码放在$(document).ready()中确保DOM加载完成：

  $(function() {
    // 页面加载完成后执行
  });

• 避免全局污染，使用IIFE封装代码
• 优先使用原生JavaScript简单操作

学习资源

• 官方文档：jQuery API Documentation
• 交互式教程：Codecademy jQuery课程
• 书籍推荐：《jQuery in Action》