.png)
JQUERY TUTORIAL-1
What is jQuery?
jQuery is a lightweight, "write less, do more",
JavaScript library.
The purpose of jQuery is to make it much easier to use
JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Why jQuery?
There are lots of other JavaScript frameworks out there, but
jQuery seems to be the most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such
as:
Google
Microsoft
IBM
Adding jQuery to Your Web Pages?
There are several ways to start using jQuery on your web
site.
You can:
(1)Download the jQuery library from jQuery.com :P
(2)Include jQuery from a CDN, like Google :P
Downloading jQuery
There are two versions of jQuery available for downloading:
Production version - this is for your live website because
it has been minified and compressed
Development version - this is for testing and development
(uncompressed and readable code)
<script
src="jquery-1.10.2.min.js"></script>
Alternatives to Downloading:
If you don't want to download and host jQuery yourself, 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:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
Microsoft CDN:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
jQuery Syntax?
The jQuery syntax is tailor made for selecting HTML elements
and performing some action on the element(s).
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
eg: $('#p1').hide();
The Document Ready Event
You might have noticed that all jQuery methods in our
examples, are inside a document ready event:
$(document).ready(function()
{
// jQuery methods
go here...
});
OR
$(function()
{
// jQuery methods go here...
});
This is to prevent any jQuery code from running before the
document is finished loading (is ready).
It is good practice to wait for the document to be fully
loaded and ready before working with it. This also allows you to have your
JavaScript code before the body of your document, in the head section.
Here are some examples of actions that can fail if methods
are run before the document is fully loaded:
eg:(1)Trying to hide an element that is not created yet
(2)Trying to get the size of an image that is not loaded yet
