jQuery Introduction - by Alok Swain http://www.Spritle.com Copyright: Spritle Software Private Limited   Please note that ...
About Me http://www.Spritle.com Copyright: Spritle Software Private Limited
Why jQuery ? <ul><li>Makes Javascript coding easier. </li></ul><ul><li>Increases the speed of development. </li></ul><ul><...
Main objectives of jQuery <ul><li>Improving interactions between JavaScript and HTML. </li></ul><ul><li>Highly effective, ...
jQuery Selectors <ul><li>Basic CSS selectors. Example- .myClass, #tableID, a.myLink... </li></ul><ul><li>Position based se...
Selectors continued... <ul><li>Multiple elements can also be selected to perform a common function on them. </li></ul><ul>...
DOM Traversal <ul><li>$(“div.myDiv”).parent();- returns the immediate parent. </li></ul><ul><li>$(“div.myDiv”).next(); - r...
DOM Modification. <ul><li>$(“div#myDiv”).html(“Some Text.”); </li></ul><ul><li>$(“table#myTable).append(“<tr> </tr>”); </l...
Chaining method calls. <ul><li>Most jQuery methods return another jQuery object representing the same collection. </li></u...
Events <ul><li>Events can be fired when an element is clicked, hovered upon, dragged. </li></ul><ul><li>Default events ass...
Animations <ul><li>$(“#myDiv”).show(‘slow/fast’); </li></ul><ul><li>Showcase Example </li></ul>
Ajax <ul><li>$.get(); </li></ul><ul><li>$.post(); </li></ul><ul><li>$.ajax({ </li></ul><ul><li>  type: ‘get’, </li></ul><u...
Plugins <ul><li>Extensive Plugin support for many commonly desired functionalities. </li></ul><ul><li>Defining custom plug...
Extending jQuery <ul><li>jQuery is extensible through plugins, which </li></ul><ul><li>can add new methods to the jQuery o...
Disadvantages. <ul><li>Compared to other JavaScript libraries jQuery has fewer utility functions. </li></ul><ul><li>This i...
<ul><li>Thank you  &  Questions </li></ul>http://www.Spritle.com Copyright: Spritle Software Private Limited
Upcoming SlideShare
Loading in...5
×

J query intro_29thsep_alok

884

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
884
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

J query intro_29thsep_alok

  1. 1. jQuery Introduction - by Alok Swain http://www.Spritle.com Copyright: Spritle Software Private Limited 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 info@spritle.com
  2. 2. About Me http://www.Spritle.com Copyright: Spritle Software Private Limited
  3. 3. Why jQuery ? <ul><li>Makes Javascript coding easier. </li></ul><ul><li>Increases the speed of development. </li></ul><ul><li>Extensive support through community forums and large plugin base for numerous features. </li></ul><ul><li>Example: </li></ul><ul><li>document.getElementbyId(‘myElement’); $(‘#myElement’) </li></ul>
  4. 4. Main objectives of jQuery <ul><li>Improving interactions between JavaScript and HTML. </li></ul><ul><li>Highly effective, readable and short code. </li></ul><ul><li>Almost everything converts to find a certain element and do something on it. </li></ul>http://www.Spritle.com Copyright: Spritle Software Private Limited
  5. 5. jQuery Selectors <ul><li>Basic CSS selectors. Example- .myClass, #tableID, a.myLink... </li></ul><ul><li>Position based selectors: a:first, p:last... </li></ul><ul><li>a:hidden </li></ul><ul><li>Showcase example </li></ul>
  6. 6. Selectors continued... <ul><li>Multiple elements can also be selected to perform a common function on them. </li></ul><ul><li>e.g. - $(“div#myDiv, #someID”) </li></ul>
  7. 7. DOM Traversal <ul><li>$(“div.myDiv”).parent();- returns the immediate parent. </li></ul><ul><li>$(“div.myDiv”).next(); - returns the next sibling. </li></ul><ul><li>$(“h1:first”).parents(); - returns all parents upto the html tag. </li></ul>
  8. 8. DOM Modification. <ul><li>$(“div#myDiv”).html(“Some Text.”); </li></ul><ul><li>$(“table#myTable).append(“<tr> </tr>”); </li></ul><ul><li>Showcase example </li></ul>
  9. 9. Chaining method calls. <ul><li>Most jQuery methods return another jQuery object representing the same collection. </li></ul><ul><li>Thus on the output of one method other methods calls can be chained. This is one of the powerful features of jQuery. </li></ul><ul><li>Some methods return a different collection. </li></ul><ul><li>In such cases .end() method can be used to revert to the previous collection. </li></ul><ul><li>Showcase example: $('div.section').hide().addClass('gone'); </li></ul>
  10. 10. Events <ul><li>Events can be fired when an element is clicked, hovered upon, dragged. </li></ul><ul><li>Default events associated with certain elements can also be changed. </li></ul><ul><li>Showcase example </li></ul>
  11. 11. Animations <ul><li>$(“#myDiv”).show(‘slow/fast’); </li></ul><ul><li>Showcase Example </li></ul>
  12. 12. Ajax <ul><li>$.get(); </li></ul><ul><li>$.post(); </li></ul><ul><li>$.ajax({ </li></ul><ul><li> type: ‘get’, </li></ul><ul><li>url: '/ajax/method/?parameter=' + param, </li></ul><ul><li>dataType: 'script' </li></ul><ul><li>}); </li></ul><ul><li>Showcase Example </li></ul>
  13. 13. Plugins <ul><li>Extensive Plugin support for many commonly desired functionalities. </li></ul><ul><li>Defining custom plugins is also possible with very little effort. </li></ul><ul><li>Plugin examples: 1. Tablesorter </li></ul><ul><li>2. Facebox </li></ul>
  14. 14. Extending jQuery <ul><li>jQuery is extensible through plugins, which </li></ul><ul><li>can add new methods to the jQuery object. </li></ul><ul><li>UI – Widgets. </li></ul><ul><li>Showcase example . </li></ul>
  15. 15. Disadvantages. <ul><li>Compared to other JavaScript libraries jQuery has fewer utility functions. </li></ul><ul><li>This issue is countered by using other libraries like Underscore.js which includes many utility functions that Prototype has. </li></ul>
  16. 16. <ul><li>Thank you & Questions </li></ul>http://www.Spritle.com Copyright: Spritle Software Private Limited
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×