jQuery .attr() Method

What Is .attr()?

.attr() (since 1.0) gets or sets HTML attributes on matched elements — values that appear in markup like title, href, src, and alt.

// Get (first element only)
var title = $("em").attr("title");

// Set one
$("#link").attr("title", "Market stall");

// Set many
$("#link").attr({ title: "Market stall", rel: "nofollow" });

// Remove
$("#link").attr("title", null);

How to Use .attr()

Pick the overload that matches get, set-one, set-many, or compute-per-element.

1. Select the element(s) with a jQuery selector.
2. Get: .attr("name") — returns the first match (or undefined if unset, since 1.6).
3. Set one: .attr("name", value) — updates every matched element.
4. Set many: pass a plain object of name/value pairs.
5. Compute: .attr("name", function (index, old) { return next; }).

Pseudocode

if called as .attr(name):
    return attribute name on first matched element
    // undefined if the attribute was never set (jQuery 1.6+)

if called as .attr(name, value):
    for each matched element:
        if value is null: remove attribute
        else: set attribute name = value

if called as .attr(object):
    for each key in object:
        set that attribute on every matched element

if called as .attr(name, fn):
    for each matched element with index i:
        next = fn(i, currentAttribute)
        if next is not undefined: set attribute to next

Cheat Sheet

Keep these facts handy while reading or writing attribute code.

Live Preview

Get or set the title on the sample link — same APIs as the examples below.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Prefer .prop() when you need live form state.

var title = $("em").attr("title");
$("#out").text("Title: " + title);

Title: The title of the emphasis

$("#photo").attr("title", "Beijing Brush Seller");
$("#out").text($("#photo").attr("title"));

Beijing Brush Seller

$("#photo").attr({
  title: "jQuery Logo",
  rel: "nofollow"
});

$("#out").text(
  $("#photo").attr("title") + " | " + $("#photo").attr("rel")
);

jQuery Logo | nofollow

$("div.box").attr("id", function (index) {
  return "box-" + index;
});

$("#out").text(
  $("div.box").map(function () { return this.id; }).get().join(", ")
);

box-0, box-1, box-2

$("input").on("change", function () {
  var $input = $(this);
  $("#out").text(
    "attr: " + $input.attr("checked") +
    " | prop: " + $input.prop("checked") +
    " | :checked: " + $input.is(":checked")
  );
}).trigger("change");

After toggle (typical jQuery 3.x):
attr: checked | prop: true/false | :checked: true/false

Use prop / :checked for live state.

Performance Notes

Attribute access is inexpensive. Prefer one selection and a callback or object setter over repeated queries inside tight loops.

Key Takeaways