• Like
JQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
599
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
47
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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 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