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. <dl>

    定义列表 自定义列表不仅仅是一列项目,而是项目及其注释的组合. 自定义列表以 <dl> 标签开始.每个自定义列表项以 <dt> 开始.每个自定义列表项的定义以 <dd&g ...

  2. vim下如何去掉windows编辑的文件中的^M

    可以去掉^M, 例如: 在终端下敲命令: dos2unix a.c 直接转换成unix格式,这样就可以去掉^M •$dos2unix filename •vim filename :%s/^M$//g ...

  3. 使用 CasperJS 构建 Web 爬虫

    转载:https://www.oschina.net/translate/building-your-own-web-scraper-in-nodejs 从你的应用中收集数据有时候可能有点困难和艰辛. ...

  4. oracle任务job

    1)创建测试表 1 create table test1(a date); 2)创建存储过程 1 2 3 4 5 create or replace procedure myproc as begin ...

  5. sublime sftp 打开远程文件夹

    2014-04-29 13:19:09 总结: 本文介绍两种方法,推荐第二种方法(samba+windows映射) 先贴出sublime打开远程(Linux)目录所需的配置文件(sublime是通过s ...

  6. 解决urbuntu桌面本客户端输入ll command not found

    用桌面版的urbuntu系统,打开客户端输入ll,报错如下 于是度娘,解决方案:可以作如下修改:打开 ~/.bashrc 找到 #alias ll=’ls -l’,去掉前面的#就可以了.(关闭原来的终 ...

  7. mapreduce的组件介绍

    第一部分:重要的组件 Combiner •什么是Combiner •combine函数把一个map函数产生的<key,value>对(多个key, value)合并成一个新的<key ...

  8. java 多重继承

    接口不仅仅只是一种更纯粹形式的抽象类,它的目标比这更高,因为接口是根本没有任何具体实现的--也就是说,没有任何与接口相关的存储,因此也就无法阻止多个接口的组合, 在导出类中,不强制要求必须有一个抽象的 ...

  9. ***PHP 遍历数组的方法foreach

    foreach  http://php.net/manual/zh/control-structures.foreach.php (PHP 4, PHP 5) foreach 语法结构提供了遍历数组的 ...

  10. Git(四)Git的分支管理

    一. 创建合并分支原理 在我们每次的提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD指针严格来说不是指 ...