jQuery.fn.extend( object )

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

jQuery.fn.extend()方法继承了jQuery原型($.fn)对象，以提供jQuery原型新的方法，可以链式调用jQuery()函数。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery.fn.extend demo</title>

  <style>

label { display: block; margin: .5em; }

     </style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>

<body>

<label><input type="checkbox" name="foo"> Foo</label>

<label><input type="checkbox" name="bar"> Bar</label>

<script>

jQuery.fn.extend({

  check: function() {

    return this.each(function() { this.checked = true; });

  },

  uncheck: function() {

    return this.each(function() { this.checked = false; });

  }

});

// Use the newly created .check() method

$( "input[type='checkbox']" ).check();

</script>

</body>

</html>
/*

* 移动端点击事件，防滑

* $(dom).tap([cssRule|callback],callback)

* */

$.fn.tap = function(){

    var a = arguments;

    var isScroll = false;

    $(this).on("touchstart",function(){

        isScroll = false;

    });

    $(this).on("touchmove",function(){

        isScroll = true;

    });

    $(this).on("touchend",function(event){

        if(isScroll)return;

        if(typeof a[0] == "function"){

            a[0]();

        }else{

            var current = event.target;

            while(current!= document){

                if(current.matches(a[0])){

                    a[1].call(current);

                    break;

                }

                current = current.parentNode;

            }

        }

    });

};

jQuery.extend()

jQuery.extend( [deep]target [, object1 ] [, objectN ] )

 将两个或更多对象的内容合并到第一个对象。

如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。

请记住，目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

var object = $.extend({}, object1, object2);

在默认情况下，通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。可以通过检查下面例子中 banana 的值，就可以了解这一点。然而，如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。

警告:不支持第一个参数传递 false 。

未定义的属性不会被复制。然而，从对象原型的继承属性将被复制。如果属性（Properties）是一个通过构造函数new MyCustomObject(args)定义的，或JavaScript中内置类型，如Date 或 RegExp，是不会重新创建的，并且将被当作普通的对象出在返回的对象或数组中。

若设置了 deep 参数，对象和数组也会被合并进来，但是对象包裹的原始类型，比如String, Boolean, 和 Number是不会被合并进来的。

若要满足其它不同于该行为的需求，编写自定义的扩展方法代替。

<html>

<head>

  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

</head>

<body>

<div id="log"></div>

<script>

var object1 = {

  apple: 0,

  banana: {weight: 52, price: 100},

  cherry: 97

};

var object2 = {

  banana: {price: 200},

  durian: 100

};

/* merge object2 into object1 */

$.extend(object1, object2);

var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {

  var arr = [];

  $.each(obj, function(key, val) {

    var next = key + ": ";

    next += $.isPlainObject(val) ? printObj(val) : val;

    arr.push( next );

  });

  return "{ " +  arr.join(", ") + " }";

};

$("#log").append( printObj(object1) );

</script>

</body>

</html>
<html>

<head>

  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

</head>

<body>

<div id="log"></div>

<script>

var object1 = {

  apple: 0,

  banana: {weight: 52, price: 100},

  cherry: 97

};

var object2 = {

  banana: {price: 200},

  durian: 100

};

/* merge object2 into object1, recursively */

$.extend(true, object1, object2);

var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {

  var arr = [];

  $.each(obj, function(key, val) {

    var next = key + ": ";

    next += $.isPlainObject(val) ? printObj(val) : val;

    arr.push( next );

  });

  return "{ " +  arr.join(", ") + " }";

};

$("#log").append( printObj(object1) );

</script>

</body>

</html>

