j query intro_29thsep_alok
TRANSCRIPT
http://www.Spritle.comCopyright: Spritle Software Private Limited
jQuery Introduction-
by Alok Swain
Please note that some of the images or content might have been taken from Internet and we don’t own copyright on them. If you have any objection in the content, please let us know at [email protected]
http://www.Spritle.comCopyright: Spritle Software Private Limited
About Me
Why jQuery ?• Makes Javascript coding easier.• Increases the speed of development.• Extensive support through community
forums and large plugin base for numerous features.
• Example:document.getElementbyId(‘myElement’);
$(‘#myElement’)
Main objectives of jQuery• Improving interactions between
JavaScript and HTML.• Highly effective, readable and short
code.• Almost everything converts to find a
certain element and do something on it.
http://www.Spritle.comCopyright: Spritle Software Private Limited
jQuery Selectors• Basic CSS selectors. Example- .myClass,
#tableID, a.myLink...• Position based selectors: a:first, p:last...• a:hidden • Showcase example
Selectors continued...• Multiple elements can also be selected to
perform a common function on them.e.g. - $(“div#myDiv, #someID”)
DOM Traversal• $(“div.myDiv”).parent();- returns the
immediate parent.• $(“div.myDiv”).next(); - returns the next
sibling.• $(“h1:first”).parents(); - returns all parents
upto the html tag.
DOM Modification.• $(“div#myDiv”).html(“Some Text.”);• $(“table#myTable).append(“<tr> </tr>”);• Showcase example
Chaining method calls.• Most jQuery methods return another jQuery object
representing the same collection.• Thus on the output of one method other methods
calls can be chained. This is one of the powerful features of jQuery.
• Some methods return a different collection.• In such cases .end() method can be used to revert to
the previous collection.• Showcase example:
$('div.section').hide().addClass('gone');
Events• Events can be fired when an element is
clicked, hovered upon, dragged.• Default events associated with certain
elements can also be changed.• Showcase example
Animations• $(“#myDiv”).show(‘slow/fast’);• Showcase Example
Ajax• $.get();• $.post();• $.ajax({
type: ‘get’, url: '/ajax/method/?parameter=' +
param, dataType: 'script' });• Showcase Example
Plugins• Extensive Plugin support for many commonly
desired functionalities.• Defining custom plugins is also possible with
very little effort.• Plugin examples:
1. Tablesorter 2. Facebox
Extending jQuery• jQuery is extensible through plugins, whichcan add new methods to the jQuery object.• UI – Widgets.• Showcase example.
Disadvantages.• Compared to other JavaScript libraries jQuery
has fewer utility functions.• This issue is countered by using other libraries
like Underscore.js which includes many utility functions that Prototype has.
Thank you &
Questions
http://www.Spritle.comCopyright: Spritle Software Private Limited