菜鸟教程
教程 jquery tutorial

使用第三方插件

jQuery 拥有庞大的插件生态，能够快速扩展功能，满足不同开发需求。正确引入和使用插件是关键。

引入插件方式

1. 通过 CDN 引入

在 HTML 中引入 jQuery 后，添加插件的 CDN 脚本：

html 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui/1.13.2/jquery-ui.min.js"></script>

2. 本地引入

下载插件文件，放入项目目录，再通过 <script> 标签引入。

使用示例：jQuery UI 的日期选择器

html 
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

<script>
  $(function () {
    $("#datepicker").datepicker();
  });
</script>

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

注意事项

  • 插件必须在 jQuery 之后加载。
  • 不同插件可能依赖不同版本的 jQuery，需确认兼容性。
  • 阅读插件文档，了解配置和方法。
  • 避免多个版本 jQuery 冲突。

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css"
/>
<script>
  $(function () {
    $("#datepicker").datepicker();
  });
</script>
<div style="height: 300px">
  <input type="text" id="datepicker" placeholder="选择日期" />
</div>

相关内容