<!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. java版AC自动机

    class Trie { int [][]Next=new int[500005][128]; int []fail=new int[500005]; int []end=new int[500005 ...

  2. Hoax or what

    Hoax or what 题意是询问一个动态序列的最小值和最大值. 可以用multiset来实现. #include <stdio.h> #include <set> usin ...

  3. P66、面试题8：旋转数组的最小数字

    题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转,该数 ...

  4. Flex 选项卡加载方式简介

    Flex中选项卡默认只加载选中的选项,所以在初始化的时候给其他的选项卡中的对象赋值或是其他操作,都会出现空对象错误. 解决办法:给选项卡设置属性 creationPolicy=”all” 如:< ...

  5. JNDI和在tomcat中配置DBCP连接池 元数据的使用 DBUtils框架的使用 多表操作

    1 JNDI和在tomcat中配置DBCP连接池 JNDI(Java Naming and Directory Interface),Java命名和目录接口,它对应于J2SE中的javax.namin ...

  6. NFC(7)向NFC硬件写入数据的两个示例(nfc硬件启动android应用,nfc硬件打开uri)

    向NFC标签写入数据基本步骤 1,获取Tag对象 Tag tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG); 2,判断NFC标签的数据类型(通 ...

  7. 【HDOJ】3553 Just a String

    后缀数组加二分可解. /* 3553 */ #include <iostream> #include <sstream> #include <string> #in ...

  8. Application.CommonAppDataPath的路径

    Application.CommonAppDataPath; win7的路径 C:\ProgramData\CompanyName\ProductName\2.0.5.1 [assembly: Ass ...

  9. poj 3080 Blue Jeans（水题 暴搜）

    题目:http://poj.org/problem?id=3080 水题,暴搜 #include <iostream> #include<cstdio> #include< ...

  10. javascript 库

    http://overapi.com/javascript/ 查javascript http://slimerjs.org/ 自动测试? http://www.cnblogs.com/lhb25/p ...