Updated March 20, 2023
Introduction to jQuery prop()
JQuery prop() is a built in function that is used to fetch the properties and the respective values of any element in the web page. One can use this function for setting the property values for the elements or for fetching the property values for an existing element property. If the function is executed for fetching, it fetches the firstly found value for the given element’s property. Another similar function like prop() function is attr() function. The syntax for prop() method varies for different functions like to get a value of a property, to set a property and its value, to set multiple properties and their corresponding values, and by using another function to get the properties and the respective values.
Syntax and Parameters of the jQuery prop()
Here we discuss the Syntaxes below:
Syntax
1. Syntax to return the value of a property:
$(selector).prop( property )2. Syntax to set the property and value:
$(selector).prop( property, value)3. Syntax to set multiple properties and values:
$(selector).prop({ property1 : value1, property2 : value2,...})4. Syntax to set property and value by using a function:
$(selector).prop( property, function( index, current value ))Parameters
Some of the parameters are given below:
- Property: Property is used to specify the property name.
- Value: Value is used to specify the value of the property.
- Index: Index is used to specify the index position of the element in the set.
- Current value: Current value is used to specify the current property value of the selected element.
Example for the jQuery prop()
The examples for the jQuery prop() are given below:
Example #1: Method to set the property
Next, we write the HTML code to understand the jQuery prop() method more clearly with the following example:
Code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
</script>
<title> This is an example for jQuery prop( ) method </title>
<!-- code to show working of jQuery prop( ) method -->
<script>
$(document).ready(function(){
$("button").click(function(){
var $x = $("p");
$x.prop("color", "red");
$x.append(" Color property is set and its value: " + $x.prop
("color"));
});
});
</script>
<style>
div{
width: 500px;
padding: 20px;
height: 150px;
border: 3px solid red;
}
</style>
</head>
<body>
<div>
<p></p>
<br><br>
<!-- click button to execute method -->
<button> Click Button </button>
</div>
</body>
</html>Output:
Once the Click button click, the output is:
In the above code, the prop ( ) method set the property color by the value as red, so the red box appears there and once you click the button the red box with the text display
In the above code, the append( ) method is also using. The use of the append( ) method is to insert specified content at the end or as the last child of the selected elements in the jQuery collection.
Example #2: Method with removeProp() method
Next example code where this method sets the color property value to red and next to the removeProp() remove the color property:
Code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
</script>
<title> This is an example for jQuery prop( ) method </title>
<!-- code to show working of jQuery prop( ) method -->
<script>
$(document).ready(function(){
$("button").click(function(){
var $x = $("div");
$x.prop("color", "red");
$x.append("<br> Color property is set and its value: " + $x.prop
("color"));
$x.removeProp("color");
$x.append("<br> The change value of color property: " + $x.prop
("color"));
});
});
</script>
<style>
div{
width: 500px;
padding: 20px;
height: 150px;
border: 3px solid red;
}
</style>
</head>
<body>
<div>
<br><br>
<!-- click button to execute method -->
<button> Click Button </button>
</div>
</body>
</html>Output:
Once the Click Here button click, the output is:
Example #3: Method with attr( ) method
Next example code where the jQuery prop() and jQuery attr() method used to differentiate their functionality –
Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title> The example for jQuery prop() method </title>
<style>
h3 {
margin: 40px 0 0;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="c1" type="checkbox" checked="selected">
<label for="c1"> Check Here </label>
<h3></h3>
<script>
$( "input" ).change(function() {
var $input = $( this );
$( "h3" ).html(
"attr = \"checked\" : <b>" + $input.attr( "checked" ) + "</b><br>" +
"prop = \"checked\" : <b>" + $input.prop( "checked" ) + "</b><br>" +
"is = \":checked\" : <b>" + $input.is( ":checked" ) ) + "</b>";
}).change();
</script>
</body>
</html>Output:
Once the Click Here button deselected, the output is:
As in the above output, it clearly shows that this method is to retrieve property values and retrieve the HTML attribute value.
Recommended Articles
This is a guide to jQuery prop(). Here we discuss the Parameters and the example for the jQuery prop() along with the Syntax. You can also go through our other suggested articles to learn more–
