jQuery 基础

jQuery 是一个轻量级、跨浏览器的 JavaScript 库，其核心理念是 “Write less, do more”。它封装了 DOM 操作、事件处理、动画和 Ajax，极大简化了原生 JS 的繁琐写法。官方文档：jquery.cuishifeng.cn

引入与版本

版本	说明
1.x	兼容 IE6/7/8，最终版本 1.12.4，功能不再更新
2.x	不兼容 IE6/7/8，最终版本 2.2.4，较少使用
3.x	主力维护版本，不兼容 IE6/7/8，注意部分旧插件不支持 3.x

<!-- CDN 引入（推荐，生产环境换成 min.js） -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery 对象 vs DOM 对象

jQuery 对象是对 DOM 对象的包装，两者的方法不可混用。约定以 $ 前缀区分：

var $div = $('#i1');          // jQuery 对象
var div  = document.getElementById('i1');  // DOM 对象

$div.html();                  // jQuery 方法
div.innerHTML;                // DOM 属性

$div[0];                      // jQuery 对象转 DOM 对象
$(div);                       // DOM 对象转 jQuery 对象

基础调用语法：

$(selector).action()

查找标签

基本选择器

$('#myId')            // ID 选择器
$('p')                // 标签选择器
$('.myClass')         // class 选择器
$('#myId, .myClass, p')  // 组合选择器
$('div.c1')           // 有 c1 class 的 div
$('*')                // 通用选择器（匹配所有元素）

层级选择器

$('x y')     // x 的所有后代 y（子子孙孙）
$('x > y')   // x 的直接子元素 y
$('x + y')   // 紧接在 x 后面的 y
$('x ~ y')   // x 之后所有同级的 y

筛选选择器

$('li:first')      // 第一个 li
$('li:last')       // 最后一个 li
$('li:eq(2)')      // 索引为 2 的 li（从 0 计）
$('li:even')       // 索引为偶数的 li
$('li:odd')        // 索引为奇数的 li
$('li:gt(2)')      // 索引大于 2 的 li
$('li:not(.c1)')   // 没有 c1 class 的 li
$('div:has(h1)')   // 后代中含 h1 的 div

属性选择器

$('[type]')                   // 含 type 属性
$('[type="checkbox"]')        // type 属性值为 checkbox
$('input[type!="text"]')      // type 不是 text 的 input

表单选择器

$(':text')        // type="text" 的 input
$(':checkbox')    // type="checkbox" 的 input
$(':radio')       // type="radio" 的 input
$(':checked')     // 被选中的 checkbox/radio
$(':selected')    // 被选中的 option
$(':disabled')    // 禁用的表单元素

筛选器方法

$('#id').next()              // 下一个兄弟元素
$('#id').nextAll()           // 后面所有兄弟元素
$('#id').nextUntil('#i2')    // 后面兄弟直到 #i2

$('#id').prev()              // 上一个兄弟元素
$('#id').prevAll()
$('#id').prevUntil('#i2')

$('#id').parent()            // 直接父元素
$('#id').parents()           // 所有祖先元素
$('#id').parentsUntil('.box')

$('#id').children()          // 所有直接子元素
$('#id').siblings()          // 所有兄弟元素
$('div').find('p')           // 后代中的 p（等同于 $('div p')）
$('div').filter('.c1')       // 从结果集中过滤出有 c1 class 的（等同于 $('div.c1')）

$('li').first()              // 第一个
$('li').last()               // 最后一个
$('li').eq(2)                // 索引为 2 的元素

案例：自定义模态框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义模态框</title>
  <style>
    .cover {
      position: fixed; left: 0; right: 0; top: 0; bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 999;
    }
    .modal {
      width: 600px; height: 400px;
      background-color: white;
      position: fixed; left: 50%; top: 50%;
      margin-left: -300px; margin-top: -200px;
      z-index: 1000;
    }
    .hide { display: none; }
  </style>
</head>
<body>
<input type="button" value="弹" id="i0">
<div class="cover hide"></div>
<div class="modal hide">
  <label for="i1">姓名</label><input id="i1" type="text">
  <label for="i2">爱好</label><input id="i2" type="text">
  <input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $('#i0').click(function() {
    $('.cover, .modal').removeClass('hide');
  });
  $('#i3').click(function() {
    $('.cover, .modal').addClass('hide');
  });
</script>
</body>
</html>

案例：侧边栏菜单（链式操作）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>侧边菜单</title>
  <style>
    .left { position: fixed; left: 0; top: 0; width: 20%; height: 100%;
            background-color: rgb(47, 53, 61); }
    .menu { color: white; }
    .title { text-align: center; padding: 10px 15px;
             border-bottom: 1px solid #23282e; }
    .items { background-color: #181c20; }
    .item  { padding: 5px 10px; border-bottom: 1px solid #23282e; }
    .hide  { display: none; }
  </style>
</head>
<body>
<div class="left">
  <div class="menu">
    <div class="item">
      <div class="title">菜单一</div>
      <div class="items"><div class="item">111</div><div class="item">222</div></div>
    </div>
    <div class="item">
      <div class="title">菜单二</div>
      <div class="items hide"><div class="item">111</div><div class="item">222</div></div>
    </div>
  </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  // 链式操作：展开当前，折叠其他
  $('.title').click(function() {
    $(this).next().removeClass('hide')
           .parent().siblings().find('.items').addClass('hide');
  });
</script>
</body>
</html>

操作标签

样式操作

$('p').addClass('active');
$('p').removeClass('active');
$('p').hasClass('active');     // 返回 true/false
$('p').toggleClass('active');  // 有则删，无则加

// 直接设置 CSS
$('p').css('color', 'red');
$('p').css({ color: 'red', fontSize: '16px' });

位置操作

$(el).offset()       // 相对文档的偏移 { top, left }
$(el).position()     // 相对定位父元素的偏移
$(el).scrollTop()    // 滚动条距顶端的距离
$(el).scrollLeft()   // 滚动条距左端的距离

尺寸操作

$(el).height()       // 内容高度
$(el).width()
$(el).innerHeight()  // 含 padding
$(el).innerWidth()
$(el).outerHeight()  // 含 padding + border（传 true 则含 margin）
$(el).outerWidth()

文本操作

$('#d1').html()          // 获取 HTML 内容（含子标签）
$('#d1').html('<p>hi</p>')   // 设置 HTML 内容

$('#d1').text()          // 获取纯文本（去掉 HTML 标签）
$('#d1').text('hello')   // 设置纯文本

$('input').val()         // 获取表单值
$('input').val('new')    // 设置表单值

// 设置多选 checkbox/select 的值
$('[name="hobby"]').val(['basketball', 'football']);
$('#s1').val(['1', '2']);

属性操作

attr() ：操作 HTML 属性（id、class、src、自定义属性等）
prop() ：操作 DOM 属性（布尔类型，如 checked、selected、disabled）

$('#d1').attr('data-id');           // 获取属性
$('#d1').attr('data-id', '100');    // 设置属性
$('#d1').removeAttr('data-id');     // 删除属性

// checkbox/radio 必须用 prop（attr 在旧版本有 bug）
$(':checkbox[value="1"]').prop('checked', true);
$(':radio[value="2"]').prop('checked', true);

文档操作（DOM 增删）

$(A).append(B)       // 把 B 追加到 A 内部末尾
$(A).appendTo(B)     // 把 A 追加到 B 内部末尾
$(A).prepend(B)      // 把 B 前置到 A 内部开头
$(A).after(B)        // 把 B 插入到 A 外部后面
$(A).before(B)       // 把 B 插入到 A 外部前面

$(el).remove()       // 删除元素（含事件绑定）
$(el).empty()        // 清空子节点（保留元素本身）

$(A).replaceWith(B)  // 用 B 替换 A
$(A).clone()         // 克隆（不克隆绑定的事件）

案例：表单验证

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单验证</title>
  <style>.error { color: red; }</style>
</head>
<body>
<form>
  <div>
    <label>用户名</label>
    <input type="text" id="name" name="name">
    <span class="error"></span>
  </div>
  <div>
    <label>密码</label>
    <input type="password" id="pwd" name="password">
    <span class="error"></span>
  </div>
  <input type="button" id="btn" value="提交">
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $('#btn').click(function() {
    if ($('#name').val().length === 0) {
      $('#name').siblings('.error').text('用户名不能为空');
    }
    if ($('#pwd').val().length === 0) {
      $('#pwd').siblings('.error').text('密码不能为空');
    }
  });
</script>
</body>
</html>

事件

常用事件

$(el).click(function() { ... })
$(el).dblclick(function() { ... })
$(el).hover(function() { ... })      // mouseenter + mouseleave
$(el).blur(function() { ... })
$(el).focus(function() { ... })
$(el).change(function() { ... })
$(el).keyup(function() { ... })
$(el).keydown(function() { ... })
$(el).input(function() { ... })

事件绑定与解绑（推荐用 `.on()`）

// 绑定
$(el).on('click', function() { ... })

// 事件委托：将事件绑定到父元素，让子元素触发
$('table').on('click', '.delete', function() {
  // 删除逻辑（适用于动态生成的子元素）
})

// 解绑
$(el).off('click')
$(el).off('click', specificHandler)

阻止冒泡与默认行为

$(el).click(function(e) {
  e.stopPropagation();   // 阻止事件冒泡
  e.preventDefault();    // 阻止默认行为（如表单提交）
  // 也可以 return false; 同时阻止两者
})

hover 是 jQuery 定义的事件，不能用 .on('hover', ...) 绑定，需分拆为 mouseenter / mouseleave：

$('ul').on('mouseenter', 'li', function() { $(this).addClass('hover'); });
$('ul').on('mouseleave', 'li', function() { $(this).removeClass('hover'); });

页面载入

// 写法一
$(document).ready(function() {
  // DOM 就绪即可执行，无需等待图片加载
});

// 写法二（推荐，简写形式）
$(function() {
  // 你的代码
});

jQuery 的入口函数没有覆盖现象（多次调用都生效），且在 DOM 就绪后立即执行，不等图片加载完成。这两点均优于 window.onload。

动画效果

// 显示/隐藏（可指定速度 ms 或 'fast'/'slow'）
$(el).show(400)
$(el).hide(400)
$(el).toggle(400)

// 滑动
$(el).slideDown(400)   // 向下展开
$(el).slideUp(400)     // 向上收起
$(el).slideToggle(400)

// 淡入/淡出
$(el).fadeIn(400)
$(el).fadeOut(400)
$(el).fadeTo(400, 0.5)   // 淡到指定透明度
$(el).fadeToggle(400)

// 自定义动画
$(el).animate({ opacity: 0, top: '-50px' }, 600)

案例：点赞动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>点赞动画</title>
  <style>
    div { position: relative; display: inline-block; }
    div > i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px; top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>
<div id="d1">点赞</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $('#d1').on('click', function() {
    var newI = $('<i>+1</i>');
    $(this).append(newI);
    newI.animate({ opacity: 0 }, 1000);
  });
</script>
</body>
</html>

工具方法

$.each() 遍历

// 遍历数组
var list = [10, 20, 30, 40];
$.each(list, function(index, value) {
  console.log(index, value);
});

// 遍历 jQuery 对象（常见写法）
$('li').each(function(index, el) {
  $(this).addClass('c1');
});

// 注意：对所有 li 批量操作不需要 each，直接：
$('li').addClass('c1');

// 提前退出 each 循环
$('li').each(function() {
  if ($(this).text() === 'stop') return false;
});

$.data() 数据存储

// 在元素上存储数据（不影响 HTML 属性）
$('div').data('key', 100);

// 读取数据
$('div').data('key');          // 100

// 移除数据
$('div').removeData('key');    // 移除 key
$('div').removeData();         // 移除所有

最后更新于 2026-06-05

BOM 与 DOM Bootstrap 基础