jq插件

<pre name="code" class="javascript"><span style="font-family: Arial, Helvetica, sans-serif;">//sample:扩展jquery对象的方法，bold()用于加粗字体。</span>

(function ($) { $.fn.extend({ "bold": function () { ///<summary> /// 加粗字体 ///</summary> return this.css({ fontWeight: "bold" }); } }); })(jQuery);

//扩展jQuery对象本身        jQuery.extend({            "minValue": function (a, b) {                ///<summary>                /// 比较两个值，返回最小值                ///</summary>                return a < b ? a : b;            },            "maxValue": function (a, b) {                ///<summary>                /// 比较两个值，返回最大值                ///</summary>                return a > b ? a : b;            }        });        //调用        var i = 100; j = 101;        var min_v = $.minValue(i, j); // min_v 等于 100        var max_v = $.maxValue(i, j); // max_v 等于 101

jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

首先我们来看fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {

　　　init: function( selector, context ) {.....};
};

原来 jQuery.fn = jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法，就相当于为对象添加”成员方法“，类的”成员方法“要类的对象才能调用，所以使用jQuery.fn.extend(object)扩展的方法， jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。

1. 什么是自执行的匿名函数?     
　　   它是指形如这样的函数: (function {// code})();
    2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?
    3. 分析     
       (1). 首先, 要清楚两者的区别:     (function {// code})是表达式, function {// code}是函数声明.     
       (2). 其次, js"预编译"的特点:     js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.     
       (3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;     
    当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

   另外， 函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……

  例如：
   bootstrap 框架中的插件写法：
   !function($){
　　//do something;
   }(jQuery);

   和 
   (function($){
　　//do something;
   })(jQuery); 是一回事。

匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。
例如：
     var a=1;
     (function()(){
　　　　var a=100;
　　})();
      alert(a); //弹出 1

//闭包限定命名空间(function ($) {    })(window.jQuery);

//闭包限定命名空间(function ($) {    $.fn.extend({        "highLight":function(options){            //do something        }    });})(window.jQuery);

//闭包限定命名空间(function ($) {    $.fn.extend({        "highLight": function (options) {            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数            this.each(function () {  //这里的this 就是 jQuery对象                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom                //根据参数来设置 dom的样式                $this.css({                    backgroundColor: opts.background,                    color: opts.foreground                });            });        }    });    //默认参数    var defaluts = {        foreground: 'red',        background: 'yellow'    };})(window.jQuery);

$(function () {    $("p").highLight(); //调用自定义 高亮插件});

这里只能 直接调用，不能链式调用。我们知道jQuey是可以链式调用的，就是可以在一个jQuery对象上调用多个方法，如：
$('#id').css({marginTop:'100px'}).addAttr("title","测试“); 
但是我们上面的插件，就不能这样链式调用了。比如：$("p").highLight().css({marginTop:'100px'}); //将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return 出来，和上面的代码没啥区别）

//闭包限定命名空间(function ($) {    $.fn.extend({        "highLight": function (options) {            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数            return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom                //根据参数来设置 dom的样式                $this.css({                    backgroundColor: opts.background,                    color: opts.foreground                });            });        }    });    //默认参数    var defaluts = {        foreground: 'red',        background: 'yellow'    };})(window.jQuery);

完整的高亮插件代码如下：

//闭包限定命名空间(function ($) {    $.fn.extend({        "highLight": function (options) {            //检测用户传进来的参数是否合法            if (!isValid(options))                return this;            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数            return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom                //根据参数来设置 dom的样式                $this.css({                    backgroundColor: opts.background,                    color: opts.foreground                });                //格式化高亮文本                var markup = $this.html();                markup = $.fn.highLight.format(markup);                $this.html(markup);            });        }    });    //默认参数    var defaluts = {        foreground: 'red',        background: 'yellow'    };    //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。    $.fn.highLight.format = function (str) {        return "<strong>" + str + "</strong>";    }    //私有方法，检测参数是否合法    function isValid(options) {        return !options || (options && typeof options === "object") ? true : false;    }})(window.jQuery);

调用

//调用        //调用者覆盖 插件暴露的共公方法        $.fn.highLight.format = function (txt) {            return "<em>" + txt + "</em>"        }        $(function () {            $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件        });