Upcoming SlideShare
Loading in...5

Like this? Share it with your network








Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 Presentation Transcript

  • 1. Presentation On JQuery Prepared By Rahul Jain Lexcis Solution
  • 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. What exactly is jQueryjQuery is a JavaScript Library!• Dealing with the DOM• JavaScript Events• Animations• Ajax interactions
  • 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. Document Ready$(document).ready(function(){// Your code here});jQuery has a simple statement thatchecks thedocument and waits until its readyto be manipulated
  • 6. What’s the problem with JavaScript?
  • 7. JavaScript is a weakly typed,classless, prototype based OOlanguage, that can also be usedoutside the browser. It is not a browser DOM.
  • 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. Using jQuery we can do this $("tabletr:nth-child(odd)").addClass("odd");
  • 10. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd");jQuery function
  • 11. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery Selector (CSS expression)jQuery function
  • 12. Using jQuery we can do this jQuery("tabletr:nth-child(odd)").addClass("odd"); jQuery Selector (CSS expression)jQuery function jQuery Wrapper Set
  • 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. It really is the“write less, do more” JavaScript Library!
  • 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. Three Major Concepts of jQuery The $() function Get > Act Chainability
  • 17. The Magic $() function var el = $(“<div/>”)Create HTML elements on the fly
  • 18. The Magic $() function $(window).width()Manipulate existing DOM elements
  • 19. The Magic $() function $(“div”).hide();$(“div”, $(“p”)).hide(); Selects document elements (more in a moment…)
  • 20. The Magic $() function $(function(){…});Fired when the document is ready for programming. Better use the full syntax: $(document).ready(function(){…});
  • 21. jQuery’s programming philosophy is: GET >> ACT $(“div”).hide() $(“<span/>”).appendTo(“body”) $(“:button”).click()
  • 22. Almost every function returnsjQuery, which provides a fluent programming interface and chainability:$(“div”).show() .addClass(“main”) .html(“Hello jQuery”);
  • 23. Overview of jQuery API  Core  Selectors  Attributes  Traversing  Manipulation  CSS  Events  Effects  Ajax  Utilities
  • 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. 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. Overview of jQuery API Core Selectors attr() removeAttr() Attributes addClass() Traversing hasClass() toggleClass() Manipulation removeClass() CSS val() Events Effects Ajax Utilities
  • 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. 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. 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. 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. 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. 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. 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. A Few Examples Forms Chatboxes Menus Dropdowns Sliders Tabs Slideshows Games
  • 35. jQuery Enhanced Forms
  • 36. Menus and Dropdowns
  • 37. Sliders and Slideshows
  • 38. Technical ImplementationBuilding Real-Time Form ValidationUsing jQuery
  • 39. Pros:• Large Community• Ease of use• Large library• Strong opensource community. (Several jQuery plugins available)• Great documentation and tutorials• Ajax support
  • 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. Thank You