教程
jQuery中hide()方法用法实例 jQuery中slideUp()方法用法分析 jQuery中fadeOut()方法用法实例 jQuery中animate()方法用法实例 jQuery中width()方法用法实例 jQuery中height()方法用法实例 jQuery中val()方法用法实例 jQuery中html()方法用法实例 jQuery中append()方法用法实例 jQuery中prepend()方法用法实例 jQuery中after()方法用法实例 jQuery中before()方法用法实例 jQuery中replaceWith()方法用法实例 jQuery中remove()方法用法实例 jQuery中detach()方法用法实例 jQuery中click事件用法实例 jQuery中focus事件用法实例 jQuery中mouseover事件用法实例 jQuery中change事件用法实例 jQuery中ajax的load()方法用法实例 jQuery中ajax的get()方法用法实例 jQuery中ajax的post()方法用法实例 jQuery中的jQuery()方法用法分析 jQuery.holdReady()方法用法实例 jQuery中each()方法用法实例 jQuery中size()方法用法实例 jQuery对象的length属性用法实例 jQuery对象的selector属性用法实例 jQuery的context属性用法实例 jQuery中get()方法用法实例 jQuery中index()方法用法实例 jQuery中data()方法用法实例 jQuery中removeData()方法用法实例 jQuery中queue()方法用法实例 jQuery中dequeue()方法用法实例 jQuery中clearQueue()方法用法实例 jQuery中element选择器用法实例 jQuery中:eq()选择器用法实例 jQuery中:gt选择器用法实例 jQuery中:lt选择器用法实例 jQuery中:header选择器用法实例 jQuery中:animated选择器用法实例 jQuery中:first选择器用法实例 jQuery中:last选择器用法实例 jQuery中:not选择器用法实例 jQuery中:focus选择器用法实例 jQuery中:contains选择器用法实例 jQuery中:empty选择器用法实例 jQuery中:has选择器用法实例 jQuery中:hidden选择器用法实例 jQuery中:visible选择器用法实例 jQuery中[attribute]选择器用法实例 jQuery中[attribute!=value]选择器用法实例 jQuery中[attribute=value]选择器用法实例 jQuery中[attribute^=value]选择器用法实例 jQuery中[attribute*=value]选择器用法实例 jQuery中:first-child选择器用法实例 jQuery中:nth-child选择器用法实例 jQuery中:last-child选择器用法实例 jQuery中:only-child选择器用法实例 jQuery中:input选择器用法实例 jQuery中:text选择器用法实例 jQuery中:password选择器用法实例 jQuery中:radio选择器用法实例 jQuery中:checkbox选择器用法实例 jQuery中:submit选择器用法实例 jQuery中:image选择器用法实例 jQuery中:reset选择器用法实例 jQuery中:button选择器用法实例 jQuery中:file选择器用法实例 jQuery中:enabled选择器用法实例 jQuery中:disabled选择器用法实例 jQuery中:checked选择器用法实例 jQuery中:selected选择器用法实例 jQuery中attr()方法用法实例 jQuery中removeAttr()方法用法实例 jQuery中prop()方法用法实例 jQuery中removeProp()方法用法实例 jQuery中addClass()方法用法实例 jQuery中removeClass()方法用法实例 jQuery中toggleClass()方法用法实例 jQuery中eq()方法用法实例 jQuery中first()方法用法实例 jQuery中last()方法用法实例 jQuery中hasClass()方法用法实例 jQuery中filter()方法用法实例 jQuery中is()方法用法实例 jQuery中map()方法用法实例 jQuery中has()方法用法实例 jQuery中not()方法用法实例 jQuery中slice()方法用法实例 jQuery中children()方法用法实例 jQuery中closest()函数用法实例 jQuery中find()方法用法实例 jQuery中next()方法用法实例 jQuery中nextAll()方法用法实例 jQuery中nextUntil()方法用法实例 jQuery中parent()方法用法实例 jQuery中parents()方法用法实例 jQuery中parentsUntil()方法用法实例 jQuery中prev()方法用法实例 jQuery中prevAll()方法用法实例 jQuery中prevUntil()方法用法实例 jQuery中siblings()方法用法实例 jQuery中add()方法用法实例 jQuery中andSelf()方法用法实例 jQuery中contents()方法用法实例 jQuery中end()方法用法实例 jQuery中append()方法用法实例 jQuery中appendTo()方法用法实例 jQuery中prependTo()方法用法实例 jQuery中insertAfter()方法用法实例 jQuery中insertBefore()方法用法实例 jquery中one()方法的用法实例 jquery事件preventDefault()方法用法实例 jQuery中unwrap()方法用法实例 jQuery中wrapAll()方法用法实例 jQuery中wrapInner()方法用法实例 jQuery中replaceAll()方法用法实例 jQuery中empty()方法用法实例 jQuery中clone()方法用法实例 jQuery中offset()方法用法实例 jQuery中position()方法用法实例 jQuery中scrollTop()方法用法实例 jQuery中scrollLeft()方法用法实例 jQuery中innerHeight()方法用法实例 jQuery中innerWidth()方法用法实例 jQuery中outerHeight()方法用法实例 jQuery中outerWidth()方法用法实例 jQuery中offsetParent()方法用法实例 jQuery中ready事件用法实例 jQuery中on()方法用法实例 jQuery中bind()方法用法实例 jQuery的one()方法用法实例 jQuery中trigger()方法用法实例 jQuery中triggerHandler()方法用法实例 jQuery中unbind()方法用法实例 jQuery中live()方法用法实例 jQuery中die()方法用法实例 jQuery中delegate()方法用法实例 Jquery中find与each方法用法实例 jquery中change()用法实例分析 jquery中filter方法用法实例分析 JQuery中serialize()用法实例分析 jQuery中noConflict()用法实例分析 JQuery中extend的用法实例分析 jQuery中$.extend()用法实例

