Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery Basic

jQuery Ajax Events

jQuery Ajax Methods

jQuery Keyboard Events

jQuery Keyboard Methods

jQuery Form Events

jQuery Form Methods

jQuery Mouse Event

jQuery Mouse Methods

jQuery Event Object

jQuery Fading

jQuery Document Loading

jQuery Traversing

jQuery Utilities

jQuery Property

jQuery HTML

jQuery CSS

jQuery Miscellaneous

jQuery jQuery.fn.extend() Method

Posted in jQuery Tutorial
Updated on May 14, 2024
By Mari Selvan
👁️ 47 - Views
⏳ 4 mins
💬 1 Comment
jQuery jQuery.fn.extend() Method

Photo Credit to CodeToFun

🙋 Introduction

jQuery provides a robust set of tools for enhancing web development. One of its powerful features is the jQuery.fn.extend() method, which allows developers to extend jQuery's prototype with new methods. This capability enables the creation of reusable plugins and custom functions, enhancing jQuery's functionality to suit specific needs.

In this guide, we will explore the jQuery.fn.extend() method in detail and provide examples to illustrate its usage.

🧠 Understanding jQuery.fn.extend() Method

The jQuery.fn.extend() method is used to add new methods to the jQuery prototype (jQuery.fn), which means any method added using this function will be available to all jQuery objects. This is particularly useful for creating custom methods and plugins that can be called on jQuery objects.

💡 Syntax

The syntax for the jQuery.fn.extend() method is straightforward:

syntax.js
Copied
Copy To Clipboard
jQuery.fn.extend(object)

Parameters:

  • object: An object containing key-value pairs where the key is the name of the new method and the value is the function definition.

📝 Example

  1. Creating a Custom jQuery Method:

    Let's create a custom method called highlight that changes the background color of the selected elements to yellow:

    example.js
    Copied
    Copy To Clipboard
    jQuery.fn.extend({
      highlight: function() {
        return this.css("background-color", "yellow");
      }
    });

    Usage:

    index.html
    Copied
    Copy To Clipboard
    <div class="highlightable">This is a test.</div>
    <div class="highlightable">This is another test.</div>
    <script>
      $(".highlightable").highlight();
    </script>

    This code will change the background color of all elements with the class highlightable to yellow.

  2. Adding Multiple Methods:

    You can add multiple methods at once by passing an object with multiple key-value pairs to jQuery.fn.extend(). For example:

    example.js
    Copied
    Copy To Clipboard
    jQuery.fn.extend({
      highlight: function() {
        return this.css("background-color", "yellow");
      },
      removeHighlight: function() {
        return this.css("background-color", "");
      }
    });

    Usage:

    index.html
    Copied
    Copy To Clipboard
    <div class="highlightable">Highlight me!</div>
    <button id="highlightButton">Highlight</button>
    <button id="removeHighlightButton">Remove Highlight</button>
    <script>
        $("#highlightButton").click(function() {
            $(".highlightable").highlight();
        });
        $("#removeHighlightButton").click(function() {
            $(".highlightable").removeHighlight();
        });
    </script>

    This will add both highlight and removeHighlight methods, allowing toggling of the highlight effect.

  3. Extending jQuery with Parameters:

    Custom methods can also accept parameters to make them more versatile. For instance:

    example.js
    Copied
    Copy To Clipboard
    jQuery.fn.extend({
      highlight: function(color) {
        return this.css("background-color", color);
      }
    });

    Usage:

    index.html
    Copied
    Copy To Clipboard
    <div class="highlightable">Highlight me with color!</div>
    <script>
      $(".highlightable").highlight("lightblue");
    </script>

    This allows specifying different colors for the highlight method.

🎉 Conclusion

The jQuery.fn.extend() method is a powerful tool for extending jQuery's capabilities by adding custom methods to its prototype. This enables the creation of reusable plugins and custom functions, enhancing the flexibility and functionality of jQuery in your projects.

By mastering the use of jQuery.fn.extend(), you can significantly improve the efficiency and reusability of your code, creating more dynamic and interactive web applications.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy