文章目录
- jQuery 插件开发
- 插件概述
- 常用插件
- 文本溢出：dotdotdot.js
- 单行文本省略
- 多行文本省略
- 延迟加载：lazyload.js
- 插件编写
- 方法类插件
- 函数类插件
jQuery 插件开发
插件概述
jQuery插件可以理解成是使用jQuery来封装的一个功能或特效。
一般来说，每一个jQuery插件都是放到独立的一个文件中的。常说的引入一个jQuery插件，其实就是引入一个外部JavaScript文件。
常用插件
文本溢出：dotdotdot.js
dotdotdot.js官方地址为http://plugins.jquery.com/dotdotdot/。
单行文本省略
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width: 200px; border: 1px solid red; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> </head> <body> <div> 这些一些内容。这些一些内容。这些一些内容。这些一些内容。这些一些内容。这些一些内容。 </div> </body> </html>
多行文本省略
如果想要实现“多行文本”的省略号效果，我们可以使用dotdotdot.js这个jQuery插件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width: 200px; height: 50px; border: 1px solid red; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/jquery.dotdotdot.min.js"></script> <script> $(function() { $("div").dotdotdot(); }) </script> </head> <body> <div> 这些一些内容。这些一些内容。这些一些内容。这些一些内容。这些一些内容。这些一些内容。 </div> </body> </html>
延迟加载：lazyload.js
中文文档：http://code.ciaoca.com/jquery/lazyload。
github文档：https://github.com/tuupola/jquery_lazyload。
例如进入某个页面时，页面上会有很多图片，有些图片在下面，当我们没有看完整个页面时，那么下面的图片对我们来说就是“没用”的，加载了也是白加载，而且还会降低页面整体的加载速度。
在jQuery中，我们可以使用lazyload.js这个插件来实现图片的延迟加载。也就是只有当我们把滚动条拉到某个位置，相应处的图片才会显示出来，否则就不会显示。
步骤
- 引入jQuery库和lazyload.js插件。
- 使用data-original替代src。
- 调用lazyload()方法。
使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { height: 800px; background-color: grey; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/jquery.lazyload.min.js"></script> <script> $(function() { $("img").lazyload(function() { effect: "fadeIn" }); }) </script> </head> <body> <div></div> <img data-original="img/a.png"> <img data-original="img/b.png"> <img data-original="img/c.png"> <img data-original="img/d.png"> <img data-original="img/e.png"> </body> </html>
插件编写
方法类插件
语法
(function($){ $.fn.extend({ "插件名": function(参数){ …… } }); })(jQuery);
简单使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> (function() { $.fn.extend({ "hoverChangeColor": function(fgColor, bgColor) { $(this).mouseover(function() { $(this).css({ "color": fgColor, "background-color": bgColor }); }) .mouseout(function() { $(this).css({ "color": "black", "background-color": "white" }); }); return $(this); } }) })(jQuery); </script> <script> $(function() { $("h3").hoverChangeColor("red", "#010101"); }) </script> </head> <body> <h3>hello world!</h3> </body> </html>
添加默认值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> (function() { $.fn.extend({ "hoverChangeColor": function(options) { var defautls = { fgColor: "hotpink", bgColor: "lightskyblue" }; var options = $.extend(defautls, options) $(this).mouseover(function() { $(this).css({ "color": options.fgColor, "background-color": options.bgColor }); }) .mouseout(function() { $(this).css({ "color": "black", "background-color": "white" }); }); return $(this); } }) })(jQuery); </script> <script> $(function() { $("h3").hoverChangeColor(); }) </script> </head> <body> <h3>hello world!</h3> </body> </html>
$.extend(defautls, options)合并2个对象，将右边的对象合并到左边的对象上。
函数类插件
语法
(function($){ $.extend({ "插件名": function(){ …… } }); })(jQuery)
使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> (function($) { $.extend({ "maxNum": function(m, n) { return (m > n) ? m : n; } }); })(jQuery) $(function() { var result = $.maxNum(10, 5) console.log("最大值是：" + result); }) </script> </head> <body> </body> </html>