发布于 2016-10-27 07:15:16 | 181 次阅读 | 评论: 0 | 来源: 网友投递

这篇文章主要介绍了JQuery中extend的用法,实例分析了extend的功能、定义及相关使用技巧,需要的朋友可以参考下

本文实例讲述了JQuery中extend的用法。分享给大家供大家参考。具体分析如下:

extend()函数是jQuery的基础函数之一,作用是扩展现有的对象。extend是我们在写插件的过程中常用的方法,该方法有一些重载原型。$.extend(prop) 用于扩展jQuery对象,可以用于把函数添加到jQuery名称空间中。

一、jQuery.extend函数的源码


jQuery.extend = jQuery.fn.extend = function() {
  var options, name, src, copy, copyIsArray, clone,
    target = arguments[0] || {},//参数目标对象
    i = 1,
    length = arguments.length,//参数长度
    deep = false;//是否为深度复制

  // Handle a deep copy situation
  //如果为深度复制,则目标对象和原对象游标值i,以及深度值都进行更新
  if ( typeof target === "boolean" ) {
    deep = target;
    target = arguments[1] || {};
    // skip the boolean and the target
    i = 2;
  }

  // Handle case when target is a string or something (possible in deep copy)
  //当目标对象的值类型错误,则重置为{}
  if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    target = {};
  }

  // extend jQuery itself if only one argument is passed
  //当参数值长度为1的情况下,目标对象就为jQuery自身
  if ( length === i ) {
    target = this;
    --i;
  }

  for ( ; i < length; i++ ) {
    // Only deal with non-null/undefined values
    if ( (options = arguments[ i ]) != null ) {//忽略空对象
      // Extend the base object
      for ( name in options ) {
        src = target[ name ];
        copy = options[ name ];//存储对象的值

        // Prevent never-ending loop
        if ( target === copy ) {
          continue;
        }

        // Recurse if we're merging plain objects or arrays
         //深度复制只有属性深度多于俩层的对象关系的结构的,如{a:{s:21,age:11}}或{a:['s'=>21,'age'=>11]}
        if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
          if ( copyIsArray ) {//如果是数组对象
            copyIsArray = false;
            clone = src && jQuery.isArray(src) ? src : [];

          } else {//普通对象
            clone = src && jQuery.isPlainObject(src) ? src : {};
          }

          // Never move original objects, clone them
          // 调用自身进行递归复制
          target[ name ] = jQuery.extend( deep, clone, copy );

        // Don't bring in undefined values
        } else if ( copy !== undefined ) {//非深度CP直接覆盖目标属性
          target[ name ] = copy;
        }
      }
    }
  }

  // Return the modified object
  return target;
};

二、Jquery的扩展方法原型是:
  
1、extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:
 
2、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"}

也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。
 
3、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"}}

二、Jquery中extend方法省略dest参数的情况
 
上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:

1、$.extend(src)

该方法就是将src合并到jquery的全局对象中去,如:


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

就是将hello方法合并到jquery的全局对象中。
 
2、$.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命名空间中去。

希望本文所述对大家的jQuery程序设计有所帮助。

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务