Presentation On JQuery                 Prepared                    By                 Rahul Jain              Lexcis Solut...
Agenda• Basics of Jquery• Javascript vs Jquery• Why to use Jquery• Concept of Jquery• Overview of jquery API• Jquery pros ...
What exactly is jQueryjQuery is a JavaScript Library!• Dealing with the DOM• JavaScript Events• Animations• Ajax interacti...
jQuery Basics                     jQuery()This function is the heart of the jQuery libraryYou use this function to fetch e...
Document Ready$(document).ready(function(){// Your code here});jQuery has a simple statement thatchecks thedocument and wa...
What’s the problem with      JavaScript?
JavaScript is a weakly typed,classless, prototype based OOlanguage, that can also be usedoutside the browser. It is not a ...
It means no more of thisvar tables = document.getElementsByTagName("table");for (vart = 0; t<tables.length; t++) {var rows...
Using jQuery we can do this  $("tabletr:nth-child(odd)").addClass("odd");
Using jQuery we can do this  jQuery("tabletr:nth-child(odd)").addClass("odd");jQuery function
Using jQuery we can do this  jQuery("tabletr:nth-child(odd)").addClass("odd");                  jQuery Selector (CSS expre...
Using jQuery we can do this  jQuery("tabletr:nth-child(odd)").addClass("odd");                  jQuery Selector (CSS expre...
Using jQuery we can do this  jQuery("tabletr:nth-child(odd)").addClass("odd");                  jQuery Selector (CSS expre...
It really is the“write less, do more” JavaScript Library!
Why use jQuery• Helps us to simplify and speed up webdevelopment• Allows us to avoid common headachesassociated with brows...
Three Major Concepts of jQuery The $() function                            Get > Act             Chainability
The Magic $() function      var el = $(“<div/>”)Create HTML elements on the fly
The Magic $() function        $(window).width()Manipulate existing DOM elements
The Magic $() function    $(“div”).hide();$(“div”, $(“p”)).hide(); Selects document elements   (more in a moment…)
The Magic $() function           $(function(){…});Fired when the document is ready for            programming.      Better...
jQuery’s programming philosophy               is:          GET >> ACT $(“div”).hide() $(“<span/>”).appendTo(“body”) $(“:bu...
Almost every function returnsjQuery, which provides a fluent  programming interface and         chainability:$(“div”).show...
Overview of jQuery API     Core     Selectors     Attributes     Traversing     Manipulation     CSS     Events   ...
Overview of jQuery API   Core   Selectors                   jQuery()   Attributes     each()   Traversing     map()   ...
Overview of jQuery API   Core   Selectors      jQuery("#nav li.contact")   Attributes     jQuery(":visible")    Travers...
Overview of jQuery API   Core   Selectors      attr()                   removeAttr()   Attributes     addClass()   Tra...
Overview of jQuery API   Core   Selectors      add()                   children()                                eq()   ...
Overview of jQuery API   Core   Selectors      html()                   text()                                    replac...
Overview of jQuery API   Core   Selectors      css()   Attributes     offset()                   offsetParent()   Trav...
Overview of jQuery API   Core   Selectors      ready()            blur()                                      change() ...
Overview of jQuery API   Core   Selectors      show()                   hide()   Attributes     toggle()   Traversing ...
Overview of jQuery API   Core    Selectors      jQuery.ajax()        jQuery.ajaxSetup()                  jQuery.get()   ...
Overview of jQuery API   Core   Selectors      jQuery.support                   jQuery.boxModel                         ...
A Few Examples   Forms   Chatboxes   Menus   Dropdowns   Sliders   Tabs   Slideshows   Games
jQuery Enhanced Forms
Menus and Dropdowns
Sliders and Slideshows
Technical ImplementationBuilding Real-Time Form ValidationUsing jQuery
Pros:• Large Community• Ease of use• Large library• Strong opensource community. (Several     jQuery plugins available)• G...
Cons:• Regular updates that change existing behaviour• Overhead of adding extra javascript to page• Learning curve may not...
Thank You
JQuery
Upcoming SlideShare
Loading in...5
×

JQuery

674

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide
  • Will add a class to each odd table row inside of each table in an html pagenot too complex, already nine lines of codelead in: using jQuery…
  • JQuery

    1. 1. Presentation On JQuery Prepared By Rahul Jain Lexcis Solution
    2. 2. Agenda• Basics of Jquery• Javascript vs Jquery• Why to use Jquery• Concept of Jquery• Overview of jquery API• Jquery pros and cons• Jquery programs• Conclusion
    3. 3. What exactly is jQueryjQuery is a JavaScript Library!• Dealing with the DOM• JavaScript Events• Animations• Ajax interactions
    4. 4. jQuery Basics jQuery()This function is the heart of the jQuery libraryYou use this function to fetch elements using CSSselectorsand wrap them in jQuery objects so we canmanipulatethemThere’s a shorter version of the jQuery() function: $()$("h1");$(".important");
    5. 5. Document Ready$(document).ready(function(){// Your code here});jQuery has a simple statement thatchecks thedocument and waits until its readyto be manipulated
    6. 6. What’s the problem with JavaScript?
    7. 7. JavaScript is a weakly typed,classless, prototype based OOlanguage, that can also be usedoutside the browser. It is not a browser DOM.
    8. 8. It means no more of thisvar tables = document.getElementsByTagName("table");for (vart = 0; t<tables.length; t++) {var rows = tables[t].getElementsByTagName("tr"); for (vari = 1; i<rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += " odd"; } }};
    9. 9. Using jQuery we can do this $("tabletr:nth-child(odd)").addClass("odd");
    10. 10. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd");jQuery function
    11. 11. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery Selector (CSS expression)jQuery function
    12. 12. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery Selector (CSS expression)jQuery function jQuery Wrapper Set
    13. 13. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery Selector (CSS expression)jQuery function jQuery Wrapper Set jQuery Method
    14. 14. It really is the“write less, do more” JavaScript Library!
    15. 15. Why use jQuery• Helps us to simplify and speed up webdevelopment• Allows us to avoid common headachesassociated with browser development• Provides a large pool of plugins• Large and active community• Tested on 50 browsers, 11 platforms• Its for both coders and designers
    16. 16. Three Major Concepts of jQuery The $() function Get > Act Chainability
    17. 17. The Magic $() function var el = $(“<div/>”)Create HTML elements on the fly
    18. 18. The Magic $() function $(window).width()Manipulate existing DOM elements
    19. 19. The Magic $() function $(“div”).hide();$(“div”, $(“p”)).hide(); Selects document elements (more in a moment…)
    20. 20. The Magic $() function $(function(){…});Fired when the document is ready for programming. Better use the full syntax: $(document).ready(function(){…});
    21. 21. jQuery’s programming philosophy is: GET >> ACT $(“div”).hide() $(“<span/>”).appendTo(“body”) $(“:button”).click()
    22. 22. Almost every function returnsjQuery, which provides a fluent programming interface and chainability:$(“div”).show() .addClass(“main”) .html(“Hello jQuery”);
    23. 23. Overview of jQuery API  Core  Selectors  Attributes  Traversing  Manipulation  CSS  Events  Effects  Ajax  Utilities
    24. 24. Overview of jQuery API Core Selectors jQuery() Attributes each() Traversing map() size() Manipulation length selector CSS context index() get() Events Effects Ajax Utilities
    25. 25. Overview of jQuery API Core Selectors jQuery("#nav li.contact") Attributes jQuery(":visible") Traversing jQuery(":radio:enabled:checked") jQuery("a[title]") Manipulation jQuery("a[title][href=foo]") CSS jQuery("a:first[href*=foo]") Events jQuery("#header, #footer") Effects jQuery("#header, #footer").filter(":visible") Ajax Utilities
    26. 26. Overview of jQuery API Core Selectors attr() removeAttr() Attributes addClass() Traversing hasClass() toggleClass() Manipulation removeClass() CSS val() Events Effects Ajax Utilities
    27. 27. Overview of jQuery API Core Selectors add() children() eq() filter() Attributes closest() find() is() not() Traversing next() nextAll() slice() Manipulation prev() prevAll() CSS siblings() Events parent() parents() Effects andSelf() Ajax end() Utilities
    28. 28. Overview of jQuery API Core Selectors html() text() replaceWith() replaceAll() Attributes append() empty() Traversing appendTo() remove() prepend() Manipulation prependTo() clone() CSS after() insertAfter() Events before() insertBefore() Effects Ajax wrap() wrapAll() Utilities wrapInner()
    29. 29. Overview of jQuery API Core Selectors css() Attributes offset() offsetParent() Traversing postion() scrollTop() Manipulation scrollLeft() CSS height() width() Events innerHeight() innerWidth() Effects outerHeight() outerWidth() Ajax Utilities
    30. 30. Overview of jQuery API Core Selectors ready() blur() change() Attributes bind() one() click() dbclick() Traversing trigger() error() triggerHandler() focus() unbind() keydown() Manipulation keypress() live() keyup() CSS die() mousedown() mousenter() Events hover() toggle() mouseleave() mouseout() Effects mouseup() resize() Ajax scroll() select() submit() Utilities unload()
    31. 31. Overview of jQuery API Core Selectors show() hide() Attributes toggle() Traversing slideDown() slideUp() Manipulation slideToggle() CSS fadeIn() fadeOut() Events fadeTo() Effects animate() stop() Ajax Utilities
    32. 32. Overview of jQuery API Core Selectors jQuery.ajax() jQuery.ajaxSetup() jQuery.get() serialize() Attributes jQuery.getJSON() jQuery,getScript() serializeArray() Traversing jQuery.post() Manipulation load() CSS ajaxComplete() ajaxError() Events ajaxSend() ajaxStart() Effects ajaxStop() ajaxSuccess() Ajax Utilities
    33. 33. Overview of jQuery API Core Selectors jQuery.support jQuery.boxModel jQuery.trim() Attributes jQuery.each(), jQuery.param() Traversing jQuery.extend(), jQuery.grep(), Manipulation jQuery.makeArray(), jQuery.map(), CSS jQuery.inArray(), jQuery.merge(), Events jQuery.unique() Effects jQuery.isArray(), jQuery,isFunction() Ajax Utilities
    34. 34. A Few Examples Forms Chatboxes Menus Dropdowns Sliders Tabs Slideshows Games
    35. 35. jQuery Enhanced Forms
    36. 36. Menus and Dropdowns
    37. 37. Sliders and Slideshows
    38. 38. Technical ImplementationBuilding Real-Time Form ValidationUsing jQuery
    39. 39. Pros:• Large Community• Ease of use• Large library• Strong opensource community. (Several jQuery plugins available)• Great documentation and tutorials• Ajax support
    40. 40. Cons:• Regular updates that change existing behaviour• Overhead of adding extra javascript to page• Learning curve may not be short for some developersConclusions:• Conclusion In the end, jquery is popular for a reason. It willmake your website easier to control and to access through anybrowser.• By using this library, you can create or include complex plug-ins in a matter of minutes. This will make your website easier touse and as long as you have imagination, the possibilities areendless.
    41. 41. Thank You
    1. A particular slide catching your eye?

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

    ×