点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

jQuery中extend的使用方法

来源：动视网责编：小采时间：2020-11-27 19:56:54

jQuery中extend的使用方法

jQuery中extend的使用方法:本篇文章给大家分享的是jQuery中extend的使用方法的操作详解，内容挺不错的，希望可以帮助到有需要的朋友方法介绍jQuery 的 API 手册中，extend 方法挂载在 jQuery 和 jQuery.fn 两个不同的对象上，但在 jQuery 内部代码实现的是相同的，只是功能各不

推荐度：

点击下载本文 文档为doc格式

导读jQuery中extend的使用方法:本篇文章给大家分享的是jQuery中extend的使用方法的操作详解，内容挺不错的，希望可以帮助到有需要的朋友方法介绍jQuery 的 API 手册中，extend 方法挂载在 jQuery 和 jQuery.fn 两个不同的对象上，但在 jQuery 内部代码实现的是相同的，只是功能各不

本篇文章给大家分享的是jQuery中extend的使用方法的操作详解，内容挺不错的，希望可以帮助到有需要的朋友

方法介绍

jQuery 的 API 手册中，extend 方法挂载在 jQuery 和 jQuery.fn 两个不同的对象上，但在 jQuery 内部代码实现的是相同的，只是功能各不相同。

先看看官方给出的解释：

jQuery.extend Merge the contents of two or more objects together into the first object. 把两个或者多个对象合并到第一个对象当中；

jQuery.fn.extend Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods. 把对象挂载到 jQuery 的 prototype 上以扩展一个新的 jQuery 实例方法。

虽然官方对 jQuery.extend 的扩展方法功能只字未提，但是它也同样具有扩展 jQuery 类方法的功能。

合并对象

首先，我先来介绍一下 extend 函数在合并对象方面的用法。

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

合并 object1 ... objectN 到 target 对象，如果只有一个参数，则该 target 对象会被合并到 jQuery 对象中。

var obj1 = {
 name: 'Tom',
 age: 21
}

var obj2 = {
 name: 'Jerry',
 sex: 'boy'
}

$.extend(obj1, obj2); // {name: "Jerry", age: 21, sex: "boy"}

obj1 // {name: "Jerry", age: 21, sex: "boy"}
obj2 // {name: "Jerry", sex: "boy"}

上述代码展示的是将 obj2 对象合并到 obj1 对象中，这种方法会改变 obj1 对象的结构。如果你不想改变合并目标对象的结构，你可以这么做。

var obj1 = {
 name: 'Tom',
 age: 21
}

var obj2 = {
 name: 'Jerry',
 sex: 'boy'
}

$.extend({}, obj1, obj2); // { name: "Jerry", age: 21, sex: "boy" }

obj1 // { name: "Tom", age: 21 }
obj2 // { name: "Jerry", sex: "boy" }

深浅拷贝

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

和上面的讲述的不同的是，该方法多了一个类型为 boolean 的 [deep] 传参，当其为 true 时，将 object1 , objectN 深度复制后合并到 target 中。

首先，我们理解一下什么叫做深度复制。看看其和浅度复制有什么区别。

var obj1 = {
 name: "John",
 location: {
 city: "Boston",
 county: "USA"
 }
}

var obj2 = {
 last: "Resig",
 location: {
 state: "MA",
 county: "China"
 }
}

$.extend(false, {}, obj1, obj2); // { name: "John", last: "Resig", location: { state: "MA", county: "China" }}

$.extend(true, {}, obj1, obj2); // { name: "John", last: "Resig", location: { city: "Boston", state: "MA", county: "China" }}

由此可见，执行深度复制会递归遍历每个对象中含有复杂对象（如：数组、函数、json对象等）的属性值进行复制，而且浅度复制便不会这么做。

方法扩展

上述的 extend 方法中的 target 参数是可以省略的。如果省略了，则该方法就只能传入一个 object 参数，该方法功能是将该 object 合并到调用 extend 方法的对象中。

我们通常会使用这种方式来对 jQuer进行一些方法上的扩展。

引子

jQurey 提供了两种方法扩张方式，分别为jQuery.fn.extend(object)和jQuery.extend(object).

想要搞清楚两种扩展方式之间的区别的话，先要了解什么是jQuery.fn.

本猿参考了 jQuery 的源码，发现其中玄机：

jQuery.fn = jQuery.prototype = {　　　
 init: function(selector, context) {
 // ...
 };
}

jQuery.fn = jQuery.prototype这句代码明确指出jQuery.fn指代的就是 jQuery 的原型。

其次，我们要引入两个概念类方法和实例方法。

类方法是直接可以使用类引用，不需要实例化就可以使用的方法。一般在项目中类方法都是被设置为工具类使用；

实例方法必须先创建实例，然后才能通过实例调用该实例方法。

jQuery可以看做是这个封装得非常好的类，而我们可以使用jQuery选择器来创建 jQuery 的实例。比如：使 id 选择器$('#btn')来创建一个实例。

区别

jQuery.extend(object)相当于对类方法的扩展。

jQuery.extend({
 /* 返回两个元素中较小的值 */
 min: function(a, b) {
 return a < b ? a : b;
 },
 /* 返回两个元素中较大的值 */
 max: function(a, b) {
 return a > b ? a : b;
 }
});

jQuery.min(2, 3); // 2 
jQuery.max(4, 5); // 5

jQuery.fn.extend(object)是对jQuery.prototype上的扩展。

jQuery.fn.extend = jQuery.prototype.extend

这种方式相当对实例方法的扩展。

举个栗子：
开发一个简单的小功能，使用该方法可以使选定元素内的文字变红。

$.fn.extend({
 setRed: function() {
 $(this).css("color", "red");
 }
});

$('.tip').setRed();

$(".tip")创建了一个jQuery实例，通过它可以调用成员方法setRed.

上述代码可以实现预想的扩展，但最好返回this 以满足 jQuery 链式操作的需要。

改良之后，代码如下：

$.fn.extend({
 red: function() {
 return $(this).css("color", "red");
 }
});

jQuery中extend的使用方法

推荐度：

点击下载本文 文档为doc格式

标签：方法使用使用方法

热门焦点

jQuery中extend的使用方法

jQuery中extend的使用方法

本篇文章给大家分享的是jQuery中extend的使用方法的操作详解，内容挺不错的，希望可以帮助到有需要的朋友

方法介绍

深浅拷贝

方法扩展

引子

区别

jQuery中extend的使用方法

最新推荐

猜你喜欢

热门推荐