jQuery custom function application and parsing
This time I will bring you jQueryCustom functionApplication and analysis, what are the Notes when using jQuery custom function, the following is a practical case, let’s take a look.
jQuery custom function
1. How to extend jQuery functions?
jQuery has two kinds of custom function extensions: one is class-level function development, which is equivalent to treating jQuery as a class and extending functions to the class itself, also called global function. jQuery's global functions are functions that belong to the jQuery namespace. The other is object-level function development, which is to add methods to the objects generated by the jQuery selector. The following is a detailed description of the development of the two functions.
1). Global function development:
The most direct understanding of class-level plug-in development is to add class methods to the jQuery class, which can be understood as adding static methods. A typical example is the jQuery.AJAX() function, which is defined in the jQuery namespace. Plug-in development at the class level can be extended in the following forms:
a. Add a new global function
To add a global function, we only need to define it as follows:
jQuery.test = function() {
alert(‘This is a test!!!’);
}; Then by calling $.test(); can be run.
b. Add multiple global functions
To add multiple global functions, you can use the following definition:
jQuery.test = function() {
alert(‘This is a test!!!’);
};
jQuery.test1 = function() {
alert(‘This is a test1!!!’);
};The calling method is the same as above.
c. Use jQuery.extend(object)
jQuery.extend({
test:function() {
alert(‘This is a test!!!’);
},
test1: function() {
alert(‘This is a test1!!!’);
},
add:function(a,b){
return a+b;
}
});2). Object-level function development:
Object-level function development can be done in the following two ways
a.
(function(){
.fn.extend({
sayHello:function(){
alert(‘sayHello’);
}
}) ;
})(jQuery);Note: This method can also be defined directly using jQuery.fn.extend. This is written to limit the dollar sign to a namespace. You can continue to use this symbol during the definition process to prevent $ from other libraries. Symbol conflict, no other effect.
b. Accept options parameters to control the behavior of the plug-in
When a custom function needs to pass many parameters, there are too many parameters and poor readability. We can consider passing an object, for example, We need to define a function that sets the background color and text color for p. We can write it like this:
$.fn.extend({
setColor:function(options,callback){
var defaults = {
fontcolor: ‘red’,
background: ‘yellow’
};
$.extend(defaults, options); //这句话是将default和options合并成一个对象
//设置样式
console.log(this);
$(this).css('background-color',defaults.background);
$(this).css('color',defaults.fontcolor);
}
}) ;Call the function test code:
var options={
fontcolor: ‘blue’,
background: ‘red’
};
$(function(){
$(".table").setColor(options);
});We will see that the table background is red and the fonts are blue color. 
2. Analysis Summary
In jQuery’s API manual, we see that extend is actually two different methods mounted on jQuery and jQuery.fn, although jQuery inside jQuery .extend() and jQuery.fn.extend() are implemented with the same code, but their functions are different. Official explanation:
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 instance method)
It can be seen that jQuery has static methods and instance methods, so jQuery.extend() and jQuery.fn.extend() The difference is that one is used to extend static methods and the other is used to extend instance methods.
jQuery custom part source code is as follows:
jQuery.extend = jQuery.fn.extend = function(obj){
//obj是传递过来扩展到this上的对象
var target=this;
for (var name in obj){
//name为对象属性
//copy为属性值
copy=obj[name];
//防止循环调用
if(target === copy) continue;
//防止附加未定义值
if(typeof copy === ‘undefined’) continue;
//赋值
target[name]=copy;
}
return target;
}JavaScript methods are also objects, so the so-called extension function is to extend new objects to jQuery.extend and jQuery.fn.extend. Attributes, formal parameters are our custom functions, which will eventually be copied and returned as the target object, and merged into the jQuery.extend object, or jQuery.fn.extend object, which is essentially equivalent to adding methods or methods to the jQuery class itself. Add methods to the prototype object of the jQuery object.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to use jquery’s paging plug-in
How to create a magnifying glass effect for JD product details
How to achieve the ball beating effect with javascript
The above is the detailed content of jQuery custom function application and parsing. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Detailed explanation of Oracle error 3114: How to solve it quickly
Mar 08, 2024 pm 02:42 PM
Detailed explanation of Oracle error 3114: How to solve it quickly, specific code examples are needed. During the development and management of Oracle database, we often encounter various errors, among which error 3114 is a relatively common problem. Error 3114 usually indicates a problem with the database connection, which may be caused by network failure, database service stop, or incorrect connection string settings. This article will explain in detail the cause of error 3114 and how to quickly solve this problem, and attach the specific code
The operation process of edius custom screen layout
Mar 27, 2024 pm 06:50 PM
1. The picture below is the default screen layout of edius. The default EDIUS window layout is a horizontal layout. Therefore, in a single-monitor environment, many windows overlap and the preview window is in single-window mode. 2. You can enable [Dual Window Mode] through the [View] menu bar to make the preview window display the playback window and recording window at the same time. 3. You can restore the default screen layout through [View menu bar>Window Layout>General]. In addition, you can also customize the layout that suits you and save it as a commonly used screen layout: drag the window to a layout that suits you, then click [View > Window Layout > Save Current Layout > New], and in the pop-up [Save Current Layout] Layout] enter the layout name in the small window and click OK
Parsing Wormhole NTT: an open framework for any Token
Mar 05, 2024 pm 12:46 PM
Wormhole is a leader in blockchain interoperability, focused on creating resilient, future-proof decentralized systems that prioritize ownership, control, and permissionless innovation. The foundation of this vision is a commitment to technical expertise, ethical principles, and community alignment to redefine the interoperability landscape with simplicity, clarity, and a broad suite of multi-chain solutions. With the rise of zero-knowledge proofs, scaling solutions, and feature-rich token standards, blockchains are becoming more powerful and interoperability is becoming increasingly important. In this innovative application environment, novel governance systems and practical capabilities bring unprecedented opportunities to assets across the network. Protocol builders are now grappling with how to operate in this emerging multi-chain
Analysis of the meaning and usage of midpoint in PHP
Mar 27, 2024 pm 08:57 PM
[Analysis of the meaning and usage of midpoint in PHP] In PHP, midpoint (.) is a commonly used operator used to connect two strings or properties or methods of objects. In this article, we’ll take a deep dive into the meaning and usage of midpoints in PHP, illustrating them with concrete code examples. 1. Connect string midpoint operator. The most common usage in PHP is to connect two strings. By placing . between two strings, you can splice them together to form a new string. $string1=&qu
How to customize x-axis and y-axis in excel? (How to customize excel axis scale)
Mar 14, 2024 pm 02:10 PM
In an excel table, sometimes you may need to insert coordinate axes to see the changing trend of the data more intuitively. Some friends still don’t know how to insert coordinate axes in the table. Next, I will share with you how to customize the coordinate axis scale in Excel. Coordinate axis insertion method: 1. In the excel interface, select the data. 2. In the insertion interface, click to insert a column chart or bar chart. 3. In the expanded interface, select the graphic type. 4. In the right-click interface of the table, click Select Data. 5. In the expanded interface, you can customize it.
Analysis of new features of Win11: How to skip logging in to Microsoft account
Mar 27, 2024 pm 05:24 PM
Analysis of new features of Win11: How to skip logging in to a Microsoft account. With the release of Windows 11, many users have found that it brings more convenience and new features. However, some users may not like having their system tied to a Microsoft account and wish to skip this step. This article will introduce some methods to help users skip logging in to a Microsoft account in Windows 11 and achieve a more private and autonomous experience. First, let’s understand why some users are reluctant to log in to their Microsoft account. On the one hand, some users worry that they
Apache2 cannot correctly parse PHP files
Mar 08, 2024 am 11:09 AM
Due to space limitations, the following is a brief article: Apache2 is a commonly used web server software, and PHP is a widely used server-side scripting language. In the process of building a website, sometimes you encounter the problem that Apache2 cannot correctly parse the PHP file, causing the PHP code to fail to execute. This problem is usually caused by Apache2 not configuring the PHP module correctly, or the PHP module being incompatible with the version of Apache2. There are generally two ways to solve this problem, one is
How to tell if a jQuery element has a specific attribute?
Feb 29, 2024 am 09:03 AM
How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute
