Getting started on JQuery

I started using JQuery just recently and liked it a lot the same time 🙂 In this post we will take a look at what is DOM, what jquery is and how can one get benefit by using it. We will also look into some tried examples with code. visit http://jquery.com/ for complete information about JQuery.

So, DOM or Document Object Model is language and platform independent object model for representing HTML\XML formats. JavaScript works over DOM though the browser can render a page with different available models. Using Javascript we can play with the DOM of a page and make dynamic changes to page structure and change the browser rendering at run time. A very simple example to it is using Firebug in firefox and clicking on Inspect option. This opens the page DOM in the view panel from where a user can make changes to structure or style there by traversing page tree in any order i.e. parent to child or child to parent and see the effect of change instantaneously on browser. Javascript maintains the state of page by means of DOM.

JQuery is a concise, effective and dev friendly javascript library which allows to take advantage of DOM to its fullest by simplfying the element\object traversal, providing various animation options and simplifying ajax interactions. This library can be seen as a development effort towards supporting RAD (Rapid Application Development) where infact todays most of the developments are heading to. Good News for developers!! Write less do more is what JQuery says to us 🙂

One of the cool things is usage of chaining thereby making code development very fast and hence we can traverse a node and its decendents or ancestor nodes just with one line of code. It supports Javascript\XPath expression to select an element (javascript object) or list of elements and then using a object oriented approach shows all the properties, functions or methods working on collections when we use a “.”, we will see this in the examples at the bottom of this post.

We can also see direct method for reading JSON data (javascript also supports it but with eval() where the JSON should be trusted else can cause an attack to your server) in form of getJson() etc. We will take a closer look into using JSON over XML for Ajax call in my coming post about JSON where we will look into using a html control to make a Ajax call and receiving data in form of JSON and then making appropriate change upon successful retrieval of data.

Microsoft announced that it will integrate JQuery in coming VSTS versions though we have already seen integration support in terms of Javascript intellisense for JQuery in Visual Studio 2008 SP1. Read http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx post for complete details. This patch enables Visual Studio to look for “-vsdoc.js” in the same directory where Jquery.js file is linked to. If you find any problems installing it and want to have intellisense support then you can add the code below to get the support

<% if(false) { %>
    <script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
    <% }%>

read more about it at http://blogs.msdn.com/webdevtools/archive/2008/11/18/jscript-intellisense-faq.aspx.

Some Examples of JQuery usage:

The code below shows example usage of jQuery Slidedown, Rounded corners, Dynamic menu, Drop down value change dynamically, behavior change of anchor tags etc.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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.2.6.js" type="text/javascript"></script>

    <script src="jcorners.js" type="text/javascript"></script>

    <% if (false)
       { %>

    <script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>

    <% }%>

    <script type="text/javascript">

        //Function When window is loaded
        window.onload = function() { alert("Welcome"); }

        //Write your code when Document is loaded
        $(document).ready(function() {
            alert("Welcome Again");

            //rounded corner using JCorners plugin
            $.jcorners("#round", { radius: 10 });

            //Animate anchor
            $("a").click(function(event) {
                alert("Thanks for visiting!");

                event.preventDefault(); //Change default Click event of all anchors on page
                $(this).hide('slow');   //hides slowly
            });

            //Dynamic Menu
            $("#menu li ul").hide();
            $("#menu li").hover(function() {
                $(this).children().show('slow')
            }, function() {
                $(this).children().hide('slow')
            });

            //Slide Down and Slide up animation
            $("input.buttonSlideDown").click(function() { $("div.content").find("p.firstParagraph:hidden").slideDown("slow"); });
            $("input.buttonSlideUp").click(function() { $("div.content").find("p.firstParagraph:visible").slideUp("slow"); });
        });

        //Play with Dropdown List
        function replace() {
            var opt = $('#myselect').children().eq(2);
            //text("text") sets value for text element.
            //If you want to keep the original value then you can store it in some var
            opt.text("sushant");
            alert(opt.text());
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
<div style="margin-bottom:20px;">
<div class="content" style="overflow: hidden; display: block; height: 101px;">

                Hi this is first paragraph.

                Hi this is second paragraph</div>
<input type="button" class="buttonSlideDown" value="SlideDown" />
        <input type="button" class="buttonSlideUp" value="SlideUp" /></div>
<div style="width: 50px; margin-bottom:20px;">
        <a href="http://jquery.com/">jQuery</a></div>
<select id="myselect" style="margin-bottom:20px;">
        <option value="1">TD1</option>
        <option value="2">TD2</option>
        <option value="3">TD3</option>
        <option value="4">TD4</option>
        <option value="5">TD5</option>
    </select>
    <input type="button" value="Get Value" onclick="alert($('#myselect').val())" />
    <input type="button" value="Get Text Value" onclick="alert($('#myselect option:selected').text())" />
    <input type="button" value="Replace" onclick="replace()" />
<div style="width: 150px; margin-bottom:20px;">
<ul id="menu">
	<li class="menu">Menu 1
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
</li>
	<li class="menu">Menu 2
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
</li>
</ul>
</div>
<div id="round" style="width: 100px; height: 100px; border: 1px solid;"
        runat="server">
        This is a big Rounded div</div>
</form>
</body>
</html>

So what we see is that everything in jQuery is either a object it self or property or function of that object. The return of a function in jQuery is again an Object hence allowing us to do chaining operations\calls and write real less code to achieve what we want.

There’s a lot involved in playing with jQuery, writing plug-ins for it and utilizing\testing currently available cool plug-ins. Adding your custom plugin to jQuery is a very straight forward and simple process. Take a look at http://docs.jquery.com/Plugins/Authoring if you want to write your own plugin.

Hope this post would help those looking to start on jQuery.

Keep quering with jQuery 🙂

Thanks.

Superblog Directory

Advertisements

3 Responses to Getting started on JQuery

  1. Trackback says:

    Public Post…

    Su Articulo: [1960204] ha sido indexado
    RSS Search Engine.
    From Colombia…

  2. ash143gupta says:

    Nice Post,will help many.
    Looking forward to your next post on JSON and i myself will write the next part to your Jquery post on my blog within few days.

    Aashish
    http://smallworkarounds.blogspot.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Who am I what am I doing?

Who am I what am I doing?

%d bloggers like this: