Lets assume that you have the below html on your page and you want to change the attributes and styles what every you mentioned using JQuery.
<div id="myDiv">
<h1> Change multiple attributes using JQuery</h1>
<span>This is my first Jquery code</span>
</div>
Now if you want add some title to to the span and change span background color and font, you can do in couple of ways.
First, you can do it using Chaining function. That is, you are going to execute chain of functions in a single jquery.
Example:
$('#myDiv span').attr('title','span title')
.css('background-color', 'red')
.css('font-size', '20pt');
Second method, I can modify the above JQuery to use JSon for multiple attribute instead of separating title and style. When you want to use JSon, then you need put all your properties and its values inside the curly braces.
Syntax : Attribute Name : 'attribute value'
Example:
$('#myDiv span').attr(
{
title : 'span title'
style: 'background-color : red; font-size : 20pt'
});
But I can write the above JQuery in a different way using JSon inside css function. This will cause the chaining but, it is good know that we have this option, so that whenever we want to change only the style , we can use this pattern.
Syntax: 'attribute name' : 'attribute value'
Example:
$('#myDiv span').attr('title','span title')
.css(
{
'background-color' : 'red',
'font-size' : '20pt'
});