Updated April 19, 2023
Introduction to jQuery has
The jQuery has() is one of the default methods to reduce the set of matched elements that will be the more descendant elements, the selector will be of any types like string, numbers, etc each time the function has() is performing that time the object is created that jQuery object represents the set of DOM(document object model) elements by using the .has() method for to construct the new jQuery object from the subset of matched elements the jQuery selector has supplied and for to test against the matched elements and descendants it includes the output results until the selector matching the elements.
Syntax:
The has() method is one of the default methods that will return all the set of DOM elements and it construct the new jQuery object from the subset of elements. We can pass the multiple comma-separated elements as the parameter arguments like $(“elements”).has(“,”) by using this code we can return all types of HTML elements.
<html>
<head>
<style>
.first{
---- Some CSS style codes depends upon the UI tag elements----
}
</style>
<script src=""/>
</head>
<body>
$(document).ready(function(){
$("html elements").has("html elements").css(",");
});
</body>
</html>The above codes are the basic syntax for the has() method utilized in the html page by using the jQuery library on the application.
How has function work in jQuery?
The jQuery has() function is one of the default functions that can be used to return the HTML elements its having one or more than one element that will be utilized inside them and then the selected match selectors. We have to use the API that specifically applicable for the jQuery library methods that will be filtered out on the traversing element segments. The has() is one of the filtered methods that has also been evaluated with the other attributes like name, age, etc. It is used for the evaluation purpose that needs to be used and selected on the specific attributes it’s on any type of HTML elements.
With the help of this method that can be associated with the other features like a class with other attributes. The class associated with the has() method is known as hasClass() and attr(‘class’) also associated with the attributes and the specific class is passed as the parameter and it will have some default values. Whenever we have to get and set the values with the specified attributes that will be reached with the destination target elements. The getting elements will be of any type like HTML, text, and any other values but the destination target elements are the same type for all the jQuery default method and its attributes.
Example #1
Code:
<html>
<head>
<title> Welcome to My Domain it’s a First Example </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div").has("h2").css({ "border": "7px dashed blue", "background-color": "Green" });
});
});
</script>
<style>
div{
border: 3px red;
margin-top: 13px;
}
</style>
</head>
<body>
<h1> Its a First Example, Thanks for the users</h1>
<p> Have a Nice day users </p>
<button> Please Select the Output Results </button>
<div> The First Inputs
<p> Home </p>
<p> Contact us </p>
<p> About us </p>
<p> Products </p>
</div>
<div> Products List
<h2> Banian </h2>
<h2> Trunks </h2>
<h2> Briefs </h2>
<h2> Jockey </h2>
<h2> Denim </h2>
<h2> DSP </h2>
</div>
<div> The Third Inputs
<h3> Your outputs are displayed based on your inputs</h3>
</div>
</body>
</html>Output:
Once you click on the button the output is:
In the above example we have created the application by using the tabs. These will be created and set the background by using the css presentation sheet. These html applications are created with the attributes <h1> this tag will be called by using the has() method.
Example #2
Code:
<!doctype html>
<html>
<head>
<title>Welcome To My Domain its a Second Example</title>
<style>
div{
display: block;
border: 7px solid blue;
color: green;
padding: 4px;
margin: 28px;
width:178px;
text-align:center;
color:violet;
}
p{
color: yellow;
text-align:center;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<h2>Have a Nice Day Users</h2>
<div><b>This is a Second Example</b>
<p><b>Please design your Application by using the has() method</b></p>
</div>
<div><b>Application is designed and hosted by the VSR Technologies</b></div>
<div><b>Please click the website for more information’s www.vsrtech.com</b></div>
<div><b>Please sent your feedbacks with this mail [email protected]</b></div>
<div><b>Please call this mobile number and get the more details 08220244056</b></div>
<div><marquee> Thanks for spending the time on our application </marquee></div>
<script>
$(document).ready(function(){
$("div").has("p").css("background-color","yellow");
});
</script>
</body>
</html>Sample Output:
In the second example, we created the application by using the has() method. The CSS style background has some set of style attributes with their elements. It will be called and utilized using the has() method.
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome Users</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$( "#third" ).on( "click", function(event) {
$("div").has("span").css("background-color","violet","bold");
});
});
</script>
<style>
div{
margin:10px;
height:50px;
width:133px;
border:3px solid blue;
float:center;
}
</style>
</head>
<body>
<h4 ><a href="javascript:void(0);" id="third">Welcome my Domain its a third Example </a></h4>
<div>Accounts Department</div>
<div><span>1 Employees Names</span></div>
<div><span>2 Employees ID</span></div>
<div><span>3 Total Employees</span></div>
<div>IT Department</div>
<div>Software</div>
<div><span>1 Software Employee Names</span></div>
<div><span>2 Software Employee ID</span></div>
<div><span>3 Software Total Employees</span></div>
<div>Hard Ware Department</div>
<div><span>1 Hardware Employee Names</span></div>
<div><span>2 Hardware Employee ID</span></div>
<div><span>3 Hardware Total Employees</span></div>
<div>Support Department</div>
<div><span>1 Support Employees Names</span></div>
<div><span>2 Support Employees ID</span></div>
<div><span>3 Support Total Employees</span></div>
<div><b>Application is designed and hosted by the VSR Technologies</b></div>
<div><b>Please click the website for more information’s www.vsrtech.com</b></div>
<div><b>Please sent your feedbacks with this mail [email protected]</b></div>
<div><b>Please call this mobile number and get the more details 08220244056</b></div>
<div><marquee> Thanks for spending the time on our application </marquee></div>
<div></div>
</body>
</html>Output:
Once you click on the button the output is:
In the Last example, we have created the application with the help of has() method. In that application, we created a list of departments like Accounts, IT-Software and Hardware, Support, etc. For each department have total employees with names and Ids and these are stored as the separate jQuery object also the attribute values are highlighted when we click the Html <a href> links.
Conclusion
In jQuery.has() method is one of the descendant’s types that have to be matched by using the selector element. The user parameter has set the expression or element the value which has to be matched using the element- pair with return all type of the HTML elements with specified selector has already created in the script.
Recommended Articles
This is a guide to jQuery has. Here we discuss the definition, How has function works in jQuery along with the example for better understanding. You may also have a look at the following articles to learn more –
