<!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="" height="" 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="" height="">

    <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="" height="">

</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

jquery插件封装思路整理的更多相关文章

  1. jquery插件封装

    HTML <!DOCTYPE html> <html> <head> <title></title> <style> .page ...

  2. 最简单的原生js和jquery插件封装

    最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成  $.extend 方法,其他都一样. 总结一下实现原理: 将 ...

  3. 【jQuery】jquery插件封装

    扩展jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn ...

  4. jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件

    完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...

  5. jquery插件封装成seajs模块

    jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...

  6. jQuery插件封装系列（一）—— 金额录入框

    基于jQuery原型封装数值录入框,禁止录入.粘贴非数值字符 (function ($) { // 数值输入框 $.fn.numbox = function (options) { var type ...

  7. (jQuery 插件)封装容器的表单为json对象

    下面代码可以把一个页面容器中的表单元素封装成一个json对象. (function($){ $.fn.serializeObject=function(){ var inputs=$(this).fi ...

  8. jQuery 插件封装的方法

    方式1.$.fn.xxx ==>针对元素添加方法: ;(function ($) { $.fn.m​​yPlugin = function () { //你自己的插件代码 }; })(jQuer ...

  9. jquery 插件封装模板

    //插件编写模板 ;(function ($) { $.fn.plugIn = function ( opt ) { var def = { //这里填写自定义的参数例如: event : 'clic ...

随机推荐

  1. nginx静态资源分离部署

    修改nginx.conf文件,用于nginx处理静态资源. 主要配置如下(在server配置中加入location配置即可): server { listen 80; server_name 123. ...

  2. 对Delphi控件作用的新理解（控件本身的源代码就是一个很强的工业级源码）

    最近几天,对Delphi控件的含义有了一个新的理解.其实它不仅仅是给程序员提供功能的一个表层调用,控件本身的源代码就是一个很强的工业级源码.而且它的Main例子,往往就已经是半成品.而别的语言里没有那 ...

  3. Trainning Guide, Data Structures, Example

    最近在复习数据结构,发现这套题不错,题目质量好,覆盖广,Data Structures部分包括Example,以及简单,中等,难三个部分,这几天把Example的做完了, 摘要如下: 通过这几题让我复 ...

  4. P90、面试题11：数值的整数次方

    题目:实现函数double Power(double base, int exponent),求base的exponent次方.不得使用库函数,同时不需要考虑大数问题. 需要注意的地方: 1)输入的指 ...

  5. 概率图模型之有向图与无向图之间的关系 I map D map perfect map（完美图） 概念

    我们已经讨论了有向图和无向图框架下的概率模型,那么我们有必要讨论一下它们二者的关系.

  6. UVA 10041 Vito's Family (中位数)

      Problem C: Vito's family  Background The world-known gangster Vito Deadstone is moving to New York ...

  7. haproxy 规则匹配到了就停止,不会继续匹配下一个

    acl url_web_wwm path_beg -i /scan use_backend zjtest7_com if url_web_wwm acl url_static path_end .ht ...

  8. VS2005下开发PPC2003和WM50编译器一些设置

    1.vs2005开发WM5时,编译器和linker的选项配合问题 链接:http://www.mivi.name/blog/index_en.php?itemid=258 首先说ARM4 ARM4T ...

  9. string.Join和string.Concat的区别

    源自Difference between String.Join() vs String.Concat() With .NET 4.0, String.Join() uses StringBuilde ...

  10. 深入理解memcached

    网上有5篇介绍memcached的文章,写的挺好,这里转过来. memcached完全剖析–1. memcached的基础 memcached全面剖析–2.理解memcached的内存存储 memca ...