Ayub's Weblog

Posted by: mayub | December 23, 2009

About jQuery

jQuery is designed to change the way that we write JavaScript. It is actually a new kind of JavaScript library that is fast and concise. jQuery is a lightweight “write less, do more” JavaScript library. jQuery can do the following task.

Greatly simplifies JavaScript programming.
Simplifies HTML document traversing.
Event handling.
Animating and Ajax interactions for rapid development.

jQuery Features

jQuery is a library of JavaScript Functions. The jQuery library contains the following features:

HTML element selections
HTML event functions
HTML element manipulation
CSS manipulation
JavaScript Effects and animations
HTML DOM traversal and modification
AJAX
Utilities

jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and performs some action on the element(s).

Basic syntax is: $(selector).action()

A dollar sign to define jQuery
A (selector) to “query (or find)” HTML elements
An jQuery action() to be performed upon the element(s)

Examples:

$(this).hide() – hides current element

$(“p”).hide() – hides all paragraphs

$(“p.test”).hide() – hides all paragraphs with

$(“#test”).hide() – hides the element with

A Simple example code of jQuery

<html>
<head>
<title>jQuery Example by ayub</title>
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
</head>
<body>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(this).hide()
});
});
</script>
</head>
<button type=”button”>Click me</button>
</body>
</html>

You will get jquery-1.3.2.js from this link http://docs.jquery.com/Downloading_jQuery

This example shows how jQuery hide a button when you click on this button. Here $ sign to define jQuery and button act as selector that select button HTML element. And hide() is an jQuery action() that performed on button HTML element.

jQuery Element Selectors

jQuery uses CSS style selectors to select HTML elements.

$(“p”) selects all <p> elements

$(“p.intro”) selects all <p> elements with.

$(“p#demo”) selects the <p> element with.

jQuery Attribute Selectors

jQuery uses XPath style selectors to select elements with given attributes.

$(“[href]“) select all elements with an href attribute.

$(“[href='#']“) select all elements with an href value=”#”.

$(“[href!='#']“) select all elements with an href attribute<>”#”.

$(“[href$='.jpg']“) select all elements with an href attribute containing “.jpg”.

jQuery CSS Selectors

jQuery CSS selectors can be used to change CSS properties for HTML elements.

$(“p.intro”).css(“background-color”,”yellow”)

How AJAX work?

AJAX is based on existing standards. These standards have been used by developers for several years. It uses following web standards:

JavaScript
XML
HTML
CSS

AJAX is not a new programming language, but a new technique for creating better, faster, and more interactive web applications.

With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can trade data with a web server, without reloading the page. The XMLHttpRequest object is supported in all major browsers (Internet Explorer, Firefox, Chrome, Opera, and Safari).

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

The AJAX technique makes Internet applications smaller, faster and more user-friendly.

Important note: All new browsers use the built-in JavaScript XMLHttpRequest object to create an XMLHttpRequest object (IE5 and IE6 uses an ActiveXObject).

Three important property of XMLHttpRequest object:

1.The onreadystatechange property:

After a request to a server, we need a function to receive the data returned from the server.The onreadystatechange property stores the function that will process the response from a server. The function is stored in the property to be called automatically.The following code sets the onreadystatechange property and stores an empty function inside it:

xmlhttp.onreadystatechange=function()
{
// Write some code here
}

Here xmlhttp is a variable that hold the XMLHttpRequest object in JavaScript defination.

2.The readyState property:

The readyState property holds the status of the server’s response. Each time the readyState property changes, the onreadystatechange function will be executed. Possible values for the readyState property:

State	Description
0	The request is not initialized
1	The request has been set up
2	The request has been sent
3	The request is in process
4	The request is complete

Add an If statement to the onreadystatechange function to test if the response is complete (means that now we can get our data):

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
// Get data from the server’s response
}

3.The responseText property:

The data sent back from a server can be retrieved with the responseText property. Now, we want to set the value of the “Time” input field equal to responseText:

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.myForm.time.value=xmlhttp.responseText;
}
}

Sample example code:

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.myForm.time.value=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”print.php”,true);
xmlhttp.send(null);

}

</script>
<form name=”myForm”>
Just type a character: <input type=”text” name=”username” onKeyUp=”ajaxFunction();” />
<br/>
Time: <input type=”text” name=”time” />
<br/>
<input type=”reset” value=”Reset”/>
</form>

</body>
</html>

and content of print.php is as bellow:

<?php
print strftime(‘%c’);
?>

Why DIV is better than Table?

For the following reason DIV is better than Table.

Div Loads faster than Tables.
Tables can be inflexible.
Accessibility issues are easier with DIV.
Tables don’t print as well.
Div is great for SEO – powerful to do content positioning. So basically you can place the bulk of your rich content closer to the top of your HTML code, but it will still render on the browser in the same place.
DIVs can reduce the size of page – Use of DIVs and CSS can allow you to reduce the size of your HTML significantly, depending on how nested your tables are. TABLE tags require, TR, TD, and some cases include, TH, THEAD, TBODY, TFOOT. This adds quite a few tags that can all be condensed into a few DIVs.