2025最新jQuery完全指南：从入门到实战开发手册

原创于 2025-04-25 12:52:01 发布 · 734 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

一、认识jQuery

1.1 什么是jQuery？

轻量级JS库 (v3.6.0压缩版仅30KB)
简化DOM操作：$()选择器统一各种浏览器API
链式编程：$().show().addClass().animate()
丰富插件生态：超过5,000个官方认证插件

1.2 为什么选择jQuery？

// 原生JS vs jQuery
document.querySelectorAll('.item');  // 原生
$('.item');                         // jQuery

// 事件处理对比
element.addEventListener('click', handler);  // 原生
$('#btn').click(handler);                   // jQuery

二、环境搭建

2.1 两种引入方式

<!-- 本地文件 -->
<script src="js/jquery-3.6.0.min.js"></script>

<!-- CDN加速 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2.2 版本选择指南

版本	特点	适用场景
1.x	兼容IE6-8	旧系统维护
2.x	移除IE6-8支持	现代浏览器项目
3.x	最新特性	新项目首选

三、核心概念

3.1 选择器大全

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

// 组合选择器
$('ul li:first-child')    // 第一个子元素
$('tr:even')              // 偶数行
$('div:contains("Hello")')// 内容包含

3.2 链式编程

$('#box')
  .css('color', 'red')
  .slideUp(300)
  .delay(800)
  .slideDown(400);

3.3 文档就绪事件

$(document).ready(function(){
  // DOM加载完成后执行
});

// 简写形式
$(function(){
  // 初始化代码
});

四、DOM操作

4.1 内容操作

// 获取/设置文本
let text = $('#elem').text();
$('#elem').text('New Text');

// 获取/设置HTML 
let html = $('#container').html();
$('#container').html('<b>Bold Text</b>');

4.2 元素操作

// 创建元素
let newDiv = $('<div class="box">New Element</div>');

// 插入元素
$('#parent').append(newDiv);   // 内部末尾
$('#ref').before(newDiv);      // 元素前面

// 删除元素
$('.temp').remove();  // 完全删除
$('#list').empty();   // 清空内容

五、事件处理

5.1 基础事件

$('#btn').click(function(){
  console.log('按钮被点击');
});

// 常用事件类型
.mouseenter()   // 鼠标进入
.keyup()        // 键盘抬起
.submit()       // 表单提交

5.2 事件委托

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

六、动画效果

6.1 内置动画

// 显示隐藏动画
$('#box').hide(1000);          // 隐藏
$('#box').show('fast');        // 显示
$('#box').toggle(500);         // 切换

// 滑动效果
$('#panel').slideUp();         // 上滑收起
$('#menu').slideDown(300);     // 下滑展开

6.2 自定义动画

$('#object').animate({
  left: '250px',
  opacity: 0.5,
  height: 'toggle'
}, 1500, 'swing', function(){
  alert('动画完成!');
});

七、AJAX交互

7.1 基础请求

// GET请求
$.get('api/data', {page: 2}, function(res){
  console.log('收到数据:', res);
});

// POST请求
$.post('api/save', $('#form').serialize(), function(res){
  alert(res.message);
});

7.2 完整AJAX

$.ajax({
  url: 'api/user',
  type: 'PUT',
  dataType: 'json',
  data: {id: 123},
  success: function(data) {
    console.log('更新成功:', data);
  },
  error: function(xhr) {
    console.error('请求失败:', xhr.statusText);
  }
});

八、插件开发

8.1 创建插件

(function($){
  $.fn.highlight = function(options) {
    const settings = $.extend({
      color: '#ff0',
      duration: 1000
    }, options);

    return this.each(function(){
      $(this)
        .css('background', settings.color)
        .fadeOut(settings.duration)
        .fadeIn(settings.duration);
    });
  };
})(jQuery);

// 使用插件
$('p').highlight({color: '#f00'});

九、最佳实践

缓存选择器：避免重复查询DOM

// 错误写法
for(let i=0; i<100; i++){
  $('.item').css(...);
}

// 正确写法
const $items = $('.item');
for(let i=0; i<100; i++){
  $items.css(...);
}

事件命名空间：方便管理

$('#btn').on('click.myNamespace', handler);
// 移除特定事件
$('#btn').off('click.myNamespace');

十、总结与展望

适用场景：

快速开发中小型项目
需要兼容旧版浏览器
DOM操作密集型应用

现代替代方案：

Vue/React：复杂单页应用
Axios：专业HTTP请求
Lodash：实用函数库

附录：官方资源