Updated April 10, 2023
Introduction to jQuery object
The jQuery object is a collection of DOM elements and behaves like a special array. Everything in jQuery is an object. When we create a new element or select an existing element the jQuery returns those elements in a collection. The new user of jQuery assumes this collection as an array but has the zero-indexed sequence of DOM elements. The jQuery object has server functions to work with the object and help the developer to work smoothly.
Syntax –
The syntax of creating jQuery empty object –
var obj = { };or
The syntax of creating an object using properties –
var obj = { property1:value1, property2:value2... propertyN:valueN } ;or
The syntax of creating an object using selector –
var obj = $( "selector" );Parameters
- property – It specifies the property for the object to assign.
- value – It specifies the value to set for the specific property of the object. The property and value are separated by the colon(:) and each property-value pair is separated by the comma(,).
- selector – It specifies the element to select to return the object. it can be a single element or multiple elements.
Return value
The return value of the object is the object if selector element found, else return an empty object if selector element not found.
Working on the JQuery object with Example
The JQuery object can be created by using any one of the above ways. Suppose we have to create an object to store numbers as “ [ ‘One’, ‘Two’, ‘Three’, ‘Four’ ];”, so, we can create it as “var obj = [“One”,”Two”,”Three”,”Four”];”.
Here are the following examples mentioned below
Example #1
Example of jQuery object to get the selector element –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title > This is an example for jQuery object </title>
<style>
#h3{
width : 150px;
height : 100px;
border : 2px solid red;
font-size : 20px;
}
</style>
</head>
<body>
<h3> This is an Example for jQuery object: </h3>
<h3 id = "h3" > This is a example heading. </h3>
<p > This is a paragraph example. </p>
<button onclick="obj()"> click here to create and display jQuery object </button>
<div id = "div1"> </div>
<div id = "div2"> </div>
<script>
function obj(){
var headings = $( "h3" );
// disply the number of h3 tags on the page.
$( "#div1" ).text("The number of h3 headings are : " +headings.length );
// Selecting only the first h1 element on the page
$( "#div2" ).text("The first h3 heading is : " +$( "h3" )[0]);
}
</script>
</body>
</html>An output of the above code is –
Once we click on the list of elements, the respective outputs are –
In the above code, the object is created which contains all selected h3 elements. Next, the JSON.stringify() function is used to convert the student object to JSON string format for displaying purpose as “JSON.stringify( obj );” and also displaying only the first h3 heading among all selected h3 elements, as we can see in the above output.
Example #2
Example of object to an object with some properties –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title > This is an example for jQuery object </title>
<style>
#p1 {
color : blue;
}
#p2 {
color : red;
background-color : yellow;
}
</style>
</head>
<body>
<h3> This is an Example for jQuery object: </h3>
<p id = "p1"> </p>
<button onclick = "checkRes()" > Click here to create and display the object and its properties. </button>
<p id = "p2"> </p>
<script>
var obj = { Sub1: "JavaScript", Sub2: "CSS", Sub3: "jQuery", Sub4: "Java" };
function checkRes()
{
$( "#p1" ).text("The object is : " + JSON.stringify(obj));
$( "#p2" ).text( "The object properties are : " +obj.Sub1+ " " +obj.Sub2+ " " +obj.Sub3+ " " +obj.Sub4);
}
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code the object is created with some properties as “var obj = {Sub1: “JavaScript”, Sub2: “CSS”, Sub3: “jQuery”, Sub4: “Java”};”. Next the JSON.stringify() function is used to convert the student object to JSON string format for displaying purpose as “JSON.stringify(obj);”, as we can see in the above output.
Example #3
Example of the object to create an object and update it –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery object </title>
</head>
<body>
<h3> The Example for jQuery object : </h3>
<button onclick = "checkRes()" style = "background-color : green" > Click here to create and update the object. </button>
<p id = "p1" > </p>
<p id = "p2" > </p>
<script>
var obj = {
name: "John",
age: 30
};
function checkRes()
{
$( "#p1" ).text("The obj before updating is : " + JSON.stringify(obj));
obj.name = obj.name + " D"; // "John D"
obj.age = obj.age + 2; // 32
$( "#p2" ).text("The obj after updating is : " + JSON.stringify(obj));
}
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code the object is created with some properties as “var obj = { name: “John”, age: 30};” and update as “obj.name = obj.name + ” D”;” . Next the JSON.stringify() function is used to convert the student object to JSON string format for displaying purpose as “JSON.stringify( obj );”, as we can see in the above output.
Conclusion
The object is a built-in data type in jQuery, which is a collection of DOM elements and behaves like a special array.
Recommended Articles
This is a guide to jQuery object. Here we discuss the working of the JQuery object and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
