<!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开发之【零基础学习iOS开发】【02-C语言】08-基本运算

    计算机的基本能力就是计算,所以一门程序设计语言的计算能力是非常重要的.C语言之所以无所不能,是因为它不仅有丰富的数据类型,还有强大的计算能力.C语言一共有34种运算符,包括了常见的加减乘除运算.这讲就 ...

  2. 通过web代理进行跨域访问，http请求返回超时的问题定位

    [现象] 在ajax通过web代理跨域访问时,http第一次登陆时正常,但是第二次再下发其他命令的时候总是返回 java.net.SocketTimeoutException: Read timed ...

  3. Qt之QtSoap（访问WebService）

    http://blog.csdn.net/u011012932/article/details/51673800

  4. 分布式java应用

    大型应用,通常会拆分为多个子系统来实现.       对Java来说,这些子系统可能部署在同一台机器的多个不同的JVM中,也可能部署在不同的机器上,但这些子系统又不是完全独立的,要相互通信来共同实现业 ...

  5. System.Drawing.Graphics中比较重要的几个方法

    方法 常见参数 绘制的图形 DrawLine 钢笔.起点和终点 一段直线 DrawRectangle 钢笔.位置和大小 空心矩形 DrawEllipse 钢笔.位置和大小 空心椭圆 FillRecta ...

  6. VMWare-NAT模式实现局域网其他主机对虚拟机访问

    WIN 2012在桥接模式下可以实现主机及主机所在局域网内其他主机对虚拟机的访问,但是在NAT模式下主机可以对虚拟机访问,但是主机所在的局域网内其他主机却无法对虚拟机访问,必须进行主机转发,从而实现局 ...

  7. 查询json数据结构的8种方式

    查询json数据结构的8种方式 你有没有对“在复杂的JSON数据结构中查找匹配内容”而烦恼.这里有8种不同的方式可以做到: JsonSQL JsonSQL实现了使用SQL select语句在json数 ...

  8. Fody

    Fody  https://github.com/Fody/Fody/ 有空还要看下怎么实现的.

  9. APIO2012派遣

    2809: [Apio2012]dispatching Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1196  Solved: 586[Submit ...

  10. python Image PNG getpixel R/G/B/A

    # python Image PNG getpixel R/G/B/A# # 说明: # 本文主要是记录python中如何使用Image模块进行基本的图像R.G.B.A值得获取. # 为后续的rasp ...