Updated March 29, 2023
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.”
- 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?
- 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
Output 2: output of the “jQuery has attribute” function.
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:
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:
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:
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:
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 –
