<!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. 李洪强iOS开发之使用 Reachability 检测网络

    1.iOS平台是按照一直有网络连接的思路来设计的,开发者利用这一特点创造了很多优秀的第三方应用. 大多数的iOS应用都需要联网,甚至有些应用严重依赖网络,没有网络就无法正常工作. 2.在你的应用尝试通 ...

  2. c++ 孟岩推荐 书籍

    c++ primer 中文版本  是 教程+参考书 扛梁之作c++ 标准程序库 对于c++熟手来说更为快捷effective c++  永远是初学者必读的,但是c++11标准后的第四版,还未发布c++ ...

  3. 基于SMB协议的共享文件读写

    一.SMB协议 SMB协议是基于TCP-NETBIOS下的,一般端口使用为139,445. 服务器信息块(SMB)协议是一种IBM协议,用于在计算机间共享文件.打印机.串口等.SMB 协议可以用在因特 ...

  4. Android ActionBar隐藏修改图标和标题

    有时候在一些子页面或者内容页面,不需要显示ActionBar的标题栏图标.可用如下方式进行设置. 首先获取到ActionBar对象 ActionBar actionBar=getActionBar() ...

  5. 修改VMware Workstation 界面语言

    修改方法 我安装的VMware版本是10,找到VMware安装目录,我的是C:\Program Files\VMware\VMware Workstation\messages,里面有ja和zh-cn ...

  6. JSP内置标签 JSP中JavaBean标签 JSP开发模式 EL和JSTL快速入门

    2 JSP内置标签(美化+业务逻辑)   1)为了取代<%%>脚本形式,使用JSP标签/JSP动作,目的:与JSP页面的美化,即JSP面页都是由标签组成,不再有其它的内容   2)JSP内 ...

  7. C#中this在构造函数时的使用

    今天编程的时候,想要用this来处理构造函数,想了半天没有想起来 后来找了自己以前记录的 http://www.cnblogs.com/chucklu/p/4842766.html public Cu ...

  8. UVa 1606 (极角排序) Amphiphilic Carbon Molecules

    如果,没有紫书上的翻译的话,我觉得我可能读不懂这道题.=_=|| 题意: 平面上有n个点,不是白点就是黑点.现在要放一条直线,使得直线一侧的白点与另一侧的黑点加起来数目最多.直线上的点可以看作位于直线 ...

  9. 中国Azure媒体服务RESTAPI的Endpoint

    Amber Zhao  Thu, Feb 26 2015 4:09 AM 由于海外Azure和中国Azure有不同的domain,很多用户在使用媒体服务RESTAPI时,需要指定中国Azure媒体服务 ...

  10. 常用的js代码

    1.输入框输入提示代码 <input name="keyword" type="text" value="请输入关键字" onFocu ...