In this tutorial I will write about how to include the jQuery library into your page
and some basic usages.
- What is
jQuery?
jQuery is a library of javascript methods that extends native javascript functions to provide an API (application programming interface) that gives its user total control over the DOM (document object model) in a very easy way.
- How can I include
jQuery in my page?
There are two methods to achieve this, -
- First method: download jQuery from the Downloading jQuery page on the
jQuery website and place it on a folder on your sever, then add a script tag
with the src attribute as the jQuery file you downloaded from the download
page, the below html code assumes that the jQuery file is within the same directory as the html page your creating.
<html> <head> <script type='text/javascript' src='jquery-1.7.min.js'></script> </head> <body> <script> $('body').css({'background-color':'red'}); </script> </body> </html>
if the page is rendered with a red background then you've included jQuery successfully
- Second method: use an online CDN (Content delivery network), those are also
mentioned on the Downloading
jQuery page on jQuery website, and then add a script tag into your page's head
section pointing to one of those CDN hosted scripts
<html> <head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script> </head> <body> <script> $('body').css({'background-color':'red'}); </script> </body> </html>if the page is rendered with a red background then you've included jQuery successfully.
- First method: download jQuery from the Downloading jQuery page on the
jQuery website and place it on a folder on your sever, then add a script tag
with the src attribute as the jQuery file you downloaded from the download
page, the below html code assumes that the jQuery file is within the same directory as the html page your creating.
- Anatomy of a jQuery statement
Every jQuery statement is made up of three parts, lets take as an example the statement we used to test our jQuery setup
$('body').css({'background-color':'red'}); - The first part is the $ which is the jQuery object wrapper(AKA Alias). You can also write jQuery instead of the $ so that your code will be "jQuery('body').css({'background-color':'red'});".
- ('body') the DOM element which you want to operate on or "selected".
- .css(): the jQuery method you want to apply to the selected DOM element
- Selecting DOM elements
- Finding an element by ID (using hash tag):
Usually you would use the document.getElementById native javascript function to find a certain element by its ID, but in jQuery you can select an element by its ID using $('#id') syntax where "id" is the element id to be selected.
- Finding elements by their css class name (using dot):
Suppose you have the following html code
<html> <head> <script type='text/javascript' src='jquery-1.7.min.js'></script> <style> .input-red{ background-color:red; } .input-blue{ background-color:blue; } </style> </head> <body> <input class='input-red'/> <input class='input-red'/> <input class='input-blue'/> </body> </html>
this page will display two fields with a red background color and one with a blue background color. Suppose you want to change the background color to green of all the elements having the CSS class 'input-red', you can use the following statement to achieve this
$('.input-red').css({'background-color':'green'});
the $('.input-red') statement selects all the DOM elements which have a CSS class named 'input-red', you can perform individual operations on each element or mass operations(as we did in the statement above), I will cover this in more detail later on.
- Finding elements by parent-child relation:
Suppose you want to change the background color of all paragraphs within DIVs to red, you can use the following statement
$('div p').css({'background-color','red'});
The following example will change paragraphs 2 and 3 only because they are nested within a DIV
- Finding elements using their attributes
Suppose you want to change the width of all DIVs having a 100% width to 50%, you can use the attribute selector to search for DIVs having a 'width:100%' within their style. An attribute selector has the following syntax
$('div[style*="width:100%"]').css({'width':'50%'});
The following example changes only the first DIV's width to 50%
- Finding multiple elements using multiple selectors
You can use multiple selectors within a single jQuery statement, the following example changes the background color of the first two text blocks only
No comments:
Post a Comment