Introduction of jQuery

home » articles » Introduction of jQuery

Introduction of jQuery

(8)

(1343)

Avg: 0/5: (0 votes)

Published: 4/30/2010 by mohit kumar

jQuery officially website says: - write less do more

If you want to make your application look more attractive and robust then jQuery is a solution.
jQuery is a fabulous JavaScript library. It is fresh technology (release in January 2006) and is just
the beginning. Now everyone’s mind comes how jQuery makes our application attractive and robust,
why we used jQuery, what is jQuery, etc? Below I will explain jQuery and will give you answer of your question.

What is jQuery?

JQuery came from JavaScript. As I above told you jQuery is a lightweight and fabulous JavaScript
library. If you have good knowledge of JavaScript, you can easily understand jQuery. It is very useful
when you developing Ajax based application. You can use jQuery to develop great web applications.
With jQuery, programmers write code concise and not complicated. We can keep our code simple and reusable.

jQuery version

On August 22nd, 2005 John Resig gave hints of jQuery and January 14th, 2006 jQuery was formally released.
It was great day for all end-users. Below is the list of the most useful jQuery version:-

August 2006 first jQuery 1.0 stable release
January 2007 new jQuery 1.1 release
July 2007 jQuery 1.1.3 release with impressive speed for jQuery’s selector engine
September 2007 jQuery 1.2 release. In this version XPATH syntax for selecting elements was removed and Effect customization much more flexible.
September 2007 new UI library for jQuery.
May 2008 jQuery 1.2.6 release
January 2009 jQuery 1.3 release with Sizzle
January 2010 jQuery 1.4 release

Why we should use jQuery?

JQuery has given us too many ways to create impressive and robust applications. jQuery’s big plus
point is that it is simple to understand and easy to use. With CSS knowledge, you wouldn’t face
problem with using this library. You can learn jQuery in short time and do more work. JQuery
provides simple way of HTML DOM traversing and manipulation, event handling, client side animations, etc.
JQuery holds a powerful and flexible mechanism for adding methods and functionalities which bundled as plug-ins.

JQuery characteristics

Cross-browser compatibility
Powerful Selectors
Light weight
Methods Chaining
Animation & Effect
jQuery Plugins

Cross-browser Compatibility

Cross-browser issues are the biggest headache of the programmers. Like if you are write a program
and it is working fine in Mozilla but you would find later it isn’t working in Internet Explorer,
this is the cross-browser issues, But with jQuery you can handle this problem and also handles a lot
of irritating cross-browser issues. jQuery code is compatible with all the browsers.

Powerful Selectors

JQuery provides us powerful selectors to create simple and nice programs. Selector is backbone of
jQuery language. Selector means you can select an element or group of elements to perform any action.
If you want to use CSS and XPath together, you can use selectors because selectors are combinations of
both CSS and XPath. jQuery selectors allow to do things faster and efficient.
In Below example I have written simple textbox selector and checkbox selector. When I will select checkbox, ‘Test ’ string
insert in all textboxes.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TextboxAndCheckboxSelectors.aspx.cs"
Inherits="jQueryExamples.TextboxAndCheckboxSelectors" %>

<!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 id="Head1" runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>1. </td>
                <td><asp:TextBox ID="txtOne" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>2. </td>
                <td><asp:TextBox ID="txtTwo" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>3. </td>
                <td><asp:TextBox ID="txtThree" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>4. </td>
                <td><asp:TextBox ID="txtFour" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>5. </td>
                <td><asp:TextBox ID="txtFive" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Insert Text</td>
                <td><asp:CheckBox ID="chkTest" runat="server" /></td>
            </tr>
        </table>
    </div>
    </form>
    <script type="text/javascript">
        $("#<%=chkTest.ClientID %>").change(function()
        {
            if (this.checked)
            {
                $("input[type=text]").val('test');
            }
            else
            {
                $("input[type=text]").val('');
            }

        });
    </script>
</body>
</html>

More Selectors

Light weight

jQuery is a quick and quite lightweight JavaScript library. jQuery minimum size is 15KB.

Methods Chaining

