How to use jQuery?
To use jQuery built-in animations and functions, first add the jQuery library in a <script> tag and then you can define jQuery block of code with built-in or custom functions.
There are two ways to include jQuery library in your webpage.
- Local Installation − You can download jQuery library on your local machine and include it in your HTML code.
- CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN) via a jquery library link.
Local Installation
To download the latest version of jquery file go to the jquery.com
website, click Download Button
, there are two format of jQuery file is available i.e. Compressed or uncompressed.
- "the compressed" production format is smaller and minified. This format is recommended for the user's who want to use the jQuery library code without editing.
- "the uncompressed" development format is easy to read but larger in size generally used for developer's or programmer's who want to modify or edit the library file functions.
After downloading you can put jquery file in a directory of your website, and include in your HTML file as shown in the below example.
If you able to view 'Hello World' on your document, means jquery applied correctly, but if message doesnot appear, check the jquery library link. Also check jquery library link must be appear before your script code.
Also, You can Download jQuery compressed library file from here. jQuery Library 1.10.2
jQuery CDN
Another way to include jQuery file is to use CDN. If you don't want to download jquery file, you can include it by writting the following link.
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
Let us rewrite the above example using jQuery library from Google CDN.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Loading</h1>
</body>
Note: script tag for jQuery library must be place before the script of our code.
A jQuery statement typically starts with the dollar sign ($) and ends with a semicolon (;). In jQuery, the dollar sign ($) is just an alias for jQuery.
Example 1: Display Alert box using jQyery
<script>
$(document).ready(function(){
alert("Alert Box in jQuery!");
});
</script>
$(document).ready() and $()
The code inserted between '$(document).ready()' is executed only once when page is ready to execute the code. In place of '$(document).ready()', you can use shorthand notation '$()'.
$(document).ready(function(){
alert("Alert Box in jQuery!");
});
$(function() {
alert("Alert Box in jQuery!");
});