Home Web Front-end JS Tutorial Detailed explanation of usage examples of jQuery.extend function

Detailed explanation of usage examples of jQuery.extend function

Jul 09, 2017 pm 04:41 PM
Example usage

JQuery's extend extension method:
Jquery's extension method extend is a commonly used method when we write plug-ins. This method has some overloads Prototype, here, let’s learn about it together.
     1. Jquery’s extension method prototype is:  


##extend(dest,src1,src2,src3.. .);

It means merging src1, src2, src3... into dest, and the return value is the merged dest. It can be seen that this method is modified after merging. The structure of dest. If you want to get the merged result but don’t want to modify the structure of dest, you can use it as follows:


var newSrc=$.extend({},src1,src2,src3. ..)//That is, use "{}" as the dest parameter.

This way you can merge src1, src2, src3... and then return the merged result to newSrc. For example:


var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:" Boy"})

Then the merged result


result={name:"Jerry",age:21,sex :"Boy"}

That is to say, if the later parameter has the same name as the previous parameter, then the later parameter will overwrite the previous parameter value.

# omitting Dest parameter The DEST parameter in the above Extend method prototype can be omitted. If it is omitted, there is only one SRC in this method. Parameters, and merge the src into the
object that calls the extend method, such as:  
1, $.extend(src)
This method is to merge src Merge into the global object of jquery, such as:


$.extend({

hello:function(){alert('hello'); }
});

It is to merge the hello method into the global object of jquery.
 
2.$.fn.extend(src) This method merges src into the jquery instance object, such as:


$.fn.extend({

hello:function(){alert('hello');}
});

  is to merge the hello method into In the jquery instance object.

The following are some commonly used extension examples:


$.extend({net:{}});

This is to extend a net

namespace in the jquery global object.


$.extend($.net,{

hello:function(){alert('hello');}
})

This is to extend the hello method into the previously expanded Jquery net namespace.

 

3. Jquery’s extend method also has an overloaded prototype:


extend(boolean,dest,src1,src2, src3...)

The first parameter boolean represents whether to perform a deep copy. The other parameters are consistent with those introduced before. What is a deep copy? Let’s look at an example:


var result=$.extend( true, {},

{ name: "John", location: {city: "Boston",
county:"USA "} }, { last: "Resig", location: {state: "MA",county:"China"} } );

We can see that there are nested substrings in src1 The object location: {city: "Boston"}, the sub-object location: {state: "MA"} is also nested in src2, the first deep copy parameter is true, then the merged result is:


result={name:"John",last:"Resig",

location:{city:"Boston",state:"MA",county:"China"}}

That is to say, it will also merge the nested sub-objects in src. If the first parameter boolean is false, let’s see what the result of the merger is, as follows:


var result=$.extend( false, {},

{ name: "John", location:{city: "Boston",county:"USA" } },
{ last: "Resig", location: {state: "MA",county:"China"} }
                );


Then the merged result is:


result={name:"John",last:"Resig",location:{state:"MA ",county:"China"}}

The above are some details that $.extend() is often used in projects.

The above is the detailed content of Detailed explanation of usage examples of jQuery.extend function. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1677
14
PHP Tutorial
1279
29
C# Tutorial
1257
24
Analyze the usage and classification of JSP comments Analyze the usage and classification of JSP comments Feb 01, 2024 am 08:01 AM

Classification and Usage Analysis of JSP Comments JSP comments are divided into two types: single-line comments: ending with, only a single line of code can be commented. Multi-line comments: starting with /* and ending with */, you can comment multiple lines of code. Single-line comment example Multi-line comment example/**This is a multi-line comment*Can comment on multiple lines of code*/Usage of JSP comments JSP comments can be used to comment JSP code to make it easier to read

Introduction to Python functions: Usage and examples of abs function Introduction to Python functions: Usage and examples of abs function Nov 03, 2023 pm 12:05 PM

Introduction to Python functions: usage and examples of the abs function 1. Introduction to the usage of the abs function In Python, the abs function is a built-in function used to calculate the absolute value of a given value. It can accept a numeric argument and return the absolute value of that number. The basic syntax of the abs function is as follows: abs(x) where x is the numerical parameter to calculate the absolute value, which can be an integer or a floating point number. 2. Examples of abs function Below we will show the usage of abs function through some specific examples: Example 1: Calculation

Usage of WPSdatedif function Usage of WPSdatedif function Feb 20, 2024 pm 10:27 PM

WPS is a commonly used office software suite, and the WPS table function is widely used for data processing and calculations. In the WPS table, there is a very useful function, the DATEDIF function, which is used to calculate the time difference between two dates. The DATEDIF function is the abbreviation of the English word DateDifference. Its syntax is as follows: DATEDIF(start_date,end_date,unit) where start_date represents the starting date.

Introduction to Python functions: Usage and examples of isinstance function Introduction to Python functions: Usage and examples of isinstance function Nov 04, 2023 pm 03:15 PM

Introduction to Python functions: Usage and examples of the isinstance function Python is a powerful programming language that provides many built-in functions to make programming more convenient and efficient. One of the very useful built-in functions is the isinstance() function. This article will introduce the usage and examples of the isinstance function and provide specific code examples. The isinstance() function is used to determine whether an object is an instance of a specified class or type. The syntax of this function is as follows

How to correctly use the exit function in C language How to correctly use the exit function in C language Feb 18, 2024 pm 03:40 PM

How to use the exit function in C language requires specific code examples. In C language, we often need to terminate the execution of the program early in the program, or exit the program under certain conditions. C language provides the exit() function to implement this function. This article will introduce the usage of exit() function and provide corresponding code examples. The exit() function is a standard library function in C language and is included in the header file. Its function is to terminate the execution of the program, and can take an integer

Detailed explanation and usage introduction of MySQL ISNULL function Detailed explanation and usage introduction of MySQL ISNULL function Mar 01, 2024 pm 05:24 PM

The ISNULL() function in MySQL is a function used to determine whether a specified expression or column is NULL. It returns a Boolean value, 1 if the expression is NULL, 0 otherwise. The ISNULL() function can be used in the SELECT statement or for conditional judgment in the WHERE clause. 1. The basic syntax of the ISNULL() function: ISNULL(expression) where expression is the expression to determine whether it is NULL or

Use CSS Transform to transform elements Use CSS Transform to transform elements Feb 24, 2024 am 10:09 AM

Usage of Transform in CSS The Transform property of CSS is a very powerful tool that can perform operations such as translation, rotation, scaling and tilting of HTML elements. It can dramatically change the appearance of elements and make web pages more creative and dynamic. In this article, we will introduce the various uses of Transform in detail and provide specific code examples. 1. Translate (Translate) Translate refers to moving an element a specified distance along the x-axis and y-axis. Its syntax is as follows: tran

How to use Apple shortcuts How to use Apple shortcuts Feb 18, 2024 pm 05:22 PM

How to use Apple shortcut commands With the continuous development of technology, mobile phones have become an indispensable part of people's lives. Among many mobile phone brands, Apple mobile phones have always been loved by users for their stable systems and powerful functions. Among them, the Apple shortcut command function makes users’ mobile phone experience more convenient and efficient. Apple Shortcuts is a feature launched by Apple for iOS12 and later versions. It helps users simplify their mobile phone operations by creating and executing custom commands to achieve more efficient work and

See all articles