jQuery Attributes

Beginner
⏱️ Hub guide
📚 Updated: Jul 2026
🚀 5 method tutorials
Overview

What You’ll Learn

HTML attributes live in markup — href, src, title, alt, and id. jQuery’s .attr() gets and sets them with cross-browser consistency. For live form state like checked and selected, use .prop() instead.

01

.attr()

Get & set

02

Getter

First element

03

Setter

All matches

04

.prop()

Form state

05

Object

Bulk set

06

5 guides

Full index

Fundamentals

Introduction

Every link, image, and form field in your page carries HTML attributes — the name-value pairs you write in markup. When JavaScript needs to read a tooltip from title, update an image src, or assign unique id values, jQuery attribute methods handle it cleanly across browsers.

What Are jQuery Attribute Methods?

.attr() is the primary API. Its getter form returns a string (or undefined) from the first matched element. Its setter forms — name/value, plain object, or callback — update every match. Since jQuery 1.6, .prop() handles live DOM properties separately: checked, selected, disabled, and value on form controls.

💡
Beginner Tip

Use .attr(name) to get an HTML attribute from the first matched element (returns a string or undefined). Use .attr(name, value), a plain object, or a callback to set attributes on every match. For live form state — checked, selected, disabled — use .prop(), not .attr().

Foundation

📝 Syntax

Minimal attribute get/set workflow:

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

// Set — every matched element
$("img").attr({ src: "logo.png", alt: "Logo" });

// Form state — use .prop(), not .attr()
if ($("input").prop("checked")) { /* checked */ }
Preview

👀 .attr() vs .prop() vs .val() vs .removeAttr() vs .removeProp() vs .data()

Six related APIs — pick the right layer:

.attr(name) → get HTML attribute (first element, string) .attr(name, val) → set HTML attribute (all elements; null removes) .prop(name) → get/set live DOM property (checked, disabled) .val() → get/set form input, textarea, select values .removeAttr(name) → remove attribute from all matches .removeProp(name) → remove jQuery-added property (not native props) .data(key) → jQuery data cache — not written to DOM

Attribute Method Tutorial Index

Search by method name or browse by category. Each tutorial includes syntax, try-it examples, and FAQs.

Get & Set

3 tutorials

Read and write HTML attributes with .attr(), live DOM properties with .prop(), and form values with .val().

MethodDescriptionTutorial
.attr()Get or set HTML attributes on matched elements — title, href, alt, id; use .prop() for checked, selected, and disabled.Open
.prop()Get or set DOM properties on matched elements — checked, disabled, selectedIndex; use .val() for input values.Open
.val()Get or set form element values — input, textarea, and select text; multi-select returns an array; use .prop() for checked and disabled.Open

Remove

2 tutorials

Strip HTML attributes and jQuery-added properties — .removeAttr() for markup, .removeProp() for custom .prop() cleanup.

MethodDescriptionTutorial
.removeAttr()Remove one or more HTML attributes from matched elements — space-separated names since 1.7; use .prop() for inline event handlers in IE.Open
.removeProp()Remove jQuery-added properties set with .prop() — not for native checked, disabled, or selected; prefer .prop(name, false) for form state.Open
Wrap Up

Conclusion

jQuery attribute methods let you read and write HTML markup values with cross-browser consistency. Start with .attr() for standard attributes — get from the first match, set on every match. Reach for .prop() when you need live form state, and .data() for application data that should not live in the DOM.

Open .attr() Tutorial Previous: .scroll()

❓ Frequently Asked Questions

Attribute methods read and write HTML attributes on DOM elements — the name-value pairs declared in markup such as href, src, title, alt, and id. jQuery's .attr() is the primary API, with .removeAttr() for removal and .prop() for live DOM properties.
.attr() works with HTML attributes — initial markup values, almost always strings. .prop() works with DOM properties — live state that changes at runtime. For checked, selected, and disabled on form controls, always use .prop() or .is(':checked').
No. The getter form .attr(name) returns the attribute value for only the first element in the set. Setters — name/value, plain object, or callback — apply to every matched element.
Pass null to .attr(): .attr('title', null). Alternatively use .removeAttr('title'). Both remove the attribute from every matched element.
Use .attr() for standard HTML attributes visible in markup. Use .data() for arbitrary application data stored in jQuery's internal cache — it does not write to the DOM and can hold objects.
Read the overview, study the attr vs prop comparison, browse the method index below, then open the .attr() tutorial for full syntax, five try-it labs, and method-specific FAQs.

Start with .attr()

Learn getter/setter overloads, attr vs prop, and five try-it labs.

.attr() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

jQuery .scroll() Method jQuery .attr() Method