Getting started with jQuery
Introduction
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
- Utilities
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)
Both versions can be downloaded from jQuery.com.
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.11.2.min.js"></script>
</head>
<script src="jquery-1.11.2.min.js"></script>
</head>
jQuery CDN
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:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
Microsoft CDN:
<head>
<script
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.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.
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
The Document Ready Event
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.
$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code
from running before the document is finished loading.
The jQuery team has also
created an even shorter method for the document ready event:
$(function(){
// jQuery methods go here...
});
jQuery Selectors
jQuery selectors allow you to select
and manipulate HTML element(s).
jQuery selectors are used to "find"
(or select) HTML elements based on their id, classes, types, attributes, values
of attributes and much more. It's based on the existing CSS Selectors, and in
addition, it has some own custom selectors.
All selectors in jQuery start with
the dollar sign and parentheses: $().
The #id Selector
The jQuery #id selector uses the id
attribute of an HTML tag to find the specific element.
An id should be unique within a page,
so you should use the #id selector when you want to find a single, unique
element.
To find an element with a specific
id, write a hash character, followed by the id of the HTML element:
$("#test")
The .class Selector
The jQuery class selector finds
elements with a specific class.
To find elements with a specific
class, write a period character, followed by the name of the class:
$(".test")
No comments:
Post a Comment