jquery.extend

jquery.extend()，是拓展jquery这个类，即可以看作是jquery这个类本身的静态方法，例如：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>简单插件学习一</title>
  6.     <script src="../../Script/jquery.js"></script>
  7. </head>
  8. <body>
  9.     <input type="text" id="txtName" />
  10.     <script type="text/javascript">
  11.        ;(function ($) {
  12.             $.extend({
  13.                 test: function () {
  14.                     alert("这是我测试的方775法3哈");
  15.                 }
  16.             });
  17.         })(jQuery);
  18.  
  19.        $.test();
  20.       // $("#txtName").test();//不可以调用
  21.     </script>
  22. </body>
  23. </html>

即通过$.extend,扩充了Jquery本身，例如jquery上增加了test方法，只能其本身可以调用，跟具体的实例化对象没有一点关系，所以不可以用对象（具体的Dom节点）去调用。

jquery.fn.extend

从字面理解这个方法，就是拓展了jquery.fn的方法，而jquery.fn是啥玩意了 ，源码如下：

  1. jQuery.fn = jQuery.prototype = {
  2.     // The current version of jQuery being used
  3.     jquery: version,
  4.  
  5.     constructor: jQuery,
  6.  
  7.     // Start with an empty selector
  8.     selector: "",
  9.  
  10.     // The default length of a jQuery object is 0
  11.     length: 0,
  12.  
  13.     toArray: function() {
  14.         return slice.call( this );
  15.     },
  16.      //.......
  17. }

jquery.fn=jquery.prototype，就是原型，jquery.fn.extend扩展的就是jquery对象（原型的）方法，对象是啥？就是类的实例化 ，例如：$("#txtName")，就是jquery的对象

也就是说，jquery.fn.extend拓展方法，要用在jquery对象上才行，一般插件的制作是用此方法进行扩展的。例如：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>简单插件学习一</title>
  6.     <script src="../../Script/jquery.js"></script>
  7. </head>
  8. <body>
  9.     <input type="text" id="txtName" />
  10.     <script type="text/javascript">
  11.        ;(function ($) {
  12.             $.extend({
  13.                 test: function () {
  14.                     alert("这是我测试的方775法3哈");
  15.                 }
  16.             });
  17.  
  18.             $.fn.test2 = function () {
  19.                 alert("这是我的方法3的");
  20.                 $.fn.test2.sn.add();
  21.             }
  22.  
  23.             $.fn.test2.sn = {
  24.                 defaults: {
  25.                     dir: "H",
  26.                     speed: 500
  27.                 },
  28.  
  29.                 add: function () {
  30.                     alert("滚动方式:" + this.defaults.dir);
  31.                 }
  32.             }
  33.  
  34.         })(jQuery);
  35.  
  36.        $.test();
  37.       $("#txtName").test2();
  38.     </script>
  39. </body>
  40. </html>

jquery.extend()方法主要用于扩展全局函数，例如$.ajax这种，例如上面代码中的test方法，只可以通过jquery本身去调用即：$.test(),  而不可以通过 jquery 对象去调用。

jquery.fn.extend(),大部分插件都是用此方法的 ，例如：$("#txtName").test2();

除此之外，我们写jquery插件，还经常遇到一些参数传递的问题，这些一般都是通过jquery.extend方法传递的 ，下面我们就一起去了解一下，例如：

  1. $.extend(dest,src1,src2,src3....)

它的含义是将src1,src2,src3等合并到dest中，并返回到dest，但是 合并之后改变dest的结果,所以一般推荐以下方式：

  1. var setting=$.extend({},src1,src2,src3);//也就是用{}作为dest的参数

例如：

  1.  var setting = $.extend({}, { name: "alice", age: 28 }, { name: "stone", sex: "boy" });
  2.  console.log(setting);

后面的参数如果和前面的参数存在相同的名称，则会覆盖前面的参数值，合并后的 结果为：

例如插件中一般用到的此方法：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>简单插件学习一</title>
  6.     <script src="../../Script/jquery.js"></script>
  7. </head>
  8. <body>
  9.     <input type="text" id="txtName" />
  10.     <script type="text/javascript">
  11.        ;(function ($) {
  12.             $.fn.test2 = function (settings) {
  13.                 settings = $.extend({}, $.fn.test2.sn.defaults, settings);
  14.                 console.log(settings);
  15.                 $.fn.test2.sn.add();
  16.             }
  17.  
  18.             $.fn.test2.sn = {
  19.                 defaults: {
  20.                     dir: "H",
  21.                     speed: 500
  22.                 },
  23.  
  24.                 add: function () {
  25.                     alert("滚动方式:" + this.defaults.dir);
  26.                 }
  27.             }
  28.  
  29.         })(jQuery);
  30.  
  31.        $("#txtName").test2({name:"alicetest",dir:"V"});
  32.     </script>
  33. </body>
  34. </html>

设置默认值，如果插件的传入的参数中存在此参数，则覆盖默认值，否则则使用默认值，例如上面的例子中输出结果为：

jquery的extend的重载原型

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

其中第一个参数boolean代表是否进行深度拷贝，其余参数和之前一样，例如：

  1.   var result = $.extend(true, {}, { name: "alice", location: { city: "shanghai", country: "china" } }, { age: 28, name: "stone", location: { city: "beijing", state: "y" } });
  2.         console.log(result);

