Code examples that modify or extend jQuery native methods
This article mainly introduces code examples for modifying or extending jQuery native methods. This article uses an example of extending jquery native method val to explain how to modify or extend jquery native methods. Friends who need it can refer to it
Modify or extend jQuery method code examples:
There is no doubt that jQuery is a powerful and easy-to-use class library.
Its wide application can confirm the above point of view, but as the saying goes, no one is perfect, and no gold is perfect. The same is true for jQuery. It cannot complete our tasks perfectly at any time or occasion, so In the future, the original methods of jQuery will need to be extended and modified, but the best method still has the original functions.
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$.prototype.val = function (base) {
return function () {
var s = this;
var a = "data-property";
var p = s.attr(a);
var isset = arguments.length > 0;
var v = isset ? arguments[0] : null;
if (isset&&typeof(base)=="function") {
base.call(s, v);
}
else {
v = base.call(s);
}
if (p) {
if (isset) {
s.attr(p, v);
return s
}
else {
return s.attr(p)
}
}
else {
if (!s.is(":input")){
if (isset) {
s.text(v); return s;
}
else {
return s.text();
}
}
else {
return isset ? s : v;
}
}
}
}($.prototype.val);
$(document).ready(function(){
$("#show").html($("#lbl").val()+"<br>"+$("#txt").val());
})
</script>
</head>
<body>
<span id="lbl">php中文网</span>
<input type="text" id="txt" value="softwhy.com" />
<input type="checkbox" value="antzone" />
<p id="show"></p>
</body>
</html>The above code is undoubtedly an extension of jQuery’s val() method. Here is an introduction to its implementation process.
Code comments:
1. $.prototype.val = function (base) {}(($.prototype.val), modify jQuery’s original val() method, and use closure here In the package method, the parameter passed is the original val() method to maintain the function of the original val() method. 2. return function (){}, returns a function object. >3. var s = this, assign the reference of this to variable s, where this points to the jQuery object instance. 4. var a = "data-property", declare a variable and assign a value. , more content about it will be introduced later.
5. var p = s.attr(a). In fact, data-property is a custom attribute on the label, so this code is to obtain the value of this attribute. .
6. var isset = arguments.length > 0, determine whether the modified val() method passes parameters.
7. var v = isset ? arguments[0]: null, if a parameter is passed, the first parameter will be obtained, and the others will be ignored. 8. if (isset&&typeof(base)=="function") { base.call(s, v);}, If parameters are passed and the base parameter is a function, then the base function is called to set the element
The above is the entire content of this chapter. For more related tutorials, please visit
jQuery video tutorial! >
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
1386
52
How to change the personal name in the group on DingTalk_How to modify the personal name in the group on DingTalk
Mar 29, 2024 pm 08:41 PM
1. First open DingTalk. 2. Open the group chat and click the three dots in the upper right corner. 3. Find my nickname in this group. 4. Click to enter to modify and save.
Extensions and third-party modules for PHP functions
Apr 13, 2024 pm 02:12 PM
To extend PHP function functionality, you can use extensions and third-party modules. Extensions provide additional functions and classes that can be installed and enabled through the pecl package manager. Third-party modules provide specific functionality and can be installed through the Composer package manager. Practical examples include using extensions to parse complex JSON data and using modules to validate data.
Can Douyin Blue V change its name? What are the steps to change the name of corporate Douyin Blue V account?
Mar 22, 2024 pm 12:51 PM
Douyin Blue V certification is the official certification of a company or brand on the Douyin platform, which helps enhance brand image and credibility. With the adjustment of corporate development strategy or the update of brand image, the company may want to change the name of Douyin Blue V certification. So, can Douyin Blue V change its name? The answer is yes. This article will introduce in detail the steps to modify the name of the enterprise Douyin Blue V account. 1. Can Douyin Blue V change its name? You can change the name of Douyin Blue V account. According to Douyin’s official regulations, corporate Blue V certified accounts can apply to change their account names after meeting certain conditions. Generally speaking, enterprises need to provide relevant supporting materials, such as business licenses, organization code certificates, etc., to prove the legality and necessity of changing the name. 2. What are the steps to modify the name of corporate Douyin Blue V account?
Win10 sleep time modification tips revealed
Mar 08, 2024 pm 06:39 PM
Win10 Sleep Time Modification Tips Revealed As one of the currently widely used operating systems, Windows 10 has a sleep function to help users save power and protect the screen when not using the computer. However, sometimes the default sleep time does not meet the needs of users, so it is particularly important to know how to modify the Win10 sleep time. This article will reveal the tips for modifying the sleep time of Win10, allowing you to easily customize the system’s sleep settings. 1. Modify Win10 sleep time through “Settings” First, the simplest fix
How to modify the address location of published products on Xianyu
Mar 28, 2024 pm 03:36 PM
When publishing products on the Xianyu platform, users can customize the geographical location information of the product according to the actual situation, so that potential buyers can more accurately grasp the specific location of the product. Once the product is successfully put on the shelves, there is no need to worry if the seller's location changes. The Xianyu platform provides a flexible and convenient modification function. So when we want to modify the address of a published product, how do we modify it? This tutorial guide will provide you with a detailed step-by-step guide. I hope it can help. Everyone! How to modify the release product address in Xianyu? 1. Open Xianyu, click on what I published, select the product, and click Edit. 2. Click the positioning icon and select the address you want to set.
How to modify the greeting content for boss direct recruitment
Mar 01, 2024 pm 03:40 PM
In the job recruitment software called Boss Direct Jobs, users can personalize their greetings to better demonstrate their personality and job search intentions. However, sometimes the default greeting terms are rather mechanical and rigid. Many users want to make their own changes but don’t know where to set them. So this tutorial guide will introduce the detailed modification steps for players who want to know more. Come and follow this article to find out! How to change the answer when a boss directly hires someone to say hello: [Boss directly hires]-[My]-[Settings Icon]-[Greeting Language]. Specific steps: 1. First, we click on the boss direct recruitment software. After entering the homepage, we click [My] in the lower right corner; 2. Then when we come to the My page, we can see the relevant data.
Go Language Programming Guide: Implementation of Modifying Hosts File
Mar 07, 2024 am 10:51 AM
Title: Go Language Programming Guide: Implementation of Modifying the Hosts File In the daily software development process, we often encounter situations where we need to modify the hosts file in the operating system. The Hosts file is a text file without extension used to map IP addresses and host names. It is usually used to set up domain name resolution locally. In this article, we will introduce how to use the Go language to implement the function of modifying the hosts file of the operating system, and give specific code examples. First, we need to create a G that can modify the hosts file
How do the types of PHP function return values relate to the interoperability of PHP extensions?
Apr 15, 2024 pm 09:06 PM
PHP function return value types can be expressed as type description syntax, which clearly specifies the return value type of each function. Understanding return value types is critical to creating extensions that are compatible with the PHP core engine, avoiding unexpected conversions, improving efficiency, and enhancing code readability. Specifically, extension functions can define a return value type so that the PHP engine can optimize code execution based on that type and allow developers to explicitly handle the return value. In practice, extension functions can return PHP objects, and PHP code can handle the returned results according to the return value type.
