Archive for September, 2010
Firefox + firebug(recommended)
To learn basics of html,css then please visit http://www.htmldog.com/
For getting started with firebug watch this video.
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
- 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.
> var a = 1
Here “var a = 1″ is the command you type out on console.
and “1″ is the output of the command.
|div#special||A div element with id special|
|div.selected||A div element with class selected|
|div#special.selected||A div element with id special and class selected|
An element can have multiple classes
An element can have only one id.
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.
<TITLE>Getting started with jQuery</TITLE>
<h1>Getting started with jQuery</h1>
<div class="selected" id="special">
This is 1st paragraph.
<a class="details more"></a>
This is 2nd paragraph.
This is 3rd paragraph.
<tr class="selected" id="user_1">
<tr class="selected" id="user_1">
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
- Ajax interactions
For doing all of the above things, you need to do the following
- Select the element(s) from the document on which you would do some operation.
- 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.
If you know CSS selectors ,you already know selectors, they are the same .
There are different types of selectors as given below.
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]
Class selector: “.class_name”
ex to select all the elements having class “selected”>$(".selected")
2 elements are having class selected a div and a row.
Id Selector: “#id”
ex to select the element with id “special”>$("#special")
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
To select div which have class selected
selector A = “div”
selector B = “.selected”
AB = “div.selected”>$("div.selected")
it can be extended to more selectors as ABCD and so on
where A, B, C D are different selectors.
To select a div with id special
A = “div”
B = “#special”
AB = “div#special”>$("div#special")
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")
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")
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”.
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)
The operations which can be performed on the above HTML can be divided in 2 types
- Read the contents of the tag
- Read the value of a particular attribute
- 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
- 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.
Returns the contents/inner html of the first element in the jQuery object.
Select a p tag and display its html.
"This is 1st paragraph. <a class="details more"></a> "
Return the value of the attribute “attr_name” for the first element in the jQuery object.
Read the id of the div
Replaces the innter html/content for all the elements in the jQuery Object with new_content.
ex. Modify the html of all paragraghs
[p, p, p]
Note the return value is the jQuery object itself.
ex. Modifiy the title of the header
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.
Removes the attribute with name “attr_name” for all the elements in the jQuery object.
>[div#special, div, div]
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.
Removes the element present in the jQuery object.
There are two important functions, which donot
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.
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.
|OR operation||A, B|
|html(), html(new_content)||Read/Write content/inner html|
|attr(attr_name), attr(attr_name,new_value)||Read/Write attribute|
|show()/hide()||Show/Hide the element|