zoukankan      html  css  js  c++  java
  • 编写优秀jQuery插件技巧

    1. 把你的代码全部放在闭包里面

    这是我用的最多的一条。但是有时候在闭包外面的方法会不能调用。

    不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面。 而方法可能应该放在Prototype方法内部。

    /注意为了更好的兼容性,开始前有个分号
    ;(function($){              //此处将$作为匿名函数的形参
            /*这里置放代码,可以使用$作为jQuery的缩写别名*/  
    })(jQuery);   //这里将jQuery作为实参传递给匿名函数了
    <script>
         //插件编写
         ;(function(){
               $.fun.extend({
                    "color":function(value){
                         return this.css('color',value); 
                     }
               });
          })(jQuery);
     
         //插件应用
           $(function(){
                  alert($('div').color('red'));
            });
    </script>
     
    <div class='a'>red</div>
    <div style="color:blue">blue</div>

    $.fn.extend

    $.fn就是jQuery的原型,$.fn等于jQuery.prototype,$是jQuery的别名。$.fn.extend方法的作用是用于扩展jQuery实例对象,也就是我们从页面中获得的jQuery对象。

    插件:一个函数

    (function($) {
    
        $.fn.pluginName = function(options) {
    
    
    // 代码在此处运行
    
            return this;
        }
    
    })(jQuery);

      上面的代码中的函数可以像其他的jQuery函数那样通过$('#element’).pluginName()来调用。注意,我是如何把“return this”语句加进去的;这小片的代码通过返回一个原来元素的集合(包含在this当中)的引用来产生链式调用的效果,而这些元素是被一个jQuery对象所包裹的。你也应该注意,“this”在这个特定的作用域中是一个jQuery对象,相当$(‘#element’)。

      根据返回的对象,我们可以总结出,在上面的代码中,使用$(‘#element’).pluginName()的效果和使用$(‘#element’)的效果是一样的。在你的即时执行函数作用域中,没必要用$(this)的方式来把this包裹到一个jQuery对象中,因为this本身已经是被包装好的jQuery对象。

    http://www.runoob.com/w3cnote/jquery-10-skill.html

  • 相关阅读:
    一道初中练习题,现在的我几乎差点很有可能搞不好似乎仿佛就没有做出来.
    [转]IBM ThinkPad 全新、原装机验机流程(完全版)
    在一个BBS上看到的.觉得很不错,放过来.
    验证数字的正则表达式集
    基于百度地图SDK + SQLite数据库的安卓管理系统
    C# 将系统时间转换成农历时间
    博客园
    C#正则表达式的简单用法
    单张图片轮换
    2个有焦点时文字消失或变淡效果
  • 原文地址:https://www.cnblogs.com/cnki/p/9617368.html
Copyright © 2011-2022 走看看