Despite its age, jQuery is still a popular library for manipulating the DOM.
In this article, we’ll look at some tips for working with jQuery.
Get Class List for Element with jQuery
To get the class list for an element with jQuery, we can get the class attribute of an element and the split the class list string by any whitespace.
To do that, we can write:
$(element).attr("class").split(/s+/);
We get the element and get the class attribute with attr .
Then we call split with /s+/ which matches any whitespace.
To make our lives easier, we can use the classList property.
We can do that by getting the DOM element.
For instance, we can write:
$(element)[0].classList
We just get the classList property to get the list of classes.
The DOM element is accessed by the index.
Delay the Keyup Handler Until the User Stops Typing
We can make our own function that takes a callback that calls setTimeout with the callback that we pass in as the callback to delay running the callback.
For instance,e we can write:
const delay = (fn, ms) => {
let timer = 0
return function(...args) {
clearTimeout(timer)
timer = setTimeout(fn.bind(this, ...args), ms || 0)
}
}
We created the delay function, which takes the callback that we want to run, which is fn .
ms is the delay that we want to delay duration that we can to have before running the fn callback.
We have the timer that returns a function that takes some arguments that we can pass into the fn callback.
We also set the value of this to the element that we call keyup on by passing this as the first argument of bind .
In the function we return, we call clearTimeout on the timer if there is one set.
We’ve to return a traditional function so that we get the right value of this , which is the element we’re listening to the keyup event for.
And then we call setTimeout with fn with the value of this we described and the arguments we pass in.
To use it, we can write:
<input id="input" type="text" placeholder="enter your name"/>
</label>
Then we can write:
$('#input').keyup(delay(function (e) {
console.log(this.value);
}, 1500));
We get the input with ID input with jQuery.
Then we call keyup to with our delay function with the keyup event listener passed into it.
Then we can log the value of the input with this.value .
This way, we see the value that we typed in.
The delay is set to 1500 ms or 1.5 seconds.
If we don’t want to make our own function, we can also use the Underscore or Lodash’s debounce method.
For instance, we can write:
const debouncedOnKeyup = _.debounce(function (e) {
console.log(this.value);
}, 1500);
$('#input').keyup(debouncedOnKeyup);
We call the Underscore or Lodash debounce method to add a delay to our event handler function.
Then we call keyup to run the keyup handler with a delay.
Wait for All Images to Load Before Executing Something with jQuery
To wait for images to load before running something on jQuery, we can wait for the document to ready.
We can also watch the load event of window and run code after it’s emitted.
To wait for the document to be ready, we can write:
$(document).ready(() => {
//...
});
We call ready on the document jQuery object with a callback.
Also, we can watch the load event by writing:
$(window).on("load", () => {
//...
});
The callback is run when the load event is triggered on the window object.
Get Selected Element Tag Name with jQuery
We can get the tagName property with the prop method to get the tag name.
For example, we can write:
$("<a>").prop("tagName");
We get the tag name of the a element with the 'tagName' string.
Also, we can make that into a plugin.
For example, we can write:
$.fn.tagName = function() {
return this.prop("tagName");
};
Then we can write:
$("<a>").tagName();
after the plugin is defined.
Conclusion
We can get the tag name of a jQuery element with the tagName property.
There are various ways to get the class list.
Also, there’re various ways to delay the key up handler.
To make sure that images are loaded in the document, we can watch the window or document events to check if it’s ready.
