jQuery Lab for learning jquery

Introduction

jQuery is a javascript library that helps developer to write browser compatible and less javascript code. jQuery library is written completely in javascript only. The DOM is mess and its behavior is different in all n-number of browsers. Therefore, in order to create a common layer over the DOM that would handle all weird behaviors of the DOM in every browsers jQuery and other such libraries had evolved. One day will come when, nobody will write javascript code directly to do manipulation, traversal and any other behavior change of DOM. JavaScript will become the machine or library level language and people will use DOJO , Prototype, YUI or jQuery like librarie's utility methods to do DOM manipulation, traversal etc. Because, these libraries saves developer’s time, testing efforts, lines of code and improves their productivity and efficiency of development.

Background

jQuery is a complex JavaScript object. We can say it as a wrapper over selected DOM elements with extended jQuery functionality. In jQuery commands, each command boils down to 2 things only select the DOM element and do some action on it. When we write jquery command by passing search expression then jQuery Sizzle Selector Engine searches for the given search expression. Selected elements present in the DOM got combined in an array and the same array would be wrapped under jQuery object and would be returned. Therefore, one can again utilize the jQuery functionality on the selected DOM elements. It's just like a chain of selected DOM elements getting returned after each execution of jquery command.

What problems are we going to solve?

In order to learn jQuery, one should first start with simple-simple jquery commands. But, the problem is where one should write, execute and see the results of the comomand. Therefore, I have created one Asp.Net Web Application by using this, one can execute JQuery commands, run them, see the results and can learn jQuery quickly.
I call it as jQuery Lab . This jQuery lab Idea, I brought from JQuery in Action book. I learned JQuery by reading this book thoroughly. I will highly recommend to read this book, it is very much helpful and it had nicely explained jquery concepts. Learning new languages by doing them in a practical way is really a fun and quicker way of learning.

jQuery Lab is a solution to our problem

jQuery Lab is a dot net web application that will allow you to execute jquery command and show you the results. It contains Dummy DOM on which one can run the jQuery Commands. It's source code can be downloaded from link: Download jQueryLab.zip - 43.64 KB. After downloading this application one can run it by making Lab.aspx page as startup page. Below are the screenshots of the souce code and Lab.aspx page.

        

The jquery lab page comprises of below things:

1. Sample DOM:
   DOM will have one Grid view and one DIV. Grid view contains few rows and Div will be empty. The DIV will have class named as empty . We will learn jquery by running sample queries on this sample DOM only. Below is the html of the sample DOM used in jQuery Lab.
   Collapse | Copy Code

       
            <div id="domWrapper">
           <asp:GridView ID="gvLab" runat="server" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None"
               BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical" AutoGenerateColumns="false">
               <Columns>
                   <asp:BoundField HeaderText="Name" DataField="Name" />
                   <asp:BoundField HeaderText="Town" DataField="Town" />
                   <asp:BoundField HeaderText="Age" DataField="Age" />
                   <asp:BoundField HeaderText="Employee Id" DataField="Id" />
                   <asp:BoundField HeaderText="Skills" DataField="Skills" />
               </Columns>
               <RowStyle BackColor="#F7F7DE" />
               <FooterStyle BackColor="#CCCC99" />
               <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
               <HeaderStyle CssClass="header" />
               <AlternatingRowStyle BackColor="White" />
           </asp:GridView>
       </div>
        <div class="empty" id="emptydiv">
           Empty Container
       </div>
     

2. Text Editor:
   There is one text area in black background color, where one can write /paste the jquery command.
3. Execute Button:
   After writing jquery code in the give text area, if user clicks on Execute button then it will execute the query. And the selected Elements would be highlighted with thick red border on the sample DOM shown left side of the page. The highlighting work on selected elements would be done by Lab internal code only in order to show your selected elements. So don't be confused that why selected elements are getting highlighted :)
4. DOM Button:
   On Click of DOM button, it will show the selected elements HTMLs below the button only.
5. Reset Button:
   On click of Reset button, it will reset the text area.

$ is the alias of jQuery object. After referring jquery file in the page by writing <script src="jquery-1.5.1.js" type="text/javascript"></script> jQuery object or $ becomes available globally. We will use alias name of jquery to learn / write jquery sample commands. In the argument of the $, we can pass search expression or new html to create elements.

jQuery Sample Commands and their explainations

Let’s learn JQuery from the beginning using jQuery Lab . Below are the jQuery sample commands. Inside the jquery lab project there is a samples.js  file that contains all the sample codes that had been listed and discussed below in this article. I have used few css classes those can be found in lab.css file in the source code. Please read explaination and learn one by one by running below commands on jQuery Lab .
We shall start our learning from the basic jQuery selectors. In the below discussions, I will write the ask then will write the code for that ask and then will explain the same code.

Searching all tables

Collapse | Copy Code

$('table'); 
    

In the above query, we are passing element name 'table' as a search expression in the argument of $. Therefore, jquery will search for all the table elements present in the page DOM. Say in the DOM there are 3 tables then the above jquery command for searching table will return one wrapper object that will wrap an array of 3 selected table objects, jquery utility Methods, and few other required javascript objects. Please see the below screen shot for the same.

Searching