How to make use of attributes in Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="MsoNormal"> <b><u><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";">Jquery Attributes:<o:p></o:p></span></u></b><br /> <b><u><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";"><br /></span></u></b> <div class="MsoNormal"> <span style="color: #0d0d0d; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-themecolor: text1; mso-themetint: 242;">In this article, I will explain how make use of attributes using Jquery.<o:p></o:p></span></div> </div> <div class="MsoNormal"> <b><u><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";"><br /></span></u></b></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">p</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">id</span><span style="color: blue;">="idAttr"</span> <span style="color: red;">title</span><span style="color: blue;">="Jquery Attributes"</span> <span style="color: red;">lang</span><span style="color: blue;">="en"></span>Sample Text<span style="color: blue;"></</span><span style="color: maroon;">p</span><span style="color: blue;">><o:p></o:p></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div class="MsoNormal"> <span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";">From the above element,<o:p></o:p></span></div> <div class="MsoNormal"> <span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";"><br /></span></div> <div class="MsoNormal"> <span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";">Tag Name is – p<o:p></o:p></span></div> <div class="MsoNormal"> <span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";"><br /></span></div> <div class="MsoNormal"> <span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";">Attributes are – id, lang, title</span><b><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.5pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";"><o:p></o:p></span></b></div> <div class="MsoNormal"> <span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";"><br /></span></div> <div class="MsoNormal"> <b><span style="color: #0d0d0d; mso-themecolor: text1; mso-themetint: 242;">Set Attributes value:</span></b></div> <div class="MsoNormal"> <b><span style="color: #0d0d0d; mso-themecolor: text1; mso-themetint: 242;"><br /></span></b></div> <div class="MsoNormal"> <span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";">The </span><span style="background: white; color: #215868; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI"; mso-themecolor: accent5; mso-themeshade: 128;">attr (name, value) </span><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";">method used to set the attributes using the passed values.</span><b><span style="color: #0d0d0d; mso-themecolor: text1; mso-themetint: 242;"><o:p></o:p></span></b></div> <div class="MsoNormal"> <span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";"><br /></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: Consolas; font-size: 9.5pt;">$(<span style="color: maroon;">'p'</span>).attr (<span style="color: maroon;">"style"</span>, <span style="color: maroon;">"background-color: Red"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div class="MsoNormal"> <b><span style="color: #0d0d0d; mso-themecolor: text1; mso-themetint: 242;">Get Attributes value:<o:p></o:p></span></b></div> <div class="MsoNormal"> <b><span style="color: #0d0d0d; mso-themecolor: text1; mso-themetint: 242;"><br /></span></b></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">The </span><span style="background: white; color: #215868; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI"; mso-themecolor: accent5; mso-themeshade: 128;">attr () </span><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">method used to fetch the value of the attribute<o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> values = $(<span style="color: maroon;">'p'</span>).attr(<span style="color: maroon;">"title"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(values);<o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div class="MsoNormal"> <b><span style="color: #0d0d0d; mso-themecolor: text1; mso-themetint: 242;">Remove Attributes value:<o:p></o:p></span></b></div> <div class="MsoNormal"> <b><span style="color: #0d0d0d; mso-themecolor: text1; mso-themetint: 242;"><br /></span></b></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">The </span><span style="background: white; color: #215868; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI"; mso-themecolor: accent5; mso-themeshade: 128;">removeAttr () </span><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">method used to remove the value of the attribute<o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: Consolas; font-size: 9.5pt;">$(<span style="color: maroon;">'p'</span>).removeAttr(<span style="color: maroon;">"style"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="font-family: Consolas; font-size: 9.5pt;"> </span></div> <div class="MsoNormal"> <b><u><span style="color: #0d0d0d; mso-themecolor: text1; mso-themetint: 242;">Example - Jquery Attributes:<o:p></o:p></span></u></b></div> <div class="MsoNormal"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">src</span><span style="color: blue;">="jquery-1.10.2.js"</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#btnGet'</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> values = $(<span style="color: maroon;">'p'</span>).attr(<span style="color: maroon;">"title"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                alert(values);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#btnSetAttr'</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                $(<span style="color: maroon;">'p'</span>).attr(<span style="color: maroon;">"style"</span>, <span style="color: maroon;">"background-color :Red"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#btnRemoveAttr'</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                $(<span style="color: maroon;">'p'</span>).removeAttr(<span style="color: maroon;">"style"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">form</span> <span style="color: red;">id</span><span style="color: blue;">="form1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">p</span> <span style="color: red;">id</span><span style="color: blue;">="idAttr"</span> <span style="color: red;">title</span><span style="color: blue;">="Jquery Attributes"</span> <span style="color: red;">lang</span><span style="color: blue;">="en"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            Jqueryjohn.com<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"></</span><span style="color: maroon;">p</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="btnGet"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Get Attribute Value"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="btnSetAttr"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Set Attribute"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="btnRemoveAttr"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Remove Attribute"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">form</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div> </div> </div>

How to make use of attributes in Jquery?

Jquery Attributes: In this article, I will explain how make use of attributes using Jquery. < p id ="idAttr" title ...

Read more »