Wednesday, March 18, 2009

JQuery - Part 1

JQuery Fundamentals

Typically, the JavaScript was considered to be a clumpsy and difficult language to be used in the application development. The applications were designed to make use of javascript to support the validations, styles but the effort required to fix the browser compatibility superseded the benefit of client side scripting. Before the discovery of CSS the applications were developed by coupling the functionality and structure (HTML) together.

< type="button" id="”btnClick”" onclick="document.getElementById('txtName’).style.color='blue';">
Please click here
< / button>

The addition of CSS in the web development world allows us to separate the structure from the stylistic details of the HTML. It also gives us the flexibility to completely change the style by changing the different style sheet.

< type="text/javascript">
window.onload = function() {
document.getElementById(' btnClick ').onclick = ChangeColor;
};

Function ChangeColor ()
{
document.getElementByID(‘txtName’).style.color = “Blue”
}
< / script>
< type="button">
Please click here

In the above example, the structure is separated from functionality. This approach of separating the structure from functionality through javascript is called “Unobtrusive Javascript”

The JQuery drew a huge attention amongst developer for its ability to support the development of unobtrusive JavaScript’s. JQuery works very well with the HTML page and performing operations on the DOM elements with significantly less lines of code. The scripts developed in JQuery model works well in all major browsers.

JQuery has great features like
DOM Selectors
DOM manipulation
Animation
HTML traversing