2014-02-16 - Learn Jquery | Learning Javascript | Jquery Tutorials | Jquery Articles | Learn Scripting

How to add and remove class using Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
<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 to add and remove class using Jquery.<o:p></o:p></span></div>
<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;"><br /></span></div>
<div class="MsoNormal">
<b><span style="color: #0d0d0d; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-themecolor: text1; mso-themetint: 242;"><u>Add Class (Css
Stylesheet):</u></span></b></div>
<div class="MsoNormal">
<b><span style="color: #0d0d0d; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-themecolor: text1; mso-themetint: 242;"><br /></span></b></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">The <span style="color: #215868; mso-themecolor: accent5; mso-themeshade: 128;">addClass ()</span>
method used to add cascading style sheet classes to the element.<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: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">$(<span style="color: maroon;">'p'</span>).addClass(<span style="color: maroon;">"Backcolor"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal">
<b><span style="color: #0d0d0d; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-themecolor: text1; mso-themetint: 242;"><u>Remove Class (Css
Stylesheet):</u><o:p></o:p></span></b></div>
<div class="MsoNormal">
<b><span style="color: #0d0d0d; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-themecolor: text1; mso-themetint: 242;"><br /></span></b></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">The <span style="color: #215868; mso-themecolor: accent5; mso-themeshade: 128;">removeClass ()</span>
method used to remove cascading style sheet classes to the element.<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: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">$(<span style="color: maroon;">'p'</span>).removeClass(<span style="color: maroon;">"Yellow"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;">We can
also add or remove multiple classes for the elements separated by a space in
between them.</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">$(<span style="color: maroon;">'p'</span>).addClass(<span style="color: maroon;">"Backcolor
Fontsize"</span>);<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: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">$(<span style="color: maroon;">'p'</span>).removeClass (<span style="color: maroon;">"Backcolor
Fontsize"</span>);<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<u><span style="color: #0d0d0d; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-themecolor: text1; mso-themetint: 242;">Example Program:<o:p></o:p></span></u></div>
<div class="MsoNormal">
<u><span style="color: #0d0d0d; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-themecolor: text1; mso-themetint: 242;"><br /></span></u></div>
<br />
<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;">'#btnAddClass'</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>).addClass(<span style="color: maroon;">"Forecolor"</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;">'#btnAddMultipleClass'</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>).addClass(<span style="color: maroon;">"Backcolor Fontsize"</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;">'#btnRemoveandaddClass'</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>).removeClass(<span style="color: maroon;">"Backcolor Fontsize"</span>).addClass(<span style="color: maroon;">"Forecolor"</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="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">style</span>
<span style="color: red;">type</span><span style="color: blue;">="text/css"></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;">.Backcolor</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: red;">background-color</span>:<span style="color: blue;">Orange</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;">.Fontsize</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: red;">font-size</span>:<span style="color: blue;">x-large</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;">.Forecolor</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: red;">color</span>:
<span style="color: blue;">Green</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: blue;"></</span><span style="color: maroon;">style</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: 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;">            This is the sample text<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;">="btnAddClass"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Add Class"</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;">="btnAddMultipleClass"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span>
<span style="color: red;">Text</span><span style="color: blue;">="Add Multiple
Class"</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;">="btnRemoveandaddClass"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span>
<span style="color: red;">Text</span><span style="color: blue;">="Remove
Class"</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>
</div>

How to add and remove class using Jquery?

In this article, I will explain how to add and remove class using Jquery. Add Class (Css Stylesheet): The addClass () method use...

What are Jquery selectors? How to use selectors in jquery?

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
<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
Selectors:<o:p></o:p></span></u></b></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">
<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 selectors are the most important aspects of the
Javascript library.<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-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;">Basic
syntax is: $(selector).action ()<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;">In
jQuery, the $ sign is just an alias to<span class="apple-converted-space"> jquery
()<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;"><span class="apple-converted-space"><br /></span></span></div>
<div class="MsoNormal">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;">Selectors
are the elements in the html document. It allows you to select and manipulate
html elements.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<b><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";">Elements by Id:<o:p></o:p></span></b></div>
<div class="MsoNormal">
<b><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></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";">It is the most commonly used selector type. It is used to
select a single, unique element. The fastest way to select element is by its ID
selector. We can match elements based on Id with ‘#’ operator. <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">
<b><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;">Syntax is:</span></b><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;"> $(‘#Idofelement’).action
()<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;"><br /></span></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;">

What are Jquery selectors? How to use selectors in jquery?

Jquery Selectors: Jquery selectors are the most important aspects of the Javascript library. Basic syntax is: $(selector).action ...

What is Jquery? How to use Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
<span style="color: #0d0d0d; mso-themecolor: text1; mso-themetint: 242;">In this article, I will explain Jquery fundamentals and introduction about
jquery.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="color: #0d0d0d; mso-themecolor: text1; mso-themetint: 242;"><br /></span></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
<b><u><span style="color: #595959; mso-themecolor: text1; mso-themetint: 166;">What is Jquery?<o:p></o:p></span></u></b></div>
<div class="MsoNormal">
<b><u><span style="color: #595959; mso-themecolor: text1; mso-themetint: 166;"><br /></span></u></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";">JQuery is a JavaScript library used to simplify client-side
scripting, event handling, and animation on client side.<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";">jQuery is not a language, It’s  a well written JavaScript code.</span><o:p></o:p><br />
<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>
<span style="background-color: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10pt; line-height: 115%;">It was released in January 2006 by John Resig</span>.<br />
<span style="background-color: white; color: #404040; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 12.65pt;"><br /></span>
<span style="background-color: white; color: #404040; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 12.65pt;">jQuery is light weighted and the slogan for Jquery
is "write less, do more".</span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">It’s free, open source software, licensed under
MIT license.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">The goal of jQuery is to make it much easier
to use JavaScript on our website.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="background-position: initial initial; background-repeat: initial initial; color: #404040; font-family: Verdana, sans-serif; font-size: 10pt;">jQuery will run exactly
the same in all major browsers, including Internet Explorer 6</span>.<o:p></o:p></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<br /></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="background-position: initial initial; background-repeat: initial initial; color: #404040; font-family: Verdana, sans-serif; font-size: 10pt;">Microsoft includes
Jquery on Ajax framework and MVC framework.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="background-position: initial initial; background-repeat: initial initial; color: #404040; font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<b><u><span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Features
& Advantages:<o:p></o:p></span></u></b></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<b><u><span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></u></b></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Simple, Easy to use<b><u><o:p></o:p></u></b></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Fast & Extensible<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Improves Performance of the application<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Handles complicated functionality with less
coding<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Helps to develop browser compatible pages<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">DOM Manipulation<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Ajax Integration (Server side calls)<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Handles Effects and Animations<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
</div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Wide range of plugins available for various specific
needs<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<b><u><span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">How to
use Jquery?<o:p></o:p></span></u></b></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<b><u><span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></u></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";">1. To include jQuery, first download the latest version of
Jquery at<span class="apple-converted-space"> </span></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%;"><a href="http://www.codeproject.com/Tips/471799/www.jquery.com"><span style="background: white; border: none windowtext 1.0pt; color: purple; mso-bidi-font-family: "Segoe UI"; mso-border-alt: none windowtext 0in; padding: 0in;">www.jquery.com</span></a></span><span class="apple-converted-space"><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";">.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span class="apple-converted-space"><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></span></div>
<div class="MsoNormal">
<span class="apple-converted-space"><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";">2. Extract it and add files to the
project folder.</span></span></div>
<div class="MsoNormal">
<span style="background-color: white; color: #111111; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span class="apple-converted-space"><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #111111; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 15.333333015441895px;">3. Include the jquery file in head section.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span class="apple-converted-space"><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #111111; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 15.333333015441895px;"><br /></span></span></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;">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="margin-bottom: 0.0001pt;">
<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><span class="apple-converted-space"><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #111111; font-family: 'Segoe UI', sans-serif; font-size: 10.5pt;"> How to add Jquery</span></span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">title</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<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;">><o:p></o:p></span></span></div>
<div class="MsoNormal" style="background-color: white; line-height: 12.65pt;">
</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;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><br /></span></div>
<div class="MsoNormal">
<span class="apple-converted-space"><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";"><o:p></o:p></span></span><span style="background-color: white; color: #111111; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;">We can also add Jquery file from
Content Delivery </span><span style="background-color: white; color: #111111; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;">Network (CDN) where clients access data from </span><span style="background-color: white; color: #111111; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;">one particular
server.</span></div>
<div class="MsoNormal">
<span style="background-color: white; color: #111111; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span class="apple-converted-space"><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";">Some of the Leading CDNs are,<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span class="apple-converted-space"><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></span></div>
<div class="MsoNormal">
<span class="apple-converted-space"><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";"><u>1. Google CDN</u><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span class="apple-converted-space"><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></span></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;">script</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="color: red; font-family: Consolas; font-size: 9.5pt;">src</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></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;">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal">
<span class="apple-converted-space"><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-bidi-font-family: "Segoe UI";"><u>2. Microsoft CDN</u><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span class="apple-converted-space"><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></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<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="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="color: red; font-family: Consolas; font-size: 9.5pt;">src</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">><o:p></o:p></span></span></div>
<div class="MsoNormal">
<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";">By using CDNs, Clients can achieve better performance of retrieving
data<o:p></o:p></span></div>
<div class="MsoNormal">
<span class="apple-converted-space"><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></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><u><span style="background: white; color: #111111; font-family: "Segoe UI","sans-serif"; font-size: 10.5pt; line-height: 115%;">How to Execute Jquery?<o:p></o:p></span></u></b></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><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";">We can execute Jquery by the following ways<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<b><u><span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br /></span></u></b></div>
<div class="MsoListParagraphCxSpFirst" style="margin-bottom: 0.0001pt; text-indent: -0.25in;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">1<span style="font-family: 'Times New Roman'; font-size: 7pt;">       </span></span><span style="font-family: Consolas; font-size: 9.5pt;">$(document).ready(<span style="color: blue;">function</span> () {}; - </span><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">Execute Jquery only when the page fully loaded</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpFirst" style="margin-bottom: 0.0001pt; text-indent: -0.25in;">
<span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
</div>
<div class="MsoListParagraphCxSpLast" style="margin-bottom: 0.0001pt; text-indent: -0.25in;">
<span style="font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: Consolas;">2 <span style="font-family: 'Times New Roman'; font-size: 7pt;">     </span></span><span style="font-family: Consolas; font-size: 9.5pt;">$(<span style="color: blue;">function</span>
() { }); - </span><span style="background: white; color: #111111; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">Execute Jquery when
the page loads</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<b><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><br /></span></b></div>
<div class="MsoNormal">
<b><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><br /></span></b></div>
<div class="MsoNormal">
<b><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">1. $(<span style="color: blue;">function</span> () { })</span></b><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> – </span><span style="background-color: white; color: #111111; font-family: Verdana, sans-serif; font-size: 10pt; line-height: 115%;">It will not wait for the whole page
to load completely</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">.</span></div>
<div class="MsoNormal">
<span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><br /></span></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;">script</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></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 style="color: blue;">function</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(<span style="color: maroon;">"Welcome to Jqueryjohn.com"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;">           
});<o:p></o:p></span></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"><span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;"><span style="color: blue;"><br /></span></span></div>
<div class="MsoNormal">
<b><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">2. $(document).ready(<span style="color: blue;">function</span> () {}</span></b><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> – </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";">This method is best and safest way to execute
Jquery</span><span style="background: white; color: #111111; font-family: "Segoe UI","sans-serif"; font-size: 10.5pt; line-height: 115%;"><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" 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;">script</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<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="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;">           
alert(<span style="color: maroon;">"Welcome to Jqueryjohn.com"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Consolas; font-size: 9.5pt;">        });<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";">

</span></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;">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span></div>
</div>

What is Jquery? How to use Jquery?

In this article, I will explain Jquery fundamentals and introduction about jquery. What is Jquery? JQuery is a JavaScript librar...