jQuery 2.1.4 系统学习手册

概述

jQuery 是一个快速、简洁的 JavaScript 库,极大简化了 DOM 操作、事件处理、动画和 Ajax 交互。

版本 2.1.4 特点:

• 体积更小 (约 84KB 压缩版)
• 性能优化,专注现代浏览器
• 完整的 API 支持
• 强大的选择器引擎 Sizzle

目录

• 第1章: 开始使用 jQuery
• 第2章: 核心 - 选择器与 $ 函数
• 第3章: DOM 操作
• 第4章: 事件处理
• 第5章: 动画系统
• 第6章: Ajax 技术
• 第7章: 插件开发

第1章: 开始使用 jQuery

1.1 引入 jQuery

使用 CDN 方式引入 jQuery 2.1.4:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

1.2 文档就绪事件

确保 DOM 完全加载后再执行代码:

$(document).ready(function() {
    console.log('DOM 已准备就绪!');
});

// 简写形式
$(function() {
    console.log('这是简写形式');
});

可视化图解: 文档加载流程

第2章: 核心 - 选择器与 $ 函数

2.1 $ 函数的本质

$ 是 jQuery 的别名,用于选择 DOM 元素并返回 jQuery 对象。

// 基础选择器
$('#myId')        // ID选择器
$('.myClass')     // 类选择器
$('div')          // 标签选择器
$('input[type="text"]')  // 属性选择器

2.2 层级与过滤选择器

// 层级选择器
$('ul li')        // 后代选择器
$('ul > li')      // 子选择器
$('h2 + p')       // 相邻兄弟

// 过滤选择器
$('li:first')     // 第一个
$('li:last')      // 最后一个
$('li:eq(2)')     // 索引为2
$('li:odd')       // 奇数索引
$('div:visible')  // 可见元素

可视化图解: DOM 树选择

实践演示

第3章: DOM 操作

3.1 属性与样式

// 属性操作
$('#myDiv').attr('title', '新标题');     // 设置属性
var src = $('img').attr('src');         // 获取属性
$('a').removeAttr('target');           // 移除属性

// 样式操作
$('.box').css('color', 'red');         // 设置单个
$('.box').css({                        // 设置多个
    'color': 'blue',
    'font-size': '20px'
});

// 类操作
$('.item').addClass('active');         // 添加类
$('.item').removeClass('active');      // 移除类
$('.item').toggleClass('active');      // 切换类

3.2 内容操作

// 文本和HTML
$('p').text('新文本');                 // 设置文本
$('div').html('<b>HTML内容</b>');  // 设置HTML
var content = $('p').text();          // 获取文本

// 值操作
$('input').val('新值');               // 设置值
var value = $('input').val();        // 获取值

3.3 节点操作

// 创建和插入
var newDiv = $('<div>新元素</div>');
$('#container').append(newDiv);       // 内部末尾插入
$('#container').prepend(newDiv);      // 内部开头插入
$('#target').before(newDiv);          // 外部前面插入
$('#target').after(newDiv);           // 外部后面插入

// 删除
$('.item').remove();                  // 删除元素
$('.item').empty();                   // 清空内容

实践演示

第4章: 事件处理

4.1 基本事件绑定

// 常用事件
$('#btn').click(function() {
    alert('点击了按钮');
});

$('#input').focus(function() {
    $(this).css('border', '2px solid blue');
});

// on() 方法 - 推荐
$('#btn').on('click', function(e) {
    console.log('事件对象:', e);
});

4.2 事件委托

// 为动态添加的元素绑定事件
$('#list').on('click', 'li', function() {
    $(this).toggleClass('selected');
});

可视化图解: 事件流

实践演示

第5章: 动画系统

5.1 基本动画

// 显示/隐藏
$('.box').hide(1000);        // 1秒隐藏
$('.box').show(500);         // 0.5秒显示
$('.box').toggle();          // 切换

// 淡入淡出
$('.box').fadeIn(1000);      // 淡入
$('.box').fadeOut(500);      // 淡出
$('.box').fadeTo(1000, 0.5); // 淡化到50%透明度

// 滑动
$('.panel').slideDown();     // 下滑显示
$('.panel').slideUp();       // 上滑隐藏
$('.panel').slideToggle();   // 切换

5.2 自定义动画

// animate() 方法
$('.box').animate({
    width: '300px',
    height: '300px',
    opacity: 0.8
}, 1000, function() {
    console.log('动画完成');
});

// 队列机制
$('.box')
    .animate({left: '100px'}, 500)
    .animate({top: '100px'}, 500)
    .animate({left: '0px'}, 500)
    .animate({top: '0px'}, 500);

可视化图解: 动画队列

实践演示

第6章: Ajax 技术

6.1 $.ajax() 方法

$.ajax({
    url: '/api/data',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('成功:', data);
    },
    error: function(xhr, status, error) {
        console.log('错误:', error);
    },
    complete: function() {
        console.log('请求完成');
    }
});

6.2 简写方法

// GET 请求
$.get('/api/users', function(data) {
    console.log(data);
});

// POST 请求
$.post('/api/users', {name: '张三', age: 25}, function(response) {
    console.log('创建成功:', response);
});

// 加载 JSON
$.getJSON('/api/config.json', function(json) {
    console.log('配置:', json);
});

可视化图解: Ajax 请求流程

第7章: 插件开发

7.1 扩展 $.fn

通过扩展 $.fn (即 jQuery.prototype) 来创建插件:

// 创建一个高亮插件
$.fn.highlight = function(options) {
    // 默认配置
    var settings = $.extend({
        color: 'yellow',
        duration: 1000
    }, options);
    
    // 返回this保持链式调用
    return this.each(function() {
        $(this).css('background-color', settings.color)
               .animate({opacity: 0.5}, settings.duration)
               .animate({opacity: 1}, settings.duration);
    });
};

// 使用插件
$('p').highlight({color: 'lightblue', duration: 500});

7.2 最佳实践

• 支持链式调用 (返回 this)
• 提供默认配置和选项合并
• 使用 .each() 处理多个元素
• 避免命名冲突
• 添加详细注释

实践演示

总结与最佳实践

性能优化建议

• 缓存 jQuery 对象: var $elem = $('#myDiv');
• 使用事件委托: 减少事件监听器数量
• 链式调用: $('.box').css('color','red').fadeIn().addClass('active');
• 选择器优化: 优先使用 ID 选择器,避免过于复杂的选择器
• 减少 DOM 操作: 批量更新而非逐个修改

代码规范

• 使用有意义的变量名
• jQuery 对象变量以 $ 开头: $myDiv
• 合理使用注释
• 保持代码简洁可读

学习资源

• 官方文档: https://api.jquery.com
• 在线练习平台
• 社区论坛与问答