The best feature of the jQuery is ‘Chaining’. It is very cool and interesting thing. You can do
apply multiple methods to an element without typing the selectors again. With the methods chaining, you
can reduce your code. Its mean you can do apply more commands together in one line of code.

Example:-

$('td:contains(test)').parent().find('td:eq(1)') 
.addClass(testClass).end().find('td:eq(2)') 
.addClass(testClass);

Animation & Effect

JQuery provides us animation feature. We can make our application more attractive with jQuery.
We can use sliding, fading, etc. In below Example I am moving up and down a div.

here is my code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MoveDiv.aspx.cs" Inherits="jQueryExamples.MoveDiv" %>

<!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 id="Head1" runat="server">
    <title></title>
    
     
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" id="btnAnimation" value="Click" />
        <div id="AnimationDiv" style="background:#000000;height:10px;width:80px;position:relative">
        </div>
    </form>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.js" type="text/javascript"></script>
       <script type="text/javascript">
        $(function()
        {
            $("#btnAnimation").click(function()
            {
                Animate('400','fast');
                Animate('50','slow');
                Animate('400','fast');
                Animate('50','slow');
                Animate('400','fast');
                Animate('50', 'slow');
                Animate('400', 'fast');
                Animate('50', 'slow');
                Animate('400', 'fast');
                Animate('50', 'slow');
                Animate('400', 'fast');
                Animate('10', 'slow');
                
            });

            function Animate(value,speed)
            {
                $("div#AnimationDiv").animate({ height: value }, speed);

            }


        });
    </script>
</body>
</html>

jQuery Plugins

If you are developing an application and u have to use jQuery calendar control in every page. So,
will you write code for calendar in every page? If you would do this, you are wrong. You are wasting your time.
In this situation you can create calendar plugin; once you have created your plugin you can use its everywhere. The
best feature of the jQuery plugin is that it can use in other projects also. jQuery plugins is very fast and
saving time of programmers. The best part of the jQuery plugins is that you can get jQuery plugins easily on Internet.

$() function

We always start with the dollar sign and parentheses in every selector. It is an ALIAS for jQuery.

jQuery and Visual Studio

Thanks to Microsoft because now jQuery intellisense available in Visual Studio 2010. But if
you are using Visual Studio 2008 you can add jQuery intellisense. Here you can find that how you
can add intellisense in Visual Studio 2008.

I am giving some Example which you can implement in your projects:-

Hide and show a div on a button Click:-

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HideShowDiv.aspx.cs" Inherits="jQueryExamples.HideShowDiv" %>

<!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 id="Head1" runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="test" style="border:bold,10px">
    <table>
    <tr>
        <td>Name: </td>
        <td><asp:TextBox runat="server" ID="txtName"></asp:TextBox></td>
    </tr>
    <tr>
        <td>Address: </td>
        <td><asp:TextBox runat="server" ID="txtAddress"></asp:TextBox></td>
    </tr>
    </table>
    </div>
    <div id="tstDiv">
        
    </div>
    <input type="button" id="btnHide" value="HIDE" />
    <input type="button" id="btnShow" value="SHOW" />
    
    </form>
    <script type="text/javascript">
        $("#btnHide").click(function()
        {
            $("#test").hide();
        });
        
        $("#btnShow").click(function()
        {
            $("#test").show();
        });
    </script>
</body>
</html>

Load a text file in jQuery:-

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LoadTextFile.aspx.cs" Inherits="jQueryExamples.LoadTextFile" %>

<!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></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="testDiv" style="border:1px solid black;">
    </div>
    <table>
    <tr>
        <td>Load Text File :</td>
        <td><input type="button" id="btnTextFile" value="SHOW" /></td>
    </tr>
    </table>
    </form>
    
    <script type="text/javascript">
    
        $("#btnTextFile").click(function()
        {
            $('#testDiv').load('Assets/test.txt');
        });
    
    </script>
</body>
</html>

Summary

JQuery is a modern library. It is very fast and lightweight. You can say jQuery one of the top library
for Ajax based websites. JQuery is easy to learn, you can learn jQuery in 15 to 20 days. JQuery is capable
to create robust applications.

References

http://jquery.com/

http://codeasp.net/

Download Sample Code