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(arg){...}
这就定义了一个匿名函数，参数为arg
而调用函数时，是在函数后面写上括号和实参的，由于操作符的优先级，函数本身也需要用括号，即：
(function(arg){...})(param)
这就相当于定义了一个参数为arg的匿名函数，并且将param作为参数来调用这个匿名函数
而(function($){...})(jQuery)则是一样的，之所以只在形参使用$，是为了不与其他库冲突，所以实参用jQuery
var fn = function($){....};
fn(jQuery);
5，-------------------------------------
JQuery的extend扩展方法：
Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。
一、Jquery的扩展方法原型是:
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：
那么合并后的结果
也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。
二、省略dest参数
上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
1、$.extend(src)
该方法就是将src合并到jquery的全局对象中去，如：
hello:function(){alert('hello');}
});
就是将hello方法合并到jquery的全局对象中。
2、$.fn.extend(src)
该方法将src合并到jquery的实例对象中去，如:
hello:function(){alert('hello');}
});
就是将hello方法合并到jquery的实例对象中。
下面例举几个常用的扩展实例：
这是在jquery全局对象中扩展一个net命名空间。
hello:function(){alert('hello');}
})
这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。
三、Jquery的extend方法还有一个重载原型：
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：
location:{city:"Boston",state:"MA",county:"China"}}
也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);
那么合并后的结果就是:
以上就是$.extend()在项目中经常会使用到的一些细节。
