Archive for September, 2010

Getting started

Tools Required

Editor
Firefox + firebug(recommended)

Prerequisites

Basics of html, css, javascript.

To learn basics of html,css then please visit http://www.htmldog.com/
To learn basics of javascript visit http://www.w3schools.com/js/default.asp

To proceed with the tutorial you should be knowing how to use firebug. We will be working on firebug JavaScript console to get started with jQuery. Get some hands on firebug before moving ahead.
For getting started with firebug watch this video.

Downloading jQuery

http://docs.jquery.com/Downloading_jQuery

Minified version: http://code.jquery.com/jquery-1.4.2.min.js
Source version: http://code.jquery.com/jquery-1.4.2.js

Including jQuery file in your html file

Including it directly from the internet( works fine if internet connection is present) in the head section of your html file.

Downloading and including it

path is

• relative path to your html file if you are directly accessing it as a local file.
• relative path to your website if you are accessing it from a website(hosted or local).

if you are accessing the html file directly and saving it to same folder as you html file then

Conventions followed in the tutorial

whatever comes after “>” is the command to be typed in the firebug.
The line after the commnad is the output.

ex

> var a = 1
1

Here “var a = 1″ is the command you type out on console.
and “1″ is the output of the command.

Note

An element can have multiple classes
An element can have only one id.

Getting Started

Create the page(source code given below) and open it in your web browser. Open your firebug and get started. This will be the page you will be using to test the examples for the rest of this post.

Following is the source code for the page.

What can be done in jquery

Let us see what can be done using jQuery

• Modifying HTML page based on some events
  • Hide/show parts of page on some events like clicking a link/checking a checkbox etc
  • On clicking a check box check all the checkboxes
• Client Side Validations
• Animation
• Ajax interactions

For doing all of the above things, you need to do the following

1. Select the element(s) from the document on which you would do some operation.
2. Perform the operation. Operation can be showing/hiding, reading the contents, changing the contents, attaching event to the element etc.

Selecting element(s) on the page

To select element(s) on the page we use the $ or the jQuery function. $ function is the core of jQuery.

$ or the jQuery function

For selecting an element from the page pass a selector string to the $ function.
The elements which match the selector string are returned by the $ function. The output of the $ function
is called the jQuery object or the wrapped set.

The jQuery object/wrapped set is an array like structure which contains all the elements which matches the selector. The jQuery object exposes several functions which help in easy read/write operations on the dom.
We will see more on about jQuery object later.
Let us study selectors first.

Selectors

If you know CSS selectors ,you already know selectors, they are the same .
There are different types of selectors as given below.

