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仍在维护旧项目时具有重要价值。