Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
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.