【jQuery教程】第14节：jQuery 插件介绍与使用（jQuery UI、Bootstrap 插件、DataTables 等）

最新推荐文章于 2025-08-09 13:00:00 发布

原创最新推荐文章于 2025-08-09 13:00:00 发布 · 992 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ui #bootstrap #javascript #前端 #教程 #开发语言

前端教程同时被 2 个专栏收录

68 篇文章

订阅专栏

jQuery教程与最佳实践

21 篇文章

订阅专栏

第14节：jQuery 插件介绍与使用（jQuery UI、Bootstrap 插件、DataTables 等）

📘 引言

在实际的前端开发中，为了提高开发效率和代码质量，我们经常需要使用各种功能丰富的插件。jQuery 生态系统拥有大量优秀的插件，可以帮助我们快速实现复杂的交互效果和功能模块。本节课老曹将介绍几个常用的 jQuery 插件，包括 jQuery UI、Bootstrap jQuery 插件以及 DataTables 等，帮助你快速构建功能丰富的 Web 应用。

✅ 课程目标

目标项	内容
知识目标	了解常用 jQuery 插件的功能和特点、掌握插件的基本使用方法
能力目标	能够根据项目需求选择合适的插件、正确集成和使用插件
情感目标	认识插件在提高开发效率方面的重要作用，培养合理使用第三方库的意识

📌 一、jQuery 插件概述

✅1. 什么是 jQuery 插件？

jQuery 插件是基于 jQuery 库开发的可重用代码模块，扩展了 jQuery 的功能，提供了特定的 UI 组件或功能特性。

✅2. 插件的优势

提高开发效率：避免重复造轮子
功能丰富：提供复杂交互和视觉效果
兼容性好：基于 jQuery，兼容各种浏览器
社区支持：丰富的文档和社区资源

✅3. 插件的分类

UI 组件类：对话框、日期选择器、滑块等
数据展示类：表格、图表、数据可视化
交互增强类：拖拽、排序、动画效果
表单处理类：验证、美化、增强功能

🧩 二、jQuery UI 插件详解

✅1. jQuery UI 简介

jQuery UI 是 jQuery 官方推出的 UI 组件库，提供了一套完整的用户界面交互、效果和主题。

✅2. 常用组件介绍

对话框 (Dialog)

<div id="dialog" title="基本信息">
  <p>这是一个对话框示例</p>
</div>

<script>
$(document).ready(function() {
  $('#dialog').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "确定": function() {
        $(this).dialog("close");
      },
      "取消": function() {
        $(this).dialog("close");
      }
    }
  });
  
  // 打开对话框
  $('#open-dialog').click(function() {
    $('#dialog').dialog('open');
  });
});
</script>

日期选择器 (Datepicker)

<input type="text" id="datepicker" placeholder="选择日期">

<script>
$(document).ready(function() {
  $('#datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    showButtonPanel: true,
    changeMonth: true,
    changeYear: true
  });
});
</script>

可拖拽 (Draggable) 和可排序 (Sortable)

<div id="draggable" class="ui-widget-content">
  <p>拖拽我</p>
</div>

<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>项目 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>项目 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>项目 3</li>
</ul>

<script>
$(document).ready(function() {
  // 拖拽功能
  $('#draggable').draggable();
  
  // 排序功能
  $('#sortable').sortable({
    placeholder: "ui-state-highlight"
  });
  $('#sortable').disableSelection();
});
</script>

🎨 三、Bootstrap jQuery 插件

✅1. Bootstrap 简介

Bootstrap 是最受欢迎的前端框架之一，提供了丰富的 CSS 样式和基于 jQuery 的 JavaScript 插件。

✅2. 常用插件介绍

模态框 (Modal)

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>模态框内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

提示工具 (Tooltip)

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="这是提示信息">
  悬停显示提示
</button>

<script>
$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
</script>

下拉菜单 (Dropdown)

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
    下拉菜单
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">选项 1</a>
    <a class="dropdown-item" href="#">选项 2</a>
    <a class="dropdown-item" href="#">选项 3</a>
  </div>
</div>

📊 四、DataTables 插件

✅1. DataTables 简介

DataTables 是一个功能强大的表格插件，提供了排序、分页、搜索、主题等丰富的功能。

✅2. 基本使用

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>姓名</th>
      <th>职位</th>
      <th>办公室</th>
      <th>年龄</th>
      <th>入职日期</th>
      <th>薪资</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>系统架构师</td>
      <td>北京</td>
      <td>28</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <!-- 更多数据... -->
  </tbody>
</table>

<script>
$(document).ready(function() {
  $('#example').DataTable({
    "language": {
      "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Chinese.json"
    },
    "pageLength": 10,
    "ordering": true,
    "searching": true
  });
});
</script>

✅3. 高级功能

// AJAX 数据源
$('#example').DataTable({
  "ajax": 'data.json',
  "columns": [
    { "data": "name" },
    { "data": "position" },
    { "data": "office" },
    { "data": "age" },
    { "data": "start_date" },
    { "data": "salary" }
  ],
  "language": {
    "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Chinese.json"
  }
});

// 自定义列渲染
$('#example').DataTable({
  "columnDefs": [
    {
      "targets": 5,
      "render": function(data, type, row) {
        return '$' + parseFloat(data).toLocaleString();
      }
    }
  ]
});

🎯 五、其他常用插件推荐

✅1. 表单验证插件 (jQuery Validation)

$('#myForm').validate({
  rules: {
    username: {
      required: true,
      minlength: 2
    },
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    username: {
      required: "请输入用户名",
      minlength: "用户名至少需要2个字符"
    },
    email: {
      required: "请输入邮箱地址",
      email: "请输入有效的邮箱地址"
    }
  }
});

✅2. 轮播图插件 (Owl Carousel)

<div class="owl-carousel">
  <div class="item"><img src="image1.jpg" alt="图片1"></div>
  <div class="item"><img src="image2.jpg" alt="图片2"></div>
  <div class="item"><img src="image3.jpg" alt="图片3"></div>
</div>

<script>
$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
});
</script>