jQuery插件：jQuery不可能包含所有的功能，那么就可以通过插件扩展jQuery的功能，jQuery有丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

使用jQuery插件的步骤：

第一步：引入jQuery文件；

第二步：引入插件文件（如果有用到css的话，需要引入css文件）；

第三步：使用插件。

常用的jQuery插件：

1、jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body>
<div class="box"></div><!--1、引入jquery的js文件-->
<script src="jquery/jquery-3.3.1.js"></script>
<!--2、引入插件的js文件-->
<script src="jquery/jquery.color.js"></script>
<script>$(document).ready(function(){//3、直接使用即可$(".box").animate({backgroundColor:"#64FF48",width:"400px",height:"400px"},3000,function(){alert("改变了样式");});});
</script>
</body>
</html>

注意：jQuery不支持颜色的渐变，有的颜色的单词，jQuery不识别，例如pink，所以颜色最好用16进制。

2、jquery.lazyload.js

懒加载插件官网下载地址：http://plugins.jquery.com/lazyload/

详细介绍：jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

懒加载插件可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置.。

使用jquery.lazyload.js延迟加载图片，必须改变图片的标签。图像的地址必须放在data-original属性上。即：img标签的src属性改为data-original属性。

可给懒加载图像一个特定的class（例如:lazy）。这样就可以很容易地进行图像插件捆绑。

<img class="lazy" data-original="images/1.jpg" alt=""/>

方法使用：

    $(document).ready(function(){$(".lazy").lazyload();});

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{height: 2000px;}.lazy{width: 200px;height: 200px;}</style>
</head>
<body>
<div class="box"></div>
<img class="lazy" data-original="images/1.jpg" alt=""/>
<img class="lazy" data-original="images/2.jpg" alt=""/>
<img class="lazy" data-original="images/1.jpg" alt=""/>
<img class="lazy" data-original="images/2.jpg" alt=""/>
<img class="lazy" data-original="images/1.jpg" alt=""/>
<img class="lazy" data-original="images/2.jpg" alt=""/>
<img class="lazy" data-original="images/1.jpg" alt=""/>
<img class="lazy" data-original="images/2.jpg" alt=""/><script src="jquery/jquery-3.3.1.js"></script>
<script src="jquery/jquery.lazyload.js"></script>
<script>$(document).ready(function(){$(".lazy").lazyload();});
</script>
</body>
</html>

让所有class="lazy"的图像延迟加载。

使用了data-original就不要写src了，要不然没有效果

在没有完全获取到图片的资源前，是得不到图片的宽高的，所以预先设置宽高，让它提前有个占位

3、jquery.ui.js

使用方法：

第一步：引入jQueryUI的样式文件

第二步：引入jQuery

第三步：引入jQueryUI的js文件

第四步：使用jQueryUI功能

制作jQuery插件

原理：jQuery插件的实质，其实就是给jQuery原型对象增加一个新的方法，让jQuery对象拥有某一个功能。

通常通过给$.fn添加方法就能够扩展jQuery对象。

$是jQuery的简写，fn是prototype的简写。

$.fn就相当于jQuery.prototype

语法：$.fn.方法名 = function(){};

第一步：创建一个js文件，文件名：jquery.插件名.js ；注意不要与jQuery官网现有插件重名。

例如：命名 jquery.myColor.js 作用：改变背景颜色

第二步：书写代码，给jQuery原型对象添加一个与插件名相同的方法。

$.fn.myColor = function(color){//this指当前操作这个方法的jQuery对象this.css("background-color",color);//为了实现链式编程return this;
};

第三步：验证插件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 200px;height: 200px;background-color: #ff151a;}</style>
</head>
<body>
<div class="box"></div><!--引入jQuery文件-->
<script src="jquery/jquery-3.3.1.js"></script>
<!--引入自己制作的插件文件-->
<script src="jquery/jquery.myColor.js"></script>
<!--验证插件作用-->
<script>$(document).ready(function(){$(".box").myColor("#64FF2D").width("400px");});
</script>
</body>
</html>

验证结果：可以改变元素背景颜色。

这样一个简单的jQuery插件就制作完成了

jQuery插件的简单使用及制作相关推荐

JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传
异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFile ...
jQuery插件之——简单日历
最近在研究js插件的开发,以前看大神们,对插件都是信手拈来,随便玩弄,感觉自己要是达到那种水平就好了,就开始自己研究插件开发了.研究了一段时间之后,就开始写了自己的第一个日历插件,由于是初学插件开发, ...
使用jQuery插件实现简单购物
1.完成如下的购物车功能.使用折叠面板来展示产品的目录结构,使用拖拽和放置操作来添加产品到购物车,购物车中的产品是课排序的. <!doctype html> <html lang=& ...
推荐60个jQuery插件及使用教程
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
jquery插件制作
jquery插件丰富,很多都是很好用的,最近学习了一下如何制作jquery插件,发现jquery插件制作其实很简单,这里介绍一下. jquery插件的基本格式: (function($){$.fn.t ...
html制作表格保存为txt文件,可将HTML表格导出为Excel|csv|txt文件的jQuery插件
TableExport是一款可以将HTML表格导出为Excel xlsx格式.xls格式,以及csv和txt文件的jQuery插件.TableExport插件使用简单,默认使用Bootstrap的CS ...
推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zoomfiy.css 或 min 前后顺序 ...
Jquery插件入门之Validate插件的简单使用
目录一.jQuery插件 1.jQuery插件概述 2.Validate插件一.jQuery插件 1.jQuery插件概述 jQuery插件机制概述 jQuery插件的机制很简单,就是利用jQue ...
JQuery插件制作具有动态效果的网页
JQuery插件制作具有动态效果的网页前言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和 ...
JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友
JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03 我来说两句收藏我要投稿引入下方的jquery.rotate.js文件,然后通过 ...

jQuery插件的简单使用及制作