1. Tag Name Selector “tag_name”

   To select elements with their names(element name) use the element name as the selector.

   ex to select all divs on the page(refer the example page)

   >$("div")
    [div#special.selected, div, div]

   The string passed to the $ function is the selector. The return value which you see ie an array like structure is the jQuery object/wrapped set. The jQuery object contains 3 divs. 1st one has an id special and class selected. Other 2 do not have any id or class.

   ex to select all the the links on the page

   >$("a")
   [a, a.details, a, a]

2. Class selector: “.class_name”

   ex to select all the elements having class “selected”

   >$(".selected")
   [div#special.selected, tr#user_1.selected]

   2 elements are having class selected a div and a row.

3. Id Selector: “#id”

   ex to select the element with id “special”

   >$("#special")
   [div#special.selected]

4. AND operation.

   Till now we studied 3 basic selectors. There may be cases when you need to select elements which satisfy more than one selector.

   So as a general rule to select an element which should satisfy selector A and selector B you need to concatenate both the of the selectors as AB

   ex
   To select div which have class selected
   selector A = “div”
   selector B = “.selected”
   AB = “div.selected”

   >$("div.selected")
   [div#special.selected]

   it can be extended to more selectors as ABCD and so on
   where A, B, C D are different selectors.

   more examples

   To select a div with id special

   A = “div”
   B = “#special”
   AB = “div#special”

   >$("div#special")
   [div#special.selected]

   To select a row with class “selected” and id “user_1″

   A = “tr”
   B = “.selected”
   C = “#user_1″

   ABC = “tr.selected#user_1″

   >$("tr.selected#user_1")
   [tr#user_1.selected]

   Please note that the above 2 examples, we have used “id” as one part of the selectors.
   Practically this would not be very useful, as the id of an element is unique. So you could have just used the id to select that element. Using the tag name and the class name selectors in addition to the id selector only slows down the operation.

   To select a link with classes details and more
   A = “a”
   B = “.details”
   C = “.more”

   ABC = “a.details.more”

   >$("a.details.more")
   [a.details]

   Fire bug shows only first class in the output, but if you explore the html/click on the selected link,you will see that the link selected is having a class “more”.

5. OR operation

   Many times we want to select elements which either satisfy selector A or satisfy selector B
   To do an OR operation concatenate all the selectors separated by a comma “,”

   To select all divs and paragraphs on the page
   A = “div”
   B = “p”
   A, B = “div, p”

   > $("div, p")
   [div#special.selected, p, p, p, div, div]

   To select all divs with class selected and all paragraphs on the page
   A1 = “div”
   B1 = “.selected”
   C = A1B1 = “div.selected”

   A2 = “p”

   D = A2 = “p”

   C, D = “div.selected, p”

   > $("div.selected, p")
   [div#special.selected, p, p, p]

Now that we know how to select elements from the jQuery page, now we will see how to do operations on them.

Performing operations on element(s)

HTML is composed of multiple nested tags

Each tag has the following parts

Contents(text/Children ie sub tags)

ex

The operations which can be performed on the above HTML can be divided in 2 types

Read operations

• Read the contents of the tag
• Read the value of a particular attribute

Write operations

• Modify the contents of the tag
• Change the value of an attribute
• Add an attribute to element
• Remove an attribute
• Remove the element
• hide the element
• show the element

jQuery provides functions to do above operations on the dom. These function can be called on the jQuery object(wrapped set).

3 Important points to be noted

When you call the a read function on a jQuery object, then the value of the first selected element in the jQuery object is returned.

When you call the a write function on a jQuery object, then the write operation is performed on all the elements in the jQuery object. The return value of a write function is the jQuery object itself(on which the function was called.)

• To read the contents of all the elements in the jQuery object, you would need to loop on the the object like an array. We will see how to do this in the next post.

READING

html()

Returns the contents/inner html of the first element in the jQuery object.

Select a p tag and display its html.

Return the value of the attribute “attr_name” for the first element in the jQuery object.

Read the id of the div

WRITING

html(new_content)

Replaces the innter html/content for all the elements in the jQuery Object with new_content.

ex. Modify the html of all paragraghs

Note the return value is the jQuery object itself.

ex. Modifiy the title of the header

attr(attr_name,new_value)

Sets the value of the attribute with name “attr_name” to new_value, for all the elements in the jQuery object. If the attribute is not present, it is added.

Note the border of the table appears. Here there was no attribute existing, so the attribute was created.

removeAttr(attr_name)

Removes the attribute with name “attr_name” for all the elements in the jQuery object.

ex

Note in the output that there are no classes present. You can also traverse the html and check the page.
Refresh the page after this so that the other examples work.

remove()

Removes the element present in the jQuery object.

There are two important functions, which donot

hide()

Hides all the elements(which are visible) in the jQuery object. To hide the element it add a style “display:none;” to the element.

This hides all the divs on the page.

show()

Shows all the elements(which are hidden) in the jQuery object. To show the element it removes the style “display:none;” from the element.

This shows all the hidden divs on the page.

We have covered basic of selecting elements and doing some operations on them. Rest we will see in next post.

Summary

Selectors

Read/Write operations