返回的结果为：

也就是 它会将src中的嵌套子对象也进行合并，即：location:{city:"beijing",country:"china",state:"y"}

如果将第一个参数传为false，效果又如何了，例如：

  1. var result2 = $.extend(false, {}, { name: "alice",last:"222", location: { city: "shanghai", country: "china" } }, { age: 28, name: "stone", location: { city: "beijing", state: "y" } });
  2.         console.log(result2);

结果如下：

只会进行合并，不会再对嵌套的子对象进行合并，例如；location:{city:"beijing",state:"y"}

常用的扩展实例，例如：

  1. $.extend($.net,{
  2.    hello:function(){
  3.       alert("这是全局对象拓展一个scroll命名空间");
  4.    }
  5. });

这是将hello方法拓展到之前的jquery的net命名空间去，怎么调用？？

例如，拓展动画中的$.easing：

  1. $.extend($.easing,{
  2.         easeInSine: function (x, t, b, c, d) {
  3.             return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
  4.         }
  5.     });

从jQuery API 文档中可以知道，jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数,以上代码是拓展了jquery.easing 中的easeInSine动画，

如果不拓展jquery.easing,则需要引入整个jquery.easing.1.3.js,因此为了减少代码的冗余，我们可以扩展$.easing中的方法；

具体调用如下：

  1.   $("#imgSrc").animate({
  2.             width: "90%",
  3.             height: "100%",
  4.             fontSize: "10em",
  5.             borderWidth: 10
  6.         }, "slow", "easeInSine", function () {
  7.             alert("移动了吗 ，哈哈");
  8.         });

以上就是jquery插件的一些用法，若有不足之处，请多多指教~~！

jquery插件之jquery.extend和jquery.fn.extend的区别的更多相关文章

  1. jQuery插件开发的两种方法及$.fn.extend的详解(转)

    jQuery插件开发的两种方法及$.fn.extend的详解 jQuery插件开发分为两种:1 类级别.2 对象级别,下面为大家详细介绍下   jQuery插件开发分为两种: 1 类级别 类级别你可以 ...

  2. 不定义JQuery插件，不要说会JQuery[转载]

    http://www.cnblogs.com/xcj26/p/3345556.html 不定义JQuery插件,不要说会JQuery 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页 ...

  3. jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...

  4. 不定义JQuery插件，不要说会JQuery 分类： JavaScript 2014-11-24 14:18 155人阅读 评论(0) 收藏

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  5. [转]不定义JQuery插件，不要说会JQuery

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直 ...

  6. 不定义JQuery插件，不要说会JQuery

    转自:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#") ...

  7. 转：不会定义jQuery插件，不要说会jQuery

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  8. 转载：不定义JQuery插件，不要说会JQuery

    转载:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#") ...

  9. （转）不定义JQuery插件，不要说会JQuery

    原文地址:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#" ...

  10. 使用jQuery插件时避免重复引入jquery.js文件

    当一个页面使用多个jQuery插件时,需要避免重复引入jquery.js文件,因为后面映入的jQuery.js文件中定义的jQuery对象会覆盖掉前面的jQuery对象,导致之前定义的jQuery插件 ...

随机推荐

  1. CSS div固定顶端

    position: fixed;原来只需要这么一个设置就可以!

  2. ios - 使用@try、catch捕获异常：

    @try { // 可能会出现崩溃的代码 } @catch (NSException *exception) { // 捕获到的异常exception } @finally { // 结果处理 }

  3. win10中如何成功安装lxml

    lxml官网地址:http://lxml.de/index.html 问题: 在学习lxm的时候,发现在win10下总是安装失败,如下: 在网上搜索了半天也没找到具体的解决方案,就FQgoogle下, ...

  4. Android自定义View分析

    一.基本步骤 1.自定义View的属性 2.在View的构造方法中获取自定义属性 3.重写onMesure方法(非必须) 4.重写onDraw方法 二.具体实现 1.自定义View的属性,首先在res ...

  5. iOS 3DES加密

    本文转载至 http://www.cocoachina.com/bbs/read.php?tid=177167 -(NSString *)TripleDES:(NSString *)plainText ...

  6. Linux命令提示符的配置

    Linux登录过程中加载配置文件顺序: /etc/profile → /etc/profile.d/*.sh → ~/.bash_profile → ~/.bashrc → [/etc/bashrc] ...

  7. PHP、jQuery、AJAX和MySQL 数据库实例

    index.html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. burp 代理的时候无法访问https网站

    今天在使用burp的时候发现不能访问https网站了,Google下面还出现这个 ERR_SSL_VERSION_OR_CIPHER_MISMATCH,于是到官网下载了一个最新的burp就可以访问了, ...

  9. android菜鸟学习笔记18----Android数据存储(二)SharedPreferences

    数据存储的方式,有比直接文件读写更加简便的方式,那就是操作SharedPreferences. SharedPreferences一般用于存储用户的偏好设定,暂时不支持多进程操作. SharedPre ...

  10. Learning string similarity measures for gene/protein name dictionary look-up using logistic regression

    Yoshimasa Tsuruoka1,*, John McNaught1,2, Jun’ichi Tsujii1,2,3 and Sophia Ananiadou1,2 1 School of Co ...