jQuery.fn.extend( object )

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

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery.fn.extend demo</title>
  6.   <style>
  7. label { display: block; margin: .5em; }
  8.      </style>
  9.   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  10. </head>
  11. <body>
  12.  
  13. <label><input type="checkbox" name="foo"> Foo</label>
  14. <label><input type="checkbox" name="bar"> Bar</label>
  15.  
  16. <script>
  17. jQuery.fn.extend({
  18.   check: function() {
  19.     return this.each(function() { this.checked = true; });
  20.   },
  21.   uncheck: function() {
  22.     return this.each(function() { this.checked = false; });
  23.   }
  24. });
  25.  
  26. // Use the newly created .check() method
  27. $( "input[type='checkbox']" ).check();
  28. </script>
  29.  
  30. </body>
  31. </html>
  1. /*
  2. * 移动端点击事件，防滑
  3. * $(dom).tap([cssRule|callback],callback)
  4. * */
  5. $.fn.tap = function(){
  6.     var a = arguments;
  7.     var isScroll = false;
  8.     $(this).on("touchstart",function(){
  9.         isScroll = false;
  10.     });
  11.     $(this).on("touchmove",function(){
  12.         isScroll = true;
  13.     });
  14.     $(this).on("touchend",function(event){
  15.         if(isScroll)return;
  16.  
  17.         if(typeof a[0] == "function"){
  18.             a[0]();
  19.         }else{
  20.             var current = event.target;
  21.             while(current!= document){
  22.                 if(current.matches(a[0])){
  23.                     a[1].call(current);
  24.                     break;
  25.                 }
  26.                 current = current.parentNode;
  27.             }
  28.         }
  29.     });
  30. };

jQuery.extend()

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

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

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

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

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

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

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

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

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

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

  1. <html>
  2. <head>
  3.   <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  4. </head>
  5. <body>
  6.  
  7. <div id="log"></div>
  8.  
  9. <script>
  10. var object1 = {
  11.   apple: 0,
  12.   banana: {weight: 52, price: 100},
  13.   cherry: 97
  14. };
  15. var object2 = {
  16.   banana: {price: 200},
  17.   durian: 100
  18. };
  19.  
  20. /* merge object2 into object1 */
  21. $.extend(object1, object2);
  22.  
  23. var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
  24.   var arr = [];
  25.   $.each(obj, function(key, val) {
  26.     var next = key + ": ";
  27.     next += $.isPlainObject(val) ? printObj(val) : val;
  28.     arr.push( next );
  29.   });
  30.   return "{ " +  arr.join(", ") + " }";
  31. };
  32.  
  33. $("#log").append( printObj(object1) );
  34. </script>
  35.  
  36. </body>
  37. </html>
  1. <html>
  2. <head>
  3.   <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  4. </head>
  5. <body>
  6.  
  7. <div id="log"></div>
  8.  
  9. <script>
  10. var object1 = {
  11.   apple: 0,
  12.   banana: {weight: 52, price: 100},
  13.   cherry: 97
  14. };
  15. var object2 = {
  16.   banana: {price: 200},
  17.   durian: 100
  18. };
  19.  
  20. /* merge object2 into object1, recursively */
  21. $.extend(true, object1, object2);
  22.  
  23. var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
  24.   var arr = [];
  25.   $.each(obj, function(key, val) {
  26.     var next = key + ": ";
  27.     next += $.isPlainObject(val) ? printObj(val) : val;
  28.     arr.push( next );
  29.   });
  30.   return "{ " +  arr.join(", ") + " }";
  31. };
  32.  
  33. $("#log").append( printObj(object1) );
  34. </script>
  35.  
  36. </body>
  37. </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. 前三章 man手册 查看文件

    1 – 3章 1.1 man手册: 分1 - 9个区域,可以认为是一个一个小节 把man手册理解为一本书 第一节:可执行程序或shell命令 第二节:系统调用 第三节:库调用 第四节:特殊文件 第五节 ...

  2. [整理]zepto的初次使用

    http://www.css88.com/doc/zeptojs_api/ http://chaoskeh.com/blog/some-experience-of-using-zepto.html

  3. JavaScript1.6数组新特性和JQuery的几个工具方法

    JavaScript 1.6 引入了几个新的Array 方法,具体的介绍见:New in JavaScript 1.6 .这些方法已经被写进了ECMA262 V5.现代浏览器(IE9/Firefox/ ...

  4. HTML5 CSS Reset

    最近在学习HTML和CSS,发现一个不错的模板,放于此处. /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Au ...

  5. python爬虫：抓取下载电影文件，合并ts文件为完整视频

    目标网站:https://www.88ys.cc/vod-play-id-58547-src-1-num-1.html 反贪风暴4 对电影进行分析 我们发现,电影是按片段一点点加载出来的,我们分别抓取 ...

  6. testng运行失败，继续执行

    1.重写断言类 public class Verify { public static StringBuffer verificationErrors= new StringBuffer();; pu ...

  7. 使用crontab命令添加计划任务

    Ubuntu 16.04, 计划任务 就是 有(时间)计划地执行(做)任务,有计划 包括 定时执行(在哪些时间点执行任务).按照周期执行(每隔多少时间执行任务). 那么,什么是任务呢?就是 自己想要干 ...

  8. 探秘Java类加载

    Java是一门面向对象的编程语言. 面向对象以抽象为基础,有封装.继承.多态三大特性. 宇宙万物,经过抽象,均可归入相应的种类.不同种类之间,有着相对井然的分别. Java中的类,便是基于现实世界中的 ...

  9. CSS3实现各种表情

    CSS3实现各种表情 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></title ...

  10. Zookeeper的java客户端API使用方法（五）

    前面几篇博文,我们简单的介绍了一下zookeeper,如何安装zookeeper集群,以及如何使用命令行等.这篇博文我们重点来看下Zookeeper的java客户端API使用方式. 创建会话 客户端可 ...