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 đ