Posts Tagged ‘Client Scripting’



This is just a re-sharing of my past article @GatewayTechnolabs Blog.

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 is allows faster and easier JavaScript development then the traditional JavaScript development.

There are 7 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 categories 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/

Enjoy playing with jQuery 🙂

Code Project


Read Full Post »

%d bloggers like this: