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.