jQuery Installation:
Adding jQuery to Your Web Pages
There are several ways to start using jQuery on your web site. You can:
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google
Downloading jQuery
There are two versions of jQuery available for downloading:
Production version
Development version
Steps needs to follow:
2. Find the section labeled “Grab the Latest Version!” Then, select the checkbox next to “Production.”.
3. Click the “Download jQuery” button.
4. The next page you’ll see will look something like this. Save the page into a folder called scripts on your drive
See figure:
What’s the difference between the Production and Development versions?
The Production version of jQuery is a minified version, intended for speed of execution on a web server.
The Development version is intended for developers interested in exploring and extending the inner workings of thejQuery library.
How to use downloaded jQuery library?
The
jQuery library is a single JavaScript file, and you reference it with
the HTML <script> tag (notice that the <script> tag should
be inside the <head> section):
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<script src="jquery-1.10.2.min.js"></script>
</head>
 |
Do you wonder why we do not have type="text/javascript" inside the <script> tag?
This is not required in HTML5. JavaScript is the default scripting language in HTML5 and in all modern browsers! |
Alternatives to Downloading
If
you don't want to download and host jQuery, you can include it from a
CDN (Content Delivery Network). Both Google and Microsoft host jQuery.
To use jQuery from Google or Microsoft, use one of the following:
Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>
 |
One big advantage of using the hosted jQuery from Google or Microsoft
Many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time. |
Starting with jQuery (First program in jQuery):
Open your editor -> Create a new document ->Paste given code -> Save as MyFirstPage.html -> Open that page in Browser
*Note:- While saving select “save as type” as all type(“.”)
MyFirstPage.html
<!DOCTYPEhtml>
<html>
<head>
<title>jQuery goes to DOM-ville</title>
<style>
#change_me {
position: absolute;
top: 100px;
left: 400px;
font: 24px arial;
}
#move_up#move_down#color#disappear {
padding: 5px;
}
</style>
<script src="jquery.js" type="text/javascript">
</script>
</head>
<body>
<button id="move_up">Move Up</button>
<button id="move_down">Move Down</button>
<button id="color">Change Color</button>
<button id="disappear">Disappear/Re-appear</button>
<div id="change_me">Make Me Do Stuff!</div>
<script>
$(document).ready(function() {
$("#move_up").click(function() {
$("#change_me").animate({
top : 30
}, 200);
});//end move_up
$("#move_down").click(function() {
$("#change_me").animate({
top : 500
}, 2000);
});//end move_down
$("#color").click(function() {
$("#change_me").css("color", "purple");
});//end color
$("#disappear").click(function() {
$("#change_me").toggle("slow");
});//end disappear
});//end doc ready
</script>
</body>
</html>
How does that work?
The visitor clicks a button.
The JavaScript interpreter “hears” the click event and runs the function attached to it.
The JavaScript interpreter changes the DOM representation of the page.
The visitor sees the element move up the page.
