jQuery(jquery ui,jquery plugins)插件笔记1

---恢复内容开始---

有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 从新学习一遍而后书写大量代码。直到jQuery的出现，让开发人员从一大堆繁琐的js代码中解脱，取而代之几行jQuery代码。现今，jQuery无 疑已成为最为流行没有之一的JavaScript类库。

　　而jQuery UI 则是在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效，让一个毫无艺术感只知道码字的码农不费吹灰之力就能够作出使人炫目的界 面。让你在作界面的时候随便‘拿来’就用，还有一点就是，它是免费开源的，用户可根据须要自定义甚至从新设计。

----------------------------------------------------------------------

在开始学习jquery插件开发以前，咱们先来了解下jqeury各类关系：

----------------------------------------------------------------------

打开jquery官网，这里有api,有基于jquery开发的各类插件，严格的讲，jquery ui是jquery官方的界面插件,而这里的plugins大多数是民间的。

 

api咱们就不看了，若是英文很差，网上还有好多中文的jqueryapi，百度一下就能够，点击plugins，能够看到这里有不少的插件

能够根据tags寻找咱们想要的标签，咱们在搜索框搜索blockUI

这里有该插件的简单说明，做者，github地址等等

点开github连接，

这个有关插件的更多介绍。

---------------------------------------------------

感谢：

jQuery插件开发全解析http://www.iteye.com/topic/545971

jQuery.extend 函数详解http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

教你如何建立本身的 jQuery 插件  http://blog.csdn.net/w809026418/article/details/6193993

--------------------------------------------------------

JQuery插件的开发包括两种：

一种是类级别的开发，即给jQuery添加新的全局函数，至关于给jquery类自己添加方法，jquery的全局函数就是属于jquery命名空间的函数。

另外一种是对象级别的插件开发，即给jquery对象添加方法，

 

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，能够理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发能够采用以下几种形式进行扩展：

1.1 添加一个新的全局函数

添加一个全局函数，咱们只需以下定义：

1.1 添加一个新的全局函数
1.2 增长多个全局函数

1.3使用jQuery.extend(object);

1.4 使用命名空间

虽然在jQuery命名空间中，咱们禁止使用了大量的javaScript函数名和变量名。可是仍然不可避免某些函数或变量名将于其余jQuery插件冲突，所以咱们习惯将一些方法封装到另外一个自定义的命名空间。

经过这个技巧（使用独立的插件名），咱们能够避免命名空间内函数的冲突。

jquery.demo.js

;(function($) {

    // 1.1, add a global function
    $.foo = function() {
        alert('this is a test ,this is only a test for global function !');
    };

    // 1.2, add a global function with param
    $.fooWithParam = function(param) {
        alert('this global function takes a parameter, which is named: ' + param + '.');
    };

    // 1.3, define a global function with jQuery.extend(object), this method will add
    // object to global Object of jQuery
    $.extend({
        foo1 : function() {
            alert('this is a test ,this is only a test for global function !');
        },
        fooWithParam1 : function(param) {
            alert('this global function takes a parameter, which is named:  ' + param + '.');
        }
    });

    // 1.4, use nameSpace to avoid conflict
    $.myPlugin = {
        foo2 : function() {
            alert('this is a test ,this is only a test for global function !');
        },
        fooWithParam2 : function(param) {
            alert('this global function takes a parameter, which is named:  ' + param + '.');
        }
    };

})(jQuery);

 

页面调用：

$("#button").click(function() {
            //调用全局函数
            $.foo();
            $.fooWithParam('hello');

            $.foo1();
            $.fooWithParam1('andy');

            $.myPlugin.foo2();
            $.myPlugin.fooWithParam2('lily');
        });

 

--------------------------------

2、对象级别的插件开发

对象级别的插件开发须要以下的两种形式：、

形式1：

;
(function($) {
    $.fn.extend({
        pluginName : function(options, collback) {
            // out plugin implementation code goes here;
        }
    });

})(jQuery);

形式2：

;
(function($) {
    $.fn.pluginName = function(options, collback) {
        // out plugin implementation code goes here;
    };

})(jQuery);

上面定义了一个jQuery函数，形式参数是$，函数定义完成之后将jQuery这个实际参数传递进去，当即调用执行，这样写的好处是，咱们在写jQuery插件的时候，也可使用$这个别名，而不会与prototype引发冲突。

这时候，插件能够这样调用：

$('#myDiv').pluginName();

 

3、总结

jQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend(object);  给jQuery对象添加方法。
jQuery.extend(object);  为扩展jQuery类自己.为类添加新的方法。

3.1 jQuery.fn.extend(object);

fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {  

init: function( selector, context ) {//....　  

//......  

};   

原来 jQuery.fn = jQuery.prototype.对prototype确定不会陌生啦。虽然 javascript　没有明确的类的概念，可是用类来理解它，会更方便。jQuery即是一个封装得很是好的类，好比咱们用 语句　$("#btn1") 会生成一个 jQuery类的实例。

jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可使用这个“成员函数”。

好比咱们要开发一个插件，作一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。能够这么作：

$.fn.extend({        

     alertWhileClick:function(){       

         $(this).click(function(){      

              alert($(this).val());       

          });       

      }       

});   

$("#input1").alertWhileClick(); //页面上为：<input id="input1" type="text"/>

$("#input1")　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

3.2 jQuery.extend(object);　

为jQuery类添加添加类方法，能够理解为添加静态方法。如：

$.extend({  

    add:function(a,b){return a+b;}  

});  

便为　jQuery　添加一个为 add　的　“静态方法”，以后即可以在引入 jQuery　的地方，使用这个方法了，$.add(3,4); //return 7

 

4，----------------------------------------

(function($){...})(jQuery)其实是匿名函数

 

function(arg){...}
这就定义了一个匿名函数，参数为arg

而调用函数时，是在函数后面写上括号和实参的，因为操做符的优先级，函数自己也须要用括号，即：
(function(arg){...})(param)
这就至关于定义了一个参数为arg的匿名函数，而且将param做为参数来调用这个匿名函数

而(function($){...})(jQuery)则是同样的，之因此只在形参使用$，是为了避免与其余库冲突，因此实参用jQuery
var fn = function($){....};
fn(jQuery);

 

 

5，-------------------------------------

JQuery的extend扩展方法：
      Jquery的扩展方法extend是咱们在写插件的过程当中经常使用的方法，该方法有一些重载原型，在此，咱们一块儿去了解了解。
      1、Jquery的扩展方法原型是:　　　

extend(dest,src1,src2,src3...);

      它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此能够看出该方法合并后，是修改了dest的结构的。若是想要获得合并的结果却又不想修改dest的结构，能够以下使用：

var newSrc = $.extend({},src1,src2,src3...) // 也就是将"{}"做为dest参数。

      这样就能够将src1,src2,src3...进行合并，而后将合并结果返回给newSrc了。以下例：

var result = $.extend({},{name: " Tom " ,age: 21 },{name: " Jerry " ,sex: " Boy " })

 

      那么合并后的结果

result = {name: " Jerry " ,age: 21 ,sex: " Boy " }

      也就是说后面的参数若是和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。

      2、省略dest参数
      上述的extend方法原型中的dest参数是能够省略的，若是省略了，则该方法就只能有一个src参数，并且是将该src合并到调用extend方法的对象中去，如：
 　　一、$.extend(src)
 　　该方法就是将src合并到jquery的全局对象中去，如：

$.extend({
hello:function(){alert( ' hello ' );}
});

 　　就是将hello方法合并到jquery的全局对象中。
 　　二、$.fn.extend(src)
 　　该方法将src合并到jquery的实例对象中去，如:

$.fn.extend({
hello:function(){alert( ' hello ' );}
});

 

　　 就是将hello方法合并到jquery的实例对象中。

 　　下面例举几个经常使用的扩展实例：

$.extend({net:{}});

 

　　 这是在jquery全局对象中扩展一个net命名空间。

$.extend($.net,{
hello:function(){alert( ' hello ' );}
})

  　　这是将hello方法扩展到以前扩展的Jquery的net命名空间中去。

 　　3、Jquery的extend方法还有一个重载原型：  

extend(boolean,dest,src1,src2,src3...)

      第一个参数boolean表明是否进行深度拷贝，其他参数和前面介绍的一致，什么叫深层拷贝，咱们看一个例子：

var result = $.extend( true , {},
{ name: " John " , location: {city: " Boston " ,county: " USA " } },
{ last: " Resig " , location: {state: " MA " ,county: " China " } } );

      咱们能够看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是： 

result = {name: " John " ,last: " Resig " ,
location:{city: " Boston " ,state: " MA " ,county: " China " }}

 

       也就是说它会将src中的嵌套子对象也进行合并，而若是第一个参数boolean为false，咱们看看合并的结果是什么，以下：

var result = $.extend( false , {},
{ name: " John " , location:{city: " Boston " ,county: " USA " } },
{ last: " Resig " , location: {state: " MA " ,county: " China " } }
);

     那么合并后的结果就是:

result = {name: " John " ,last: " Resig " ,location:{state: " MA " ,county: " China " }}

 

　　以上就是$.extend()在项目中常常会使用到的一些细节。