JQuery and $() Backbone of JQuery

 

Introduction
we should say thanks to John Resig and his highly talented team for creating Jquery Framework. After jquery framework, web developer and designer life became easier. Jquery can help you to make your website interactive, attention-grabbing and stimulating. This blog will include different aspect related to jquery.

Web User interface

As per my understanding, I have divided UI into three parts; these are documented structure markup (i.e. HTML markup), stylistic markup (i.e. css) and HTML Component behavior, as shown in below image:

 UI

HTML Markup: This markup includes html controls without any cascading style sheet (i.e. CSS)

Stylistic Markup: This markup includes html controls and CSS classes applied to html controls.

HTML Component Behavior: HTML control is known as html component also. Component behavior, I mean control Animation, Show/Hide and Appearance change on user action etc. here we need Jquery to implement above effect with min line of JavaScript code. 

Generally, whenever we browse any good and interactive site, feel wow! And curious about how they implement wow effect. Then we go for view source of html to understand JavaScript code.

It is very difficult to implement wow! Effect by using raw JavaScript, Don’t worry now we have jquery framework. Jquery is simple JavaScript based framework which has common useful JavaScript function.

Why JQuery?
I am using JQuery from last 3-4 month as per my experience. JQuery is easy to understand hence small learning curve and Cross-browser support so there is no need to worry about cross browser issue before JQuery Framework. In the future JQuery will be the part of ASP.NET so why not we should use this now. In jquery you can write your own plug-in as per you requirement.

no library is full filling all the requirements so does JQuery, so there should be some mechanism to add sets of useful methods called as plug-ins for your specific requirement, which we can say in the basic terminology calling your external methods into your structure but it doesn’t give you the power of leverage existing code base. . JQuery is designed to change the way that you write JavaScript.

 

Unobtrusive DOM Scripting

DOM scripting is nothing but just accessing DOM element by using JavaScript. If you do script in such a way that if user browser does not support JavaScript, page still should be display without any error. That JavaScript is known as Unobtrusive DOM Scripting.

$() Backbone of Jquery

$() is an alias of JQuery and also known as selector. $() can do following things:

  1. DOM component manipulation
  2. DOM component creation
  3. Animation and other effects
  4. Helping in Extending JQuery framework by writing plug-in.

There are few example of selector:

  1. $(“p a”) àreturns the group of links nested in <p> element.
  2. $(“p: even”) àthis selector selects all even <p> elements.
  3. $(“tr: nth-child (1)”) à this selector selects first row of each table.
  4. $(“body > div”) à this selector selects direct <div > children of <body>.

Beware

  1. use JQuery document handler for any JQuery practice i.e. $(document).ready( function() {});
  2. Don’t put many html control id in single selector like

$(“div [id=”divid1”] div [id=”divid2”])   div [id=”divid3”])”), it gives slow response for DOM manipulation

  1. In case of “for loop” don’t do like this for (var j=0; j<$(“a”).length, j++) {} because every time selector will be execute to calculate length again slow response.

 

 

References

1. You can find some JQuery help controls in the below links:

http://www.west-wind.com/tools/westwindajaxtoolkit/docs/?page=_2hh0s4zli.htm

2. Also you can find more documents and help in:

http://www.JQuery.com

3. Nice example on all JQuery methods in XML format:

http://jquery.com/api/data/jquery-docs-xml.xml

4. JQuery with .NET

http://weblogs.asp.net/bleroy/archive/2008/09/28/jquery-now-officially-part-of-the-netdeveloper-s-toolbox.aspx

5. JQuery intellisense in VS.NET 2008:

http://blogs.ipona.com/james/archive/2008/02/15/JQuery-IntelliSense-in-Visual-Studio-2008.aspx

6. Integrating Sharpoint and JQuery:

http://weblogs.asp.net/jan/archive/2008/11/20/sharepoint-2007-and-jquery-1.aspx

7. You can download JQuery from:

http://docs.jquery.com/Downloading_jQuery

8. JQuery Support

http://www.liferay.com/web/guest/services/support/jquery

http://www.cmswatch.com/Trends/1380-Microsoft-to-support-jQuery-24/7

9. JQuery Cheat Sheet

http://www.javascripttoolbox.com/jquery/cheatsheet/

10. Comparasion with other JavaScript framework

http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised

 11. Selectors Level 3

http://www.w3.org/TR/css3-selectors/

If you have questions related to this blog just write your thoughts.

Thanks for reading!

Rukhsar Ahmad

Tagged:

Leave a comment