How the script works
We must load the Library file first. We can download the file from jquery.com. Or we can use the Content Delivery Network ( CDN) of google , Microsoft or JQuery.com and point to their link. Here is the sample code to link to Google CDN
The speed goes up as the Library can be used from the cache as several users use them frequently.
If you are not using CDN then you can download JQuery files from here. There is one basic file and above that you can download different plugins as per your requirements.
Most important additional requirement will be JQuery UI ( JQuery user interface ) which is a library of different widgets like Date picker ( Calendar ) , Slider , Spinner etc.
To use JQuery UI, you must include JQuery. JQuery is the core library , JQuery UI is built on top of it.
In addition to basic JQuery library you need one more CSS file ( Style ) , known as Themes.
Uncompressed files have long variable names, blank space and line breaks etc so it occupies more space. You need this for development of script, modifications etc. For production environment when site is lunched it is better to use minified version as it occupies less space.
Here is the files required for JQuery UI
Check different themes by using the dropdown list at right side of the above demo page. Once you select a theme from the list the changes will be shown and the URL of the CDN ( Content Delivery Network ) is displayed. Copy the URL and use it like this .
Here is a sample code to show a button and show a message associated with on Click event of the button.
<title>(Type a title for your page here)</title>
<button id=new_one name=button1>My Button</button>
alert('Hi , you clicked the button');
Instead of downloading you can use CDN to link to this file.
We can apply JQuery to different HTML elements. Here is some sample code
$(this).hide() - hides the current element. $(this).show() - show the current element. $("p").hide() - hides all <p> elements. $(".my_element").hide() - hides all elements with class="my_element". $("#my_id").hide() - hides the element with id="my_id". $("#my_id").toggle() - toggle element with id="my_id".
Basic syntax of JQUERY
// JQuery code written here ...
Here is a problem. Once the same class is assigned to different elements then all those elements will fire the click event. Check this code. Here on Click of input text box also will display the alert window.
To differentiate each element of a webpage we will assign unique id to the element.
This is a div layer ( Hide Me )
<input type=button value='Hide / Un-Hide Layer' id="button1">
<div id="basic_div" style="width: 100px; height: 100px; background: yellow;padding-left:12px;"> This is a div layer ( Hide Me )</div>