jQuery凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,经常有人询问一些技巧,因此干脆写这么一篇文章给各位jQuery爱好者,算是抛砖引玉吧。

那么首先我们来简单的看一下最正统的 jQuery 插件定义方式:

(function ($) {     
$.fn.插件名 = function (settings) {         
//默认参数         
var defaultSettings = {
 
        }         /* 合并默认参数和用户自定义参数 */        
 
settings = $.extend(defaultSettings, settings);
 
return this.each(function () {             //代码         });   //插件在元素内多次出现
 
} })(jQuery);

先来看模板中的第一行代码(当然我们要把这一行代码的后半部分给揪出来一起看,不然第一行就完全无意义了):

(function ($) {
 
})(jQuery);

这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解,将会对这种代码非常疑惑,那么强烈建议您阅读【详谈JavaScript 匿名函数及闭包】这篇文章。

jQuery 的继承方法 $.extend —— $.extend 在jQuery 插件开发中有个很重要的作用,就是用于合并参数。

$.fn.tip = function (settings) {     
var defaultSettings = {            
//颜色     
color: 'yellow',        
//延迟        
timeout: 200     }
 /* 合并默认参数和用户自定义参数 */   
settings = $.extend(defaultSettings, settings);    
alert(settings.input); <br>}

jQuery 插件定义第二种方式:

(function ($) {
    //插件定义--更换名字
    $.fn.tabpanel = function (method) {
        var methods = $.fn.tabpanel.methods;
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
 
        }
    }
    //支持的方法
    $.fn.tabpanel.methods =
    {
        //初始化
        init: function (p_options) {
            tabpanelBind(p_options, this);
        },
        add: function (p_options) {
            addTab(p_options, this);
            tabpanelBind(p_options, this);
            // debugger
        }    }
    function add(p_options) {
        var _defaults = {
            id: ""
        }
    <br>    //内部实现略.........<br>        return _index;
    }
<br>})(jQuery);<br><br>调用  $("#team").tabpanel('add',"");

最新文章

  1. leetcode 165
  2. C#使用读写锁三行代码简单解决多线程并发写入文件时线程同步的问题
  3. jquery中的事件与动画
  4. css3 transition属性变化与animation动画的相似性以及不同点
  5. codeforces 721C (拓扑+dp)
  6. Android 读取手机短信
  7. Cloudera Impala 之 ORDER BY without LIMIT currently not supported
  8. MVCC图示
  9. JSON、数组、时间戳
  10. check the manual that corresponds to your MySQL server version for the right syntax处理方案
  11. 新版Azure Automation Account 浅析(二) --- 更新Powershell模块和创建Runbook
  12. CRC检验
  13. 使input文本框不可编辑的3种方法
  14. js点击复制剪贴板
  15. Python_day9
  16. [C#] LINQ之Join与GroupJoin
  17. LNAMP服务器环境(源码安装)
  18. [20170615]执行dbms_sqldiag.dump_trace看执行计划.txt
  19. day19-python的正则表达式2
  20. Jmeter使用流程及简单分析监控

热门文章

  1. jQuery name选择器 带正则 写法示例
  2. Hibernate4.2.21.Final创建入门的HelloHibernet工程
  3. SuperMap iManager跨网段配置许可
  4. mysql数据结构优化,范式和反范式
  5. C语言实现http get请求程序
  6. python 中写hive 脚本
  7. springmvc mybatis 声明式事务管理回滚失效,(checked回滚)捕捉异常,传输错误信息
  8. POJ 1321:棋盘问题
  9. Linux下使用DD命令测试磁盘读写速度
  10. 安卓开发学习2-官方例子Accelerometer