jquery教程
以下是一份实用的jQuery教程指南，涵盖核心概念和操作方法：
jQuery简介
jQuery是一个轻量级JavaScript库，简化了DOM操作、事件处理、动画效果和AJAX交互。兼容多种浏览器，语法简洁高效。
引入jQuery
在HTML文件中通过CDN引入jQuery库：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>基础语法
使用$()选择器获取DOM元素，支持CSS选择器语法：
$('p') // 选择所有<p>元素
$('#myId') // 选择id为myId的元素
$('.myClass') // 选择class为myClass的元素DOM操作
// 修改内容
$('#elem').html('<b>新内容</b>'); // 设置HTML
$('#elem').text('纯文本'); // 设置文本
// 修改属性
$('img').attr('src', 'new.jpg'); // 修改src属性
$('input').val('默认值'); // 设置表单值事件处理
$('#btn').click(function() {
alert('按钮被点击');
});
// 等效写法
$('#btn').on('click', function() {
// 事件处理逻辑
});动画效果
$('#box').hide(500); // 隐藏元素（500ms）
$('#box').show('slow'); // 显示元素
$('#box').toggle(); // 切换显示状态
$('#box').fadeIn(1000); // 淡入效果
$('#box').animate({left: '250px'}); // 自定义动画AJAX请求
$.ajax({
url: 'api/data',
method: 'GET',
success: function(data) {
console.log('获取数据:', data);
},
error: function(err) {
console.error('请求失败:', err);
}
});
// 简化写法
$.get('api/data', function(data) {
// 处理返回数据
});实用技巧
链式调用：
$('#elem')
.css('color', 'red')
.slideUp(200)
.slideDown(200);遍历元素：
$('li').each(function(index) {
console.log(index + ': ' + $(this).text());
});插件扩展
jQuery支持通过插件扩展功能，典型插件包括：
- jQuery UI（界面组件）
- DataTables（表格处理）
- Slick（轮播图）
学习资源
- 官方文档：https://api.jquery.com
- Codecademy jQuery课程
- W3Schools jQuery教程
- 《jQuery实战》书籍
注意：现代前端开发中，原生JavaScript和框架（如React/Vue）逐渐取代jQuery，但jQuery仍在维护旧项目时具有重要价值。
