jQuery - Get Attribute (id, class, name, title, src)

.attr() - Get & Set Attributes

// Get an attribute value
var src = $('img').attr('src');
var href = $('a').attr('href');
var id = $('#element').attr('id');
var title = $('a').attr('title');

// Set a single attribute
$('img').attr('src', 'new-image.jpg');
$('a').attr('href', 'https://example.com');

// Set multiple attributes at once
$('img').attr({
  src: 'photo.jpg',
  alt: 'A beautiful photo',
  width: 300,
  height: 200
});

.attr() vs .prop()

// For boolean properties, ALWAYS use .prop()
$('#checkbox').prop('checked');       // true or false
$('#checkbox').prop('checked', true); // check the box

// .attr() returns the initial HTML value, not current state
$('#checkbox').attr('checked'); // "checked" or undefined

// For input values
$('#input').val();                // get current value
$('#input').val('new text');      // set value
// NOT: .attr('value') - that gets the initial HTML value

Getting Specific Attributes

// Get element ID
var id = $(this).attr('id');

// Get all classes (as a string)
var classes = $(this).attr('class');

// Get name attribute
var name = $('input').attr('name');

// Get image source
var imgSrc = $('img.photo').attr('src');

// Get link href
var link = $('a.nav-link').attr('href');

// Get data-* attributes (two methods)
var userId = $('#user').attr('data-user-id');
var userId = $('#user').data('userId');  // camelCase version

.removeAttr() - Remove Attributes

// Remove a single attribute
$('img').removeAttr('title');
$('a').removeAttr('target');

// Remove multiple attributes
$('input').removeAttr('disabled readonly');

// For boolean properties, use .prop(name, false)
$('#checkbox').prop('disabled', false);

.data() - Data Attributes

// HTML: <div id="item" data-price="29.99" data-in-stock="true">

// Read data attributes
var price = $('#item').data('price');     // 29.99 (number!)
var inStock = $('#item').data('inStock'); // true (boolean!)

// jQuery automatically parses data-* values:
// "29.99" → 29.99, "true" → true, "{}" → object

// Set data (does NOT update the HTML attribute)
$('#item').data('price', 39.99);

// To update the actual HTML attribute:
$('#item').attr('data-price', '39.99');

Practical Examples

// Dynamic image gallery
$('.thumb').on('click', function() {
  var fullSrc = $(this).attr('data-full');
  var alt = $(this).attr('alt');
  $('#viewer img').attr({ src: fullSrc, alt: alt });
});

// Toggle external link icons
$('a[href^="http"]').each(function() {
  if (!$(this).attr('href').includes(location.host)) {
    $(this).attr('target', '_blank')
           .attr('rel', 'noopener noreferrer')
           .addClass('external');
  }
});

// Collect form data from attributes
var formData = {};
$('input[name]').each(function() {
  formData[$(this).attr('name')] = $(this).val();
});

Vanilla JS Equivalents

// jQuery → Vanilla JS
$('#el').attr('src')       → el.getAttribute('src')
$('#el').attr('src','x')   → el.setAttribute('src','x')
$('#el').removeAttr('src') → el.removeAttribute('src')
$('#el').prop('checked')   → el.checked
$('#el').data('userId')    → el.dataset.userId