Introduction

jQuery does not ship with a built-in .hasAttr() method, so the usual answer is to check attribute presence with .is('[attr]'), .attr(name) !== undefined, or the native DOM method hasAttribute. The best choice depends on whether you only need a quick presence check or you are already working directly with the underlying DOM element.

The Simplest jQuery Check: .is('[attr]')

For pure presence testing, the cleanest jQuery expression is often a selector test.

const hasTitle = $('#message').is('[title]');
console.log(hasTitle);

This reads well because it says exactly what you mean: does the element match the selector for having that attribute?

You can use the same idea with data attributes, accessibility attributes, or custom attributes:

if ($('#photo').is('[alt]')) {
  console.log('Image has alt text');
}

This is often more readable than comparing the result of .attr() manually.

Using .attr() for Presence Checks

Another common approach is to call .attr() and compare the result against undefined.

1const value = $('#message').attr('title');
2const hasTitle = value !== undefined;
3
4console.log(hasTitle);

This works because .attr() returns undefined when the attribute is not present.

It is also useful when you want both pieces of information at once:

• whether the attribute exists
• what its value is

1const src = $('img').attr('src');
2if (src !== undefined) {
3  console.log('Image source is', src);
4}

Native DOM hasAttribute Is Also Valid

If you already have the DOM element, the native browser method is straightforward and explicit.

const element = document.getElementById('message');
console.log(element.hasAttribute('title'));

You can combine that with jQuery easily:

const hasTitle = $('#message')[0].hasAttribute('title');
console.log(hasTitle);

This is a good option when you are already mixing jQuery with native DOM APIs or want a method whose purpose is unmistakable.

A Custom hasAttr Helper If You Really Want One

If the codebase uses this pattern often, you can define a small jQuery helper.

1$.fn.hasAttr = function(name) {
2  return this.attr(name) !== undefined;
3};
4
5console.log($('#message').hasAttr('title'));

That can improve readability in older jQuery-heavy codebases, but it is not required. In many cases, .is('[attr]') is already clear enough and avoids extending jQuery unnecessarily.

Attribute Presence Versus Truthy Values

A subtle point is that attribute presence is not the same as a truthy string value. An attribute can exist and still have an empty string as its value.

<input id="email" placeholder="">

const value = $('#email').attr('placeholder');
console.log(value); // empty string
console.log(value !== undefined); // true

That is why checking if ($(el).attr('name')) can be wrong for presence testing. An empty string is falsy, but the attribute still exists.

Use !== undefined or .is('[attr]') when you care about existence.

Boolean Attributes Need Care

Boolean HTML attributes such as disabled, checked, and selected are another source of confusion. Presence and state are related but not identical.

1const hasDisabledAttr = $('#saveButton').is('[disabled]');
2const disabledProp = $('#saveButton').prop('disabled');
3
4console.log(hasDisabledAttr);
5console.log(disabledProp);

For boolean behavior, .prop() is often the better choice because it reflects the live property state. For strict attribute presence, .is('[disabled]') or .attr('disabled') !== undefined is still fine.

Which Approach Should You Use?

A practical rule is:

• use .is('[attr]') for a clean jQuery presence check
• use .attr(name) !== undefined when you also care about the value
• use hasAttribute when you are already working with the native element

That keeps the code explicit and avoids inventing complexity for a simple check.

Common Pitfalls

One common mistake is assuming jQuery already has a built-in .hasAttr() method. It does not.

Another pitfall is writing if ($(el).attr('name')) and accidentally treating an empty string as if the attribute were missing.

A third issue is confusing attributes and properties for boolean cases such as checked or disabled. For live state, .prop() is often more meaningful.

Finally, avoid extending jQuery with custom helpers unless the codebase genuinely benefits from the extra abstraction. Often the built-in selector or attribute checks are already clear enough.

Summary

• jQuery does not include a built-in .hasAttr() method.
• For presence checks, .is('[attr]') is usually the cleanest jQuery approach.
• '.attr(name) !== undefined is useful when you also want the attribute value.'
• Use native hasAttribute when you already have the DOM element.
• Be careful with empty-string values and boolean attributes, because presence is not always the same as state.