jQuery插件有哪些，怎么用？（附带实例）

第三方 jQuery 插件是一种用来提高 Web 网站开发效率、已经封装好的 JavaScript 脚本库，由于 jQuery 的开源特性，现在有很多第三方 jQuery 插件可供开发人员直接使用。

第三方 jQuery 插件的主要特点如下：

提高 Web 网站的开发效率；
高度集成、方便使用；
根据自身需求进行修改，增强可扩展性；
界面美观。

现在市面上的第三方 jQuery 插件有很多，我们可能在逛论坛或者技术网站时经常看到“××个最值得收藏的jQuery插件”、“强力推荐××个jQuery插件”、“最实用的jQuery插件下载”等帖子。这些帖子中不仅包含了很多第三方 jQuery 插件，还会提供简单的使用示例。

下表中列出了一些笔者常用的第三方 jQuery 插件：

表：常用的 jQuery 插件
插件	说明
uploadify	带进度条的文件上传插件
zTree	树菜单插件
Nivo Slider	网页中的图片切换插件
Pagination	对网页中的数据进行分页显示插件
Bootstrap Star Rating	星星评分插件
EasyZoom	图片缩放插件
lazyload	图片延迟加载插件
NotesForLightBox	图片灯箱插件
jCarousel	图片幻灯片显示插件
Password-Strength	密码强度检测插件
ColorPicker	颜色拾取器插件
jQZoom	图片放大镜插件

表中列出的是一些笔者常用的第三方 jQuery 插件，当然还有很多其他提高 Web 网站开发效率的第三方 jQuery 插件，读者可以在各大论坛或者技术网站上搜索。

调用第三方jQuery插件

调用第三方 jQuery 插件的步骤如下：

1) 第三方 jQuery 插件是基于 jQuery 开发的，因此在调用时，首先需要添加相应版本的 jQuery 库。

例如，添加版本 3.6.4 的 jQuery 库，首先将版本 3.6.4 的 jQuery 库 jquery-3.6.4.min.js 复制到网页文件夹中，然后在 HTML 网页中编写如下代码：

<script type="text/javascript" src="jquery-3.6.4.min.js"></script>

2) 最后添加要使用的第三方 jQuery 插件的 JavaScript 脚本文件及 CSS 样式文件。

例如，添加 uploadify 插件的 JavaScript 脚本文件及 CSS 样式文件，首先将 uploadify 插件的 JavaScript 脚本文件及 CSS 样式文件复制到网页文件夹中，然后在 HTML 网页中编写如下代码：

<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/jquery.uploadify.v2.0.2.min.js"></script>

3) 完成以上步骤后，即可通过定义 JavaScript 函数使用第三方 jQuery 插件。例如，在网页中初始化 uploadify 插件，并设置其属性，代码如下：

<script type="text/javascript">
$(document).ready(function() {
    $("#uploadify").uploadify({
        'uploader': 'scripts/uploadify.swf', // 上传所需的Flash文件
        'script': 'scripts/upload.ashx',     // 后台处理文件
        'folder': '/uploads',                // 上传文件夹
        'queueSizeLimit': 4,                 // 限制每次选择上传文件的个数
        'sizeLimit': 6291456,                // 上传文件大小限制的最大值
        'fileDesc': '图片文件',               // 文件类型的描述信息
        'fileExt': '*.jpg;*.png;*.bmp;*.gif' // 设置文件类型
    });
});
</script>

jQuery插件有哪些，怎么用？（附带实例）

调用第三方jQuery插件

相关文章