<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>写插件的栗子</title> </head> <body> <img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0422/thumb_1_220_318_20150422091710455317.jpg" width="220" height="318" alt="神探驾到"> <img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0401/thumb_1_174_98_20150401051450832875.jpg" alt="" width="220" height="318"> <img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0422/thumb_1_220_318_20150422092027822146.jpg" alt="" width="220" height="318"> </body> </html> <script src="http://js.static.m1905.cn/core/jquery-edge.min.js"></script> <script type="text/javascript"> (function($){ $.fn.changeImgSrc = function(options){ var defaults = { "data":"data-lazysrc", 'border':"1px solid red" }; //extend 是把options 和 defaults合并 取并集，在这config的结果其实就是defaults定义的对象，所以取值的时候可以直接config打点取到data border等自定义属性 // defaults = { // "a" : 1, // "b" : 2 // }; // options = { // "a" : 1, // "b" : 3 // }; // 那么config = { // "a" : 1, // "b" : 3 // } // 以options最后自定义的为主优先级最高，defaults默认的其次 var config = $.extend({}, defaults, options); return this.each(function(){ var lazysrc = $(this).attr(config.data); $(this).attr('src',lazysrc).css("border",config.border); }) } $('img').changeImgSrc({ 'data':"data-lazysrc", 'border':'20px solid yellow' }); })(jQuery); </script>
干前端两年了，第一次自己试着封装小插件，虽然有点迟但是依旧很兴奋！UP