EDUCBA

Home Software Development Software Development Tutorials jQuery Tutorial jQuery hasAttribute()

jQuery hasAttribute()

Updated March 29, 2023

jQuery hasAttribute()

 

 

Introduction to jQuery hasAttribute()

  • The JQuery “has” attribute checks for the presence of an attribute on an HTML element like form and web application’s input.
  • The hasAttribute() function in jQuery can determine whether or not an attribute exists on an element. It returns a valid Boolean value if a match is found; otherwise, it produces a Boolean false.
  • The attr() function in JQuery can be used to see if an element has an attribute. If a match is found, it returns Boolean true; otherwise, it returns false.

What is jQuery “has attribute”?

  • The “jQuery has attribute” correctly checks for the existence of an attribute on a web application’s element.
  • This attribute helps to target action as per requirement or required place of the application.

Syntax of a jQuery “hasAttribute.”

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

  • There are two types of the “jQuery has attribute” syntax for the validation.
  • The first syntax of the “jQuery has attribute” is given below.
GivenElement.hasAttribute("target_function");
  • The “GivenElement” represents the jQuery variable, selector, or element of the application code.
  • The “hasAttrubute” method checks available functions with Boolean output.
  • The “target_function” is an available function of the application like onclick, onchange, and onblur.
  • The second syntax of jQuery hasAttribute given below
GivenElement.hasAttributes();

o The “GivenElement” is a represent tag or element of the HTML web application like body, input, and other labels.
o The “hasAttrubutes” method checks available functions with Boolean output.

How to work jQuery has attribute?

  1. First Method
  • Create an HTML tag in the body part of the web application’s page.
  • Place the required event handler function or element in the html tag.
<input type="button" id="myBtn" onclick="myFunction()" value="show value">
  • Create a jQuery script tag in the head or body tag.
<script> write method here… </script>
  • Add the “jQuery has attribute” method to check the function.
let answers = document.getElementById("myBtn").hasAttribute("onclick");
  • Use the output function in the script tag.
alert(answers);

2. Second Method

  • Create an HTML tag in the body part of the web application’s page.
  • Place the required event handler function or element in the html tag.
<input type="button" id="myBtn" onclick="myFunction()" value="show value">
  • Add the “jQuery has attribute” method to check the function.
let answers = document.getElementById("myBtn").hasAttributes("onclick");
  • Use the output function in the script tag.
alert(answers);

Using Function jQuery has attribute

• You can see the jQuery function in the script tag to contain all method.
• Use the “jQuery has attribute” method in the jQuery function.
• Here, you see the hasAttribute() function checks function availability.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"></script>
<script>
$(document).ready(function(){
var answer = document.getElementById("myBtn").hasAttribute("onclick");
alert(answer);
});
</script>
</head>
<body>
<p>JQuery hasAtrribute</p>
<input type="button" id="myBtn" onclick="myFunction()" value="show value">
</body>
</html>

Examples of jQuery hasAttribute()

Below are the different examples:

Example #1

The basic “jQuery has attribute” example, and the output shows below

  • In this example, the output shows actual value.
  • If function is available then the “hasAttribute()” method shows “true” output.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"></script>
<script>
$(document).ready(function(){
var answers = document.getElementById("myBtn").hasAttribute("onclick");
alert("the button is available in the application:" +answer);
});
</script>
</head>
<body>
<p>JQuery hasAtrribute</p>
<input type="button" id="myBtn" onclick="myFunction()" value="show value">
</body>
</html>

Output 1: output of the web page

jQuery hasAttribute() 2

Output 2: output of the “jQuery has attribute” function.

jQuery hasAttribute() h

Description:

  • Alter box shows true value after clicking on a button.
  • It means the function is available on the web page.

Example #2

The basic “jQuery has attribute” example with “true” output shows below

  • In this example, the output shows true value.
  • If function is available then the “hasAttributes()” method shows “true” output.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"></script>
<script>
$(document).ready(function(){
var answers = document.getElementById("myBtn").hasAttributes();
document.getElementById("display").innerHTML = answers;
});
</script>
</head>
<body>
<p>JQuery hasAtrribute</p>
<b id="display"></b>
<p><input type="button" id="myBtn" onclick="myFunction()" value="show value"></p>
</body>
</html>

Output:

jQuery hasAttribute() g

Description:

  • The output shows true value after clicking on the button.
  • It means the function is available on the web page.

Example #3

The basic “jQuery has attributes” example and output shows below

  • In this example output shows true or false value.
  • If the function is not available then the “hasAttributes()” method shows the false output.
<!DOCTYPE html>
<html>
<body>
<h2>JQuery hasAttributes() Method</h2>
<p id="demo"></p>
<p><input type="button" id="myBtn" onclick="myFunction()" value="show value"></p>
<script>
let answer = document.body.hasAttributes();
document.getElementById("demo").innerHTML = answer;
</script>
</body>
</html>

Output:

jQuery hasAttribute() 6

Description:

  • The output shows a false value after running the program.
  • It means the function is not available on the web page.

Example #4

The basic “jQuery has attributes” example with false output shows below

  • In this example output shows true or false value.
  • If the function is available, then the jQuery method shows the false output.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
if ($("#myBtn").attr('name') !== undefined) {
alert('The jQuery attribute exists');
}
else {
alert('The jQuery attribute does not exist');
}
});
</script>
<p>JQuery hasAtrribute</p>
<input type="button" id="myBtn" onclick="myFunction()" value="show value">
</body>
</html>

Output:

4

Description:

  • After running the program, the output shows a false value in an alert box.
  • It means the function is not available on the web page.

Example #5

The basic “jQuery has attributes” example with true output shows below

  • In this example output shows true or false value.
  • If function is available, then the jQuery method shows the true output.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
if ($("#myBtn").attr('onclick') !== undefined) {
alert('The jQuery attribute exists');
}
else {
alert('The jQuery attribute does not exist');
}
});
</script>
<p>JQuery hasAtrribute</p>
<input type="button" id="myBtn" onclick="myFunction()" value="show value">
</body>
</html>

Output:

9

Description:

  • The output shows true value in an alert box.
  • It means the function is available on the web page.

Conclusion – jQuery hasAttribute()

  • The “jQuery has attribute” method uses to check the availability of the element, function, and tags.
  • The extensive website and application require the function to get available programming information.
  • This method helps to search small objects of the program from large size code.
  • The jQuery hasAttribute() makes user-friendly, easy, and understandable web applications.

Recommended Articles

This is a guide to jQuery hasAttribute(). Here we discuss the Definition, What is a jQuery “has attribute”, How to work jQuery has an attribute with code implementation. You may also have a look at the following articles to learn more –

  1. jQuery Select()
  2. jQuery Scroll Position
  3. textContent in jQuery
  4. jQuery length
quiz