开发jquery插件之前首先要调用Jquery,这个可以去http://jquery.com下载得到.然后我们看一下我写的这个例子:
<script type='text/javascript' src="img/jquery-1.5.2.min.js"></script>
<script type='text/javascript'>
//自定義插件
(function($){
    $.fn.examp=function(_opt){
        //配置参数
        alert(_opt._a+' | '+_opt._b);
        onBackCell();

function onBackCell(_cell){
            if(_opt.onBack!=null){_opt.onBack(_cell);}
        }
    }欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home

//特殊參數傳遞方法
    $.examp1 = function(opt){
        alert(opt.typ+' | '+opt.hid);
    }
})(jQuery)
//插件調用
$(function(){
    $("img").examp({
        _a:"AAA",
        _b:"BBB",
        onBack:function(cell){
            alert('回調函數');
        }
    });
    $.examp1({
        'typ':'show',
        'hid':'id1'
    });
});
</script>

上边的这个例子我采用了两种方式,第一种是捆绑对象,第二种方法你可以把它理解成是function就好了.上边的两个例子可以拆分为以下两个例子,请看代码:
第一个:绑定对象
<script type='text/javascript' src="img/jquery-1.5.2.min.js"></script>
<script type='text/javascript'>
//自定義插件
(function($){
    $.fn.examp=function(_opt){
        //配置参数
        alert(_opt._a+' | '+_opt._b);
        onBackCell();

function onBackCell(_cell){
            if(_opt.onBack!=null){_opt.onBack(_cell);}
        }
    }
})(jQuery)
//插件調用
$(function(){
    $("img").examp({
        _a:"AAA",
        _b:"BBB",
        onBack:function(cell){
            alert('回調函數');
        }
    });
});
</script>
第二个:不绑定对象
<script type='text/javascript' src="img/jquery-1.5.2.min.js"></script>
<script type='text/javascript'>
//自定義插件
(function($){
  //特殊參數傳遞方法
    $.examp1 = function(opt){
        alert(opt.typ+' | '+opt.hid);
    }
})(jQuery)
//插件調用
$(function(){
    $.examp1({
        'typ':'show',
        'hid':'id1'
    });
});
</script>

通过上边的三个例子我们不难发现,插件的代码需要放置在
(function($){

})(jQuery)
之间

而jquery的普通代碼需要放在
$(function(){

})
之间.

教你开发Jquery插件-Jquery插件开发教程相关推荐

  1. 40个新鲜出炉的 jQuery 插件和免费教程【上篇】 转载自:梦想天空

    40个新鲜出炉的 jQuery 插件和免费教程[上篇] 转载于:https://www.cnblogs.com/chenjunLovefan/archive/2012/07/23/2605003.ht ...

  2. 推荐60个jQuery插件及使用教程

    jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...

  3. 转 jquery插件--241个jquery插件—jquery插件大全

    241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...

  4. 241个jquery插件—jquery插件大全

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

  5. 分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen

    在线演示  在线下载 今天介绍一款帮助网站提高用户体验的jQuery插件 - jQuery fullscreen,它能够帮助网站实现针对阅读内容的全屏显示功能. 这个插件基于Full Screen A ...

  6. 一个非常超级可爱的滚动到顶端(Back to top)的jQuery插件- jQuery Back to Top

    日期:2011/11/17  来源:GBin1.com 今天介绍一个非常可爱漂亮的滚动到顶端的插件,无需设置.它能快速的将页面里的元素添加滚动到顶端的功能.而且只在滚动时才出现,当滚动到顶端自动消失. ...

  7. Google分析用户页面滚动深度分析jQuery插件 - jQuery Scroll Depth

    日期:2012-4-29  来源:GBin1.com Google Analytics(Google分析)对于广大站长来说,肯定不是一个陌生的工具,它能提供给我们众多的网站访问相关信息及其用户使用情况 ...

  8. idea如何自制插件_Minecraft插件开发教程-开发环境配置 [原创]

    Hello 各位小阔爱们好 时隔2个多月 我又回来了 这一期专栏有些特别 让我们一起来制作一个简单的Minecraft插件吧~ 本教程为原创作品 不得随意转载 求硬币 收藏 点赞 关注! 写专栏是贞德 ...

  9. 设置div圆角的jquery插件-jquery.corner.js

    代码 /*!  * jQuery corner plugin: simple corner rounding  * Examples and documentation at: http://jque ...

最新文章

  1. Ubuntu16.04菜单栏侧边栏不显示
  2. XML实现Android动画效果anim
  3. “榕树下·那年”移动app ( hybrid ) 开发总结
  4. linux 匹配文本中的ip,linux文本三剑客匹配网卡IP地址大PK(CentOS 7系统)
  5. 机器人写诗项目——递归神经网络(RNN)
  6. 不知道如何选择的时候,付诸行动比选择更重要
  7. php 输出缓冲区清理
  8. 10 张令人喷饭的程序员漫画
  9. 【论文阅读】Deep Neural Networks for Learning Graph Representations | day14,15
  10. 速度挑战 - 2小时完成HTML5拼图小游戏
  11. 庆祝我的第一个WebGis完成-c#+MapXtreme2004
  12. NAT技术与代理服务器
  13. 错误码应该如何设计?
  14. 安装UWB定位系统设备需要注意什么?
  15. 书评精益创业-新创企业的成长思维 (上)
  16. 运筹说第38期“迟到“的毕业证-趣闻轶事(三)
  17. mysql ibd恢复数据_mysql通过ibd恢复数据
  18. 基于SSM的设备租赁管理系统
  19. PS系列 -- 颜色替换
  20. 【托福考场考点1】山东大学托福考点详情及考友评价

热门文章

  1. Windows下使用taskkill 命令批量结束进程
  2. Soul网关源码阅读番外篇(一) HTTP参数请求错误
  3. android 布局变化动画效果,使用LayoutTransition实现布局变化时的动画
  4. mpandroidchart组合图_使用MpAndroidChart组合图,如何将图表分成上下两部分?
  5. request.getRequestDispatcher().forward(request,response)和response.sendRedirect()的区别
  6. JavaScript中的 in 操作符
  7. linux 关闭rsync服务器,linux下配置rsync服务器和实时同步
  8. SecureCRT 连接Win10内置ubuntu问题层层突围
  9. 自建latex服务器,通过在线服务器编译LaTeX
  10. yum php5.6源码,5.2 YUM升级PHP5.6