jQuery.fn.extend()和jQuery.extend()的更多相关文章

  1. jQuery源码-jQuery.fn.attr与jQuery.fn.prop

    jQuery.fn.attr.jQuery.fn.prop的区别 假设页面有下面这么个标签,$('#ddd').attr('nick').$('#ddd').prop('nick')分别会取得什么值? ...

  2. jQuery.fn.attr与jQuery.fn.prop

    jQuery.fn.attr与jQuery.fn.prop jQuery.fn.attr.jQuery.fn.prop的区别 假设页面有下面这么个标签,$('#ddd').attr('nick').$ ...

  3. jQuery 源码解析二：jQuery.fn.extend=jQuery.extend 方法探究

    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...

  4. jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方 ...

  5. jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍

    这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: (function( win ...

  6. jQuery中，$.extend，$obj.extend和$.fn.extend三者的区别

    jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...

  7. jQuery.fn.extend()

    jQuery.fn.extend() extend()方法是定义在jQuery构造函数的prototype对象上面的一个方法,这样做就能使得所有jQuery对象的实例都能共享这个方法.jQuery构造 ...

  8. jQuery.extend()、jQuery.fn.extend()扩展方法具体解释

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/dreamsunday/article/details/25193459 jQuery自己定义了jQu ...

  9. jQuery中jQuery.extend() 和 jQuery.fn.extend()的功能和区别

    昨天下午和今天上午断断续续的一直在看jQuery中jQuery.extend() 和 jQuery.fn.extend()两个函数的功能及区别,现在自认为是掌握的差不多了.好记性不如烂笔头,这里一方面 ...

  10. 记jQuery.fn.show的一次踩坑和问题排查

    最近很少已经很少用jQuery,因为主攻移动端,常用Zepto,其实很多细节和jQuery并不一样.最近又无意中接触到了PC的需求和IE6, 使用了jQuery,刚好踩坑了,特意记录一下. 本文内容如 ...

随机推荐

  1. FFmpeg编码扩展之————编码库的扩展（libfdk-aac）

    ffmpeg windows版没有libfdk-acc 请求该地址下载:http://tmod.nmm-hd.org/FFmpeg/

  2. Jquery教你写一个简单的轮播.

    这个我表示写的不咋地-_-//,但是胜在简单,可优化性不错. 实际上我本来想写个复杂点的结构的,但是最近忙成狗了!!!!所以大家就讲究着看吧 HTML结构 <div class="ba ...

  3. php银行卡校验

    前言银行金卡,维萨和万事达.银联品牌,如果是贷记卡或准贷记卡,一定为16位卡号.而借记卡可以16-19位不等.美国运通卡则不论金卡或是白金卡.普通卡,都是15位卡号.16-19 位卡号校验位采用 Lu ...

  4. 由于找不到MSVCP20.dll，无法继续执行代码

    系统:win10 专业版,刚升级win10没几天 mysql 5.7.21 解压安装,初始化时报错,错误如图: 一.查找错误原因 参考:MySQL安装使用遇到的问题, 找到微软中文官方网站,搜索 ms ...

  5. 如何使用gifsicle压缩gif图片

    最近我写了一些关于如何将各种形式的多媒体格式相互转换的文章,特别是GIF动图方面的,比如如何将小视频转换成GIF动图或将GIF动图转换成视频,有很多像ImageMagick,ffmpeg这样的工具帮助 ...

  6. Useful Online Resources for New Hackers

    出处:https://www.hackerone.com/blog/resources-for-new-hackers HackerOne喜欢花时间与活跃的黑客和有兴趣学习如何破解的人交谈. 就在上周 ...

  7. python3之模块psutil系统性能信息

    psutil是个跨平台库,能够轻松实现获取系统运行的进程和系统利用率,包括CPU.内存.磁盘.网络等信息. 它主要应用于信息监控,分析和限制系统资源及进程的管理.它实现了同等命令命令行工具提供的功能, ...

  8. 大数据系列之并行计算引擎Spark部署及应用

    相关博文: 大数据系列之并行计算引擎Spark介绍 之前介绍过关于Spark的程序运行模式有三种: 1.Local模式: 2.standalone(独立模式) 3.Yarn/mesos模式 本文将介绍 ...

  9. 转：Vue-cli proxyTable 解决开发环境的跨域问题

    转:http://www.jianshu.com/p/95b2caf7e0da 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了 ...

  10. vue里面使用Velocity.js

    英文文档:http://velocityjs.org/ https://github.com/julianshapiro/velocity 中文手册(教程):http://www.mrfront.co ...