This blog is moved to
http://amalhashim.wordpress.com

Sunday, March 7, 2010

jQuery A to Z – Part 1

jQuery is a powerful JavaScript library created by John Resig. Its an open source project. jQuery abstracts common web scripting situations. It has the following features
  • Easily traverse the DOM without writing large chunks of JavaScript.
  • Helps to change the CSS even after the page has been rendered.
  • Easily alter the page content with minimal code.
  • Efficient event handling.
  • Animations to the page.
  • Integrated with AJAX.
  • JavaScript tasks such as array manipulations and iterations.
  • Multiple actions in one line of code.
  • Library file size is minimal.
The official jQuery site is http://jquery.com. You can download the latest jQuery file from this site. For using jQuery in our site, we just need to provide the jQuery.js file path in script tags so it will get included.
Let’s create our first jQuery website. For this follow the steps outlined below.
  1. Open Visual Studio and add a new website, name is Part1
  2. Now we will add the jQuery js file we have downloaded. Right click the solution, Add Existing Item, open the folder where the file was downloaded. And click Ok.
  3. Now our solution will have the following structure.
     image
  4. Open default.aspx and paste the following code
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Part1._Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>Untitled Page</title>
    
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    
    <style type="text/css">        
    .oldstyle
    {
    margin: 0 2em;
    }
    .newstyle
    {
    font-style: italic;
    border: 1px solid #888;
    padding: 0.5em;
    color:Red;
    }
    </style>
    </head>
    
    <script type="text/javascript" language="javascript">
    $(document).ready(function() {
    $('.oldstyle').addClass('newstyle');
    });
    </script>
    
    <body>
    <form id="form1" runat="server">
    <div>
    <h1>
    Part 1</h1>
    <div>
    by Amal Hashim
    </div>
    <div class="oldstyle" id="part-1">
    Easily traverse the DOM without writing large chunks of JavaScript. Helps to change
    the CSS even after the page has been rendered. Easily alter the page content with
    minimal code. Efficient event handling. Animations to the page. Integrated with
    AJAX. JavaScript tasks such as array manipulations and iterations. Multiple actions
    in one line of code. Library file size is minimal.
    </div>
    </div>
    </form>
    </body>
    </html>
    

  5. Right click the default.aspx file and View in browser. image
The $ construct is used to select the document part. Here in our example $(‘oldstyle’) will find all part of the document having oldstyle. $() is a factory for the jQuery object. jQuery object encapsulates DOM elements. The .addClass() method helps to apply the newstyle for the selected oldstyle. The counterpart of addClass is removeClass() method. Our example will simply add newstyle.

Now the next question if when this code get’s executed. JavaScript is interpreted language, and it executes as and when it is encountered. But in our case, we want to have newstyle to be applied once the page gets loaded. One way to do this is using the onload event of the body tag. But in this case we will be modifying the HTML. But this is against the design pattern jQuery suggest, whose aim is to separate the tight coupling of HTML and JavaScript. To avoid this jQuery gives $(document).ready() construct. This does not require any HTML modification, on the other hand will get executed as and when the document is loaded. In our example we are using lambda function. Using the function keyword without method name, we are creating a method as and when its required. We mainly use lambda function as those methods are not being reused.

Hope all of you have read and had a good starting experience with jQuery. In Part 2 of this series i will cover in depth of how to select elements. jQuery supports XPath as well has jQuery’s own custom selector for traversing DOM. See you in Part 2.

No comments: