Interesting jQuery Tips and Tricks

Learn, interesting tips and tricks of using jQuery more efficiently and for better results.
Submitted by Pratishtha Saxena, on February 15, 2023

There are various jQuery tricks and tips one might give. Hence, we cannot keep track of each one of them, but practicing those in your work will make you the master of those tricks. Over here we can list a few that makes working with jQuery a lot simpler.

1) Save jQuery Objects in Variable for Reuse

Storing the objects in the declared variable is a good practice that a programmer should follow. When there is a need to create an object, always provide a variable for it. It helps you to reuse it further in other functions if needed. Other than that, you will have a track of the variables that have been declared overall.

$('div#name').each();       // Not Good Practice
var name = $('div#name')    // good Practice
name.each();

2) Use $(this) instead of writing the element name again & again

In jQuery, we have the option to mention the previously selected element as $(this). It means that the last element selected will be mentioned in this selector. Hence, it allows you to escape writing the selector name again and again. Whatever element is selected, $(this) automatically stores that particular element in it.

if ($('div').hide){
	$(this).show();
};

3) Shorthand Method

The shorthand method is the shortcut way of writing or declaring the jQuery initiating function. As we know, when we start writing our jQuery code, we start by $(document).ready(function(){});, but by shorthand function we can directly start without having to write this always.

The $ sign at the start represents that we are working with jQuery specifically.

$(document).ready(function() {
    function myfunction() {
        // ...
    }
});


// Shorthand Method
$(function() {
    // ...
});

4) Checking if an element exists

Whenever there is a need to check whether any particular element that you are looking for exists or not, then here is a way to do it. Over here, we have a property named length which allows us to check the length of the selected element. If the length is either greater than zero or returns true, then we can say that the element exists.

Generally, the length property is used for measuring the length of strings, arrays, etc for mathematical use. But we can make it use this way too.

if ($("div#student").length) {
    // It exists...
}

5) Add/Remove a Class

We have a feature in jQuery that allows us to add or remove any CSS class, or set of classes, using a method. These methods are, namely – addClass(), and removeClass(). The CSS class names can be provided in these methods which will add or remove the respective class to the element. Hence, as this is a very simple feature and makes the web document dynamic, it is widely used by developers.

function myFunction(event) {
    if (event) {
        $("selector").addClass("ClassName");
    } else {
        $("selector").removeClass("Class Name");
    }
}

This whole function can also be written in a shorthand manner which will still perform the same actions on the selector. The shorthand method is shown below,

function myFunction(event) {
    $("selector")[event ? "addClass" : "removeClass"]("ClassName");
}

6) Update the Class

The CSS classes can be added or removed as we have discussed above. Now, one can also update the addition or subtraction of those classes as required at that moment. This is generally preferred using the toggle() method in jQuery.

It allows us to toggle between the classes as true or false. If the class has already been added, toggle() will remove it and vice-versa.

$('selector').toggleClass('ClassName', true / false);

7) Optimize Performance of Complex Selectors

A complex selector can be a set of selectors that have been listed together for similar actions. The main advantage of using complex selectors in your query is that it drastically improves the performance of the document.

Therefore, if possible, we should optimize performance using complex selectors. An example of this is given below, which shows the selector used.

var subset = $("");
$("input[value^='']", subset);

8) Live Event Handlers

By live event handler we can interpret is that it will allow to perform action on the elements when the event occurs. It (live) basically attaches an event handler to the selected element.

The opposite of this method is die() event handler. As the former attaches the event handler, the die() method removes the event handler from the selected element.

These two event handlers are widely used when events are to be attached at the target on he basis of other actions.

$('button#1').live('click', someFunction)
$('button#2').die('click', someFunction);