Close
Login to Your Account
Faadooengineers
View RSS Feed

Software Engineers BLOG

Jquery and its Advantages - A Web Developers Dream Tool

Rating: 2 votes, 5.00 average.
jquery and its advantages
N
ow that jQuery 1.5 is released, this is as good as any time to discuss this library. I got started on jQuery recently for a project. The web pages were being developed with HTML and CSS and I wanted to see how jQuery can be used to spruce them up.

First a few words on jQuery. It has emerged as de-facto leader in JavaScript library for most websites. First of all, it is simple to learn (one weekend is enough); it is compact (it measures like 30K, less than an image – with google CDN, it doesn’t even have to be downloaded often); it has tons of plugins (ranging from ajax to form validators to look and feel stuff).

Here is the high level idea of usage. You include it in the header, as usual. You write your own script, where you hook some functions on start of the page. These functions typically can modify the DOM elements.

Let me illustrate it: Let us say you have a data table being displayed in the page. You want to have zebra striping. One way is to change the program to edit the HTML. But, why? You can use jQuery – you can pick up the table using a selector, and apply CSS transformation to it in the following way:
Here is how you can do it:

$(document).ready(function(){
$('#datatable tbody tr:even').css('background-color','#eee);
});
(assuming that the id for the table is datatable). Simple, right? Basically, what we are doing is, we are declaring a hook function to be done when the document is ready to select every even row in the body of the table with id datatable and adding a css attribute for the background color. That is all!

What are the additional things that you can do?


  1. Page layout: You can do it with CSS of course. jQuery can help in calculating any widths and do any kind of sophisticated layouts. In addition, it can give control to the users to adjust the page (like drag and drop of widgets and so on).
  2. Form layout: If you are designing the forms, you know how much of pain it is. You resort to tables; you start calculating the pixels; and once the data widths change, all your calculations go haywire. A few plugins address this problem.
  3. Form validation, tool tips, in place disappearing text: All these make using the forms easy to use. Here is an interesting idea. Tooltips only for the novices. That is, for some kind of experts tooltips are not necessary. We can do all that magic with jQuery (we need some server support – required for knowing which user is novice and which is an expert).
  4. Table layout: I already showed you what I can do with three lines. We can do more: sorting the elements? Pagination? Filtering? Searching? All these can be done, with suitable plugins to jQuery. If you are feeling lazy, you can write it yourself too!
  5. UI theming: Of course, you can use CSS alone to do this. But, jQuery UI offers a simple way to manage the theme and add the class elements to the page by traversing the code.

Grab hold off some sample tutorials and play with it at your own leisure. Here is what you need:

  1. Firefox with firebug plugin: You can see how the screen is laid out and which part of the screen corresponds to which part of the code. Use it to see and understand jQuery in action.
  2. Visual studio express 2010: Free to use editor for your editing needs. I am sure there are better tools, but this one will do.
  3. Your local copies of jQuery, jQuery UI, themes: useful, if you are stuck without internet.

I have seen 15 year olds do enough magic with jQuery. I am sure we can bring some pizzazz to our web application development. Go forth and have fun!
Categories
Technology

Comments

Trackbacks


Send Birthday Wish
Send Birthday Wish
  • vilasmankar

    vilasmankar

  • anhakin

    anhakin

  • raj sahw

    raj sahw

  • rahul reddy boya
    Branch : Mechanical Engineering

    rahul reddy boya

  • nawab ahammad
    Branch : Civil Engineering

    nawab ahammad

  • trkkrshn

    trkkrshn

  • chetanverma

    chetanverma

  • b2884925

    b2884925

  • krishyogi

    krishyogi

  • meetRahul

    meetRahul

  • LickymacySamn12

    LickymacySamn12

  • Regencyhood

    Regencyhood

  • sanjayrai

    sanjayrai

  • iloveu
    Branch : Computer Science Engineering

    iloveu

  • zingalala
    Branch : Civil Engineering

    zingalala

  • 220h

    220h

  • parthaaec
    Branch : Electrical Engineering

    parthaaec

  • chakravarthi_palagummy

    chakravarthi_palagummy

  • atulbatheja

    atulbatheja

  • sadhana.patil021

    sadhana.patil021

  • VIVEK1977
    Branch : Computer Science Engineering

    VIVEK1977

  • Rajiv1991

    Rajiv1991

  • vikashkuriya
    Branch : Computer Science Engineering

    vikashkuriya

  • rishabh srivastava

    rishabh srivastava

  • raviwell

    raviwell

  • pratikp542
    Branch : Computer Science Engineering

    pratikp542

  • Narendra Shukla

    Narendra Shukla

  • amit_jadhav7610

    amit_jadhav7610

  • shubhanka

    shubhanka

  • Adityaintwala
    Branch : Mechanical Engineering

    Adityaintwala

  • scoefield

    scoefield

  • vtewarii
    Branch : Mechanical Engineering

    vtewarii

  • Nocksville

    Nocksville

  • manu raj

    manu raj

  • raj89

    raj89

  • pavankumar

    pavankumar

  • Shobhit Kulshreshtha

    Shobhit Kulshreshtha

  • ARASH7949
    Branch : Bio-Tech Engineering

    ARASH7949

  • coolsid8
    Branch : Computer Science Engineering

    coolsid8

  • kkvolu
    Branch : THIS DOES NOT APPLY ON ME!

    kkvolu

  • amathur007

    amathur007

  • sachinarasu
    Branch : Mechanical Engineering

    sachinarasu

  • shivadesk

    shivadesk

  • surykant paashar
    Branch : Electronics Engineering

    surykant paashar

  • pranjul.garg09

    pranjul.garg09

  • Shaant Mehedi

    Shaant Mehedi

  • siddharthasiddu

    siddharthasiddu

  • jjeetu

    jjeetu

  • Vishalan

    Vishalan

  • dabbanng pandey

    dabbanng pandey

  • jkshakya.505
    Branch : Mechanical Engineering

    jkshakya.505

  • czar_ankit

    czar_ankit

  • raghu m pes

    raghu m pes

  • sudeep012
    Branch : Mechanical Engineering

    sudeep012

  • avikhalder341300

    avikhalder341300

  • puneet3871

    puneet3871

  • somnani

    somnani

  • sujisati
    Branch : Mechanical Engineering

    sujisati

  • monika gaur

    monika gaur

  • Zubair Mohammad

    Zubair Mohammad

  • varunkumthekar
    Branch : Mechanical Engineering

    varunkumthekar

  • evijaythegr8

    evijaythegr8

  • raghunandankini
    Branch : Mechanical Engineering

    raghunandankini

  • nithiiyanandham

    nithiiyanandham

  • chahal

    chahal

  • mechravi

    mechravi

  • a ahad
    Branch : Mechanical Engineering

    a ahad

  • bishwadeep

    bishwadeep

  • seharawat

    seharawat

  • AvijitM

    AvijitM

  • hari krish

    hari krish

  • Sijo joseph

    Sijo joseph

  • ankitad
    Branch : Electronics Engineering

    ankitad

  • bhargavi ganta
    Branch : Electrical Engineering

    bhargavi ganta

  • Vinutha R
    Branch : Aeronautical Engineering

    Vinutha R

  • stelldeshpande

    stelldeshpande

  • jazzynav

    jazzynav

  • james

    james

  • dhruv7089

    dhruv7089

  • shyam shivakumar007
    Branch : Some other branch

    shyam shivakumar007

  • kendawg

    kendawg

  • santosh02

    santosh02

  • idea19k2

    idea19k2

  • rajkumarecebook
    Branch : Electronics Engineering

    rajkumarecebook

  • roy sonu

    roy sonu

  • rks1994
    Branch : THIS DOES NOT APPLY ON ME!

    rks1994

  • pintudugger

    pintudugger

  • monu

    monu

  • Amruthapriya

    Amruthapriya

  • beastboy1991
    Branch : Electronics Engineering

    beastboy1991

  • BIPLAB1990

    BIPLAB1990

  • LickymacySamn12

    LickymacySamn12

  • shine c antony

    shine c antony

  • jitishk

    jitishk

  • mahi11_sharma

    mahi11_sharma

  • rintu
    Branch : Computer Science Engineering

    rintu

  • praveensonare
    Branch : Computer Science Engineering

    praveensonare

  • sai_nath

    sai_nath

  • krishnaiiit

    krishnaiiit

  • Qwertyqwertya
    Branch : Electronics Engineering

    Qwertyqwertya

×

Send Birthday wish

Send Wish