jQuery Tips — Checkboxes, Loading Messages, Getting Elements and Classes

Photo by Ramiz Dedaković on Unsplash

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.

jQuery Selectors on Custom Data Attributes

We can select custom data attributes by passing the data attribute name and value into the CSS selector.

For instance, we can write:

$("ul[data-group='fruits'] li[data-choice='apple']")

The code gets the ul with the data-group attribute set to fruits and the li inside it with the data-choice attribute set to apple .

We can also get elements with a data attribute not equal to something.

For instance, we can write:

$("ul[data-group='fruits'] li:not([data-choice='apple'])")

This gets the ul element with data-group attribute set to fruits .

And data-choice attribute is not set to apple as indicated by the not selector.

jQuery UI has the custom :data selector.

Check State Changed Even with jQuery Checkbox