Jquery Selectors on Custom Data Attributes Using Html5

When working with JavaScript, jQuery is a powerful library that can simplify many tasks. One common task is selecting elements based on custom data attributes. With the introduction of HTML5, custom data attributes have become a popular way to store additional information about elements.

jQuery provides several selectors that can be used to target elements with custom data attributes. Let’s explore some of the options:

1. Attribute Equals Selector

The attribute equals selector allows you to select elements with a specific value for a custom data attribute. The syntax for this selector is [data-attribute="value"]. Here’s an example:

HTML:
JavaScript

JavaScript:
var element = $('[data-category="tech"]');
console.log(element.text()); // Output: JavaScript

2. Attribute Contains Selector

The attribute contains selector allows you to select elements that contain a specific value within a custom data attribute. The syntax for this selector is [data-attribute*="value"]. Here’s an example:

HTML:
JavaScript

JavaScript:
var element = $('[data-category*="programming"]');
console.log(element.text()); // Output: JavaScript

3. Attribute Starts With Selector

The attribute starts with selector allows you to select elements that have a custom data attribute starting with a specific value. The syntax for this selector is [data-attribute^="value"]. Here’s an example:

HTML:
JavaScript

JavaScript:
var element = $('[data-category^="t"]');
console.log(element.text()); // Output: JavaScript

4. Attribute Ends With Selector

The attribute ends with selector allows you to select elements that have a custom data attribute ending with a specific value. The syntax for this selector is [data-attribute$="value"]. Here’s an example:

HTML:
JavaScript

JavaScript:
var element = $('[data-category$="h"]');
console.log(element.text()); // Output: JavaScript

These are just a few examples of how you can use jQuery selectors to target elements with custom data attributes. By leveraging these selectors, you can easily manipulate and interact with elements based on the additional information stored in their data attributes.

Remember to include the jQuery library in your project before using these selectors. You can either download it from the official website or include it from a CDN like Google or Microsoft.