Query - Attributes

Attribute methods in Query allow you to get, set, and remove attributes on DOM elements.

attr

Gets or sets attributes on elements.

Syntax

Get

$('selector').attr(attributeName)

Set

$('selector').attr(attributeName, value)
$('selector').attr({attribute1: value1, attribute2: value2})

Parameters

Returns

Get

Query object (for chaining).

Set

• Single Element The attribute value of that element.
• Multiple Elements An array of attribute value , one for each matched element.

Usage

Get an Attribute

// Get an attribute value
const href = $('a').attr('href');
console.log(href);

Set an Attribute

// Set a single attribute
$('img').attr('alt', 'Profile picture');

Set Multiple Attributes

// Set multiple attributes
$('input').attr({
  'type': 'text',
  'placeholder': 'Enter your name'
});

Example

removeAttr

Removes an attribute from each element in the set of matched elements.

Boolean Attributes This is helpful for boolean attributes where setting a value like checked="false" will actually result in checked being set.

Syntax

$('selector').removeAttr(attributeName)

Parameters

Returns

Query object (for chaining).

Usage

// Remove the 'disabled' attribute from all buttons
$('button').removeAttr('disabled');

Example

data

Gets or sets data attributes on elements. Data attributes are HTML attributes that start with data- and are commonly used to store custom data.

Syntax

Get All Data Attributes

$('selector').data()

Get Specific Data Attribute

$('selector').data(key)

Set Data Attribute

$('selector').data(key, value)

Parameters

Returns

Get All Data Attributes

• Single Element An object containing all data attributes.
• Multiple Elements An array of objects, one for each matched element.

Get Specific Data Attribute

• Single Element The data attribute value.
• Multiple Elements An array of values, one for each matched element.

Set Data Attribute

Query object (for chaining).

Usage

Get All Data Attributes

// HTML: <div data-user-id="123" data-role="admin"></div>
const allData = $('div').data();
console.log(allData); // { userId: "123", role: "admin" }

Get Specific Data Attribute

// HTML: <div data-user-id="123"></div>
const userId = $('div').data('userId');
console.log(userId); // "123"

Set Data Attribute

// Set a data attribute
$('div').data('theme', 'dark');
// Results in: <div data-theme="dark"></div>

Working with Multiple Elements

// HTML:
// <div data-id="1" data-name="Alice"></div>
// <div data-id="2" data-name="Bob"></div>

// Get specific attribute from multiple elements
const ids = $('div').data('id');
console.log(ids); // ["1", "2"]

// Get all data from multiple elements
const allData = $('div').data();
console.log(allData); // [{ id: "1", name: "Alice" }, { id: "2", name: "Bob" }]

// Set data on multiple elements
$('div').data('active', 'true');
// Both divs now have data-active="true"

Example

Notes

• Data attribute keys are automatically converted from camelCase to kebab-case in the HTML (e.g., userId becomes data-user-id)
• When retrieving data, kebab-case attribute names are converted back to camelCase object keys
• Data attributes are always stored and retrieved as strings

removeData

Removes data attributes from elements in the current set. This method provides a convenient way to remove one or more data attributes at once.

Syntax

$('selector').removeData(keys)

Parameters

Returns

Query object (for chaining).

Usage

Remove a Single Data Attribute

// HTML: <div data-user-id="123" data-role="admin"></div>
$('div').removeData('userId');
// Results in: <div data-role="admin"></div>

Remove Multiple Data Attributes (Space-Separated)

// HTML: <div data-user-id="123" data-role="admin" data-theme="dark"></div>
$('div').removeData('userId role');
// Results in: <div data-theme="dark"></div>

Remove Multiple Data Attributes (Array)

// HTML: <div data-user-id="123" data-role="admin" data-theme="dark"></div>
$('div').removeData(['userId', 'role']);
// Results in: <div data-theme="dark"></div>

Working with Multiple Elements

// HTML:
// <div data-temp="hot" data-status="active"></div>
// <div data-temp="cold" data-status="inactive"></div>

// Remove data attributes from all matched elements
$('div').removeData('temp');
// Both divs now have only data-status attribute

Method Chaining

// Chain multiple operations
$('div')
  .data('newKey', 'newValue')
  .removeData('oldKey')
  .addClass('updated');

Example

Notes

• Keys are automatically converted from camelCase to kebab-case (e.g., userId targets data-user-id)
• Space-separated strings allow removing multiple attributes in a single call
• Non-existent keys are silently ignored
• The method returns the Query instance for chaining