Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply



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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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…
  • 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") 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 Manipulation load() CSS ajaxComplete() ajaxError() Events ajaxSend() ajaxStart() Effects ajaxStop() ajaxSuccess() Ajax Utilities
    • 33. Overview of jQuery API Core Selectors jQuery.boxModel jQuery.trim() Attributes jQuery.each(), jQuery.param() Traversing jQuery.extend(), jQuery.grep(), Manipulation jQuery.makeArray(),, 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