<!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. [itint5]树中最大路径和

    http://www.itint5.com/oj/#13 要注意,一是空路径也可以,所以最小是0.然后要时刻注意路径顶多有两条子路径+根节点组成,所以更新全局最值时和返回上一级的值要注意分清. #in ...

  2. __init和__exit宏的作用

    原文地址:http://blog.csdn.net/zhenwenxian/article/details/8564574 内核的部分函数带有__init和__exit宏,负责“初始化”和“清理收尾” ...

  3. cache设计，以及多核造成的不一致性以及解决方案

    http://www.360doc.com/content/11/1013/00/1317564_155625188.shtml http://blog.csdn.net/muxiqingyang/a ...

  4. Android数据存储（三）——SQLite

    如果需要一个更加健壮的数据存储机制,则需要使用一个关系型数据库,在Android上,则为SQLlite. SQLite的特点:轻量级.嵌入式的.关系型数据库.可移植性好,易使用,小,高效且可靠,与使用 ...

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

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

  6. 【HDOJ】3386 Final Kichiku “Lanlanshu”

    数位DP.需要注意的是需要特殊处理前导0,另外连续的==匹配,不要计重了,尽量贪心的匹配掉. /* 3886 */ #include <iostream> #include <sst ...

  7. poj 3007 Organize Your Train part II(二叉排序树)

    题目:http://poj.org/problem?id=3007 题意:按照图示的改变字符串,问有多少种..字符串.. 思路:分几种排序的方法,,刚开始用map 超时(map效率不高啊..),后来搜 ...

  8. 【App FrameWork】页面之间的参数传递

    若应用中有多个页面,这时2个页面之间可能需要进行参数传递.那么如何来实现呢? 首先想到的就是URL参数传递的方式,如:在panel里设置属性 data-defer="Pages/Shake. ...

  9. (一)学习JavaScript之setTimeout方法

    参考:http://www.w3school.com.cn/jsref/met_win_settimeout.asp HTML DOM Window 对象 定义和用法 setTimeout() 方法用 ...

  10. 微信公众平台开发—利用OAuth2.0获取微信用户基本信息

    在借鉴前两篇获取微信用户基本信息的基础下,本人也总结整理了一些个人笔记:如何通过OAuth2.0获取微信用户信息 1.首先在某微信平台下配置OAuth2.0授权回调页面: 2.通过appid构造url ...