Posts Tagged ‘jQuery’

8 things about jQuery which makes it a powerful tool to write rich client side scripting

Thursday, July 22nd, 2010

For whom the client side scripting becomes a headache OR for those who loves client side scripting… jQuery is a great way of doing client side scripting with ease and fun. Playing with HTML DOM elements using jQuery is really a fun and as easy as writing ABCD :)

Introduction: jQuery is actually an Open Source cross-browser JavaScript library which allows faster and easier JavaScript development then the traditional JavaScript development.

There are 8 things which gives power to the developers for building robust and excellent client side scripts.

1 – Cross browser support :
Those who have ever written traditional JavaScript, they must have faced problems with diff. browser support and it becomes a tedious stuff for detecting browser behaviors and writing separate logics for all , but jQuery has wiped out all those problem by giving cross browser support. So no more cross-browsing compatibility issues here.

2 – jQuery selectors , manipulation & Traversing
Every web developers must have used CSS and its syntax for defining styles by class (with DOT) / elements  / element ID (using #), jQuery also uses all common CSS syntax for selecting a set of DOM elements which is called jQuery Selectors.

i.e. $(“#sample”)  will return all the DOM elements with [ ID = sample ]
$(“div.xyz span#abc”) will return only those <span> elements with ID= abc and are child of a <div> with class name “xyz”

To learn more you can visit : http://api.jquery.com/category/selectors/

3 – jQuery EventBinding
jQuery supports all such events like click ,mouse over/move,load, etc. Writing event on any set of DOM elements are also becomes easier with JQ, by just passing a function as a parameter in event binding.
its as easy as this : $(“#sample”).click(function(){ alert(‘Hi there !’); });
To learn more you can visit : http://api.jquery.com/category/events/

4 – Callback functions
jQuery also facilitates the callback functions in many methods which becomes useful while working with animations or any timer based functionalities.

i.e.  $(“#sample”).show(“slow”, [ optional callback function ] );

5 – Utilization of JSON
JSON stands for “JavaScript object notation”. Use of JSON everywhere as an optional parameters makes jQuery more flexible and powerful for passing a set of parameters.
Jquery utilizes JSON format widely in most of inbuilt functions ,all AJAX methods and in jQuery plug-in development as well.

i.e.  $(“#sample”).css({height:”40px”, color:”black” });

6 – jQuery AJAX
jQuery gives a variety of AJAX functionalities to the developers with extensive use of callbacks for different AJAX events, and a good thing about jQuery AJAX is that we don’t have to take care about cross-browser compatibility issues. and no need to take care of xmlHTTP object n all.
It gives different functions for all kind of developer’s needs

i.e. $(“#sample”).load( [ URL] ); – a very basic function, which will load the HTML from the specified URL into #sample.

To learn more visit : http://api.jquery.com/category/ajax/

7 – jQuery plugins
jQuery plug-in is a concept or we can say a mechanism of making our own functionality generalized by packaging it all together as a plug-in.
jQuery plug-in offers great portability to the code and of course code re-usability with ease.

To learn more visit : http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery#Plug_me:_Writing_your_own_plugins

8 – JQuery UI
jQuery UI is an Open Source library which is built on core jQuery.
It can be used to built highly interactive web applications,
jQuery UI offers a wide range of inbuilt functions for animations, effects , themes mechanism , rich  UI widgets and complex behaviors like Drag-Drop , resizing , selection & sorting.

  • jQuery UI categorizes all functionalities in main 3 section given below
    • Interaction: Covers complex behaviors like Drag-Drop elements, Resizing and Sorting. And provides a wide range of options for handling different behaviors and scenarios
    • Widgets: Fully functional rich UI elements (ultimately jQuery plug-ins) with a Rich User Interface and flexible theming options.
    • Effects: Enables supports of various animation and transition effects like slide,blind,bounce, drop,fade etc.

To learn more visit : http://jqueryui.com/demos/