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》
