Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery Fundamentals

4,507 views

Published on

jQuery fundamentals session which was delivered in DevConnections 2013

Published in: Technology
  • Be the first to comment

jQuery Fundamentals

  1. 1. Gil Fink Senior Architect SELA jQuery Fundamentals
  2. 2. www.devconnections.com JQUERY FUNDAMENTALS AGENDA  Introduction to jQuery  Selectors  DOM Interactions  Ajax Support  Plugins
  3. 3. www.devconnections.com JQUERY FUNDAMENTALS WHAT IS JQUERY?  Open-Source and lightweight JavaScript library  Cross-browser support  DOM interaction  Ajax  Provides useful alternatives for common programming tasks (CSS, HTML)  Rich plugins eco-system 3
  4. 4. www.devconnections.com JQUERY FUNDAMENTALS JQUERY USAGE STATISTICS 4 http://trends.builtwith.com/javascript/jQuery Websites using jQuery
  5. 5. www.devconnections.com JQUERY FUNDAMENTALS GETTING STARTED  Download the latest version from http://www.jquery.com  Reference the jQuery script  jQuery can be found on major CDNs (Google, Microsoft) 5 <script type=„text/javascript‟ src=„jquery.min.js‟></script> <script type=„text/javascript‟ src=„http://ajax.googleapis.com/ajax/libs/jquery/[version – number]/jquery.min.js‟></script>
  6. 6. www.devconnections.com JQUERY FUNDAMENTALS DEMO Setting up the environment
  7. 7. www.devconnections.com JQUERY FUNDAMENTALS JQUERY SYNTAX 7 $.func(…); or $(selector).func1(…).func2(…).funcN(…); jQuery Object, can be used instead of jQuery Selector syntax, many different selectors allowed Chainable, most functions return a jQuery object Function parameters $ selector func (…)
  8. 8. www.devconnections.com JQUERY FUNDAMENTALS THE MAGIC $() FUNCTION  Create HTML elements on the fly  Manipulate existing DOM elements  Selects document elements  The full name of $() function is jQuery()  may be used in case of conflict with other frameworks 8 var el = $(“<div/>”) $(window).width() $(“div”).hide();
  9. 9. www.devconnections.com JQUERY FUNDAMENTALS JQUERY‟S PROGRAMMING PHILOSOPHY GET >> ACT 9 $(“div”).hide() $(“<span/>”).appendTo(“body”) $(“:button”).click()
  10. 10. www.devconnections.com JQUERY FUNDAMENTALS FLUENT API  Almost every function returns the jQuery object  Enables the chaining of function calls 10 $(“div”).show() .addClass(“main”) .html(“Hello jQuery”);
  11. 11. www.devconnections.com JQUERY FUNDAMENTALS THE READY FUNCTION  Use $(document).ready() to detect when a page is loaded and ready to use  Called once the DOM hierarchy is loaded to the browser memory 11 // First option $(document).ready(function() { // perform the relevant action after the page is ready to use }); // Second option $(function() { // perform the relevant action after the page is ready to use });
  12. 12. www.devconnections.com JQUERY FUNDAMENTALS DEMO The ready Function
  13. 13. www.devconnections.com JQUERY FUNDAMENTALS JQUERY SELECTORS  Selectors allow the selection of page elements  Single or multiple elements are supported  A selector identifies an HTML element that will be manipulated later on with jQuery code 13
  14. 14. www.devconnections.com JQUERY FUNDAMENTALS BASIC SELECTORS  $(„#id‟) – get element by id  $(„.className‟) – get element/s by a class name  $(„elementTagName‟) – get element/s by a tag name 14
  15. 15. www.devconnections.com JQUERY FUNDAMENTALS MORE SELECTOR OPTIONS  $(„element element‟) - descendants  $(„element > element‟) - children  $(„element1+ element2‟) – next element  $(„element:first‟) - first element  $(„element:last‟) - last element 15
  16. 16. www.devconnections.com JQUERY FUNDAMENTALS MORE SELECTOR OPTIONS  $(“element[attributeName]”) - has attribute  $(“element[attributeName=„attributeValue‟]”) - equals to  $(“element[attributeName^=„attributeValue‟]” ) - starts with  $(“element[attrinuteName$=„attributeValue‟]”) - ends with  $(“element[attributeName*=„attributeValue‟]”) - contains 16
  17. 17. www.devconnections.com JQUERY FUNDAMENTALS DEMO Selectors
  18. 18. www.devconnections.com JQUERY FUNDAMENTALS DOM TRAVERSAL  jQuery has a variety of DOM traversal functions  The functions help to select DOM elements  Offer a great deal of flexibility  Allow to act upon multiple sets of elements in a single chain  Can be combined with Selectors to create an extremely powerful selection toolset 18
  19. 19. www.devconnections.com JQUERY FUNDAMENTALS TRAVERSING THE DOM  There are many jQuery functions to traverse elements 19 .next(expr) // next sibling .prev(expr) // previous sibling .siblings(expr) // siblings .children(expr) // children .parent(expr) // parent .find(selector) // find inner elements with the given selector
  20. 20. www.devconnections.com JQUERY FUNDAMENTALS DEMO DOM Traversal
  21. 21. www.devconnections.com JQUERY FUNDAMENTALS DOM CREATION  Passing a HTML snippet string as the parameter to $() will result in new in-memory DOM element/s  Then, a jQuery object that refers to the element/s is created and returned 21 $('<p>My new paragraph</p>'). appendTo('body'); // append a new paragraph to the html body $('<a></a>'); // create a new anchor $('<img />'); // create a new image $('<input>'); // create a new input type
  22. 22. www.devconnections.com JQUERY FUNDAMENTALS DEMO DOM Creation
  23. 23. www.devconnections.com JQUERY FUNDAMENTALS DOM MANIPULATION  jQuery includes ways to manipulate the DOM  The manipulation can be:  To change one of the element‟s attributes  Set an element's style properties  And even modify the entire elements 23
  24. 24. www.devconnections.com JQUERY FUNDAMENTALS DOM MANIPULATION BASIC FUNCTIONS  .html(“html”) – set the element/s innerHTML to the given html  .text(“text”) – set the element/s textContent to the given text  .val(“value”) - set the current value of the element/s to the given value  .append, .prepend – append or prepend the given element to the selected element  .empty() – remove all children  .remove() – removes the selected element from the DOM 24
  25. 25. www.devconnections.com JQUERY FUNDAMENTALS DEMO DOM Manipulation
  26. 26. www.devconnections.com JQUERY FUNDAMENTALS EVENTS  jQuery includes cross-browser ways to bind events to event listeners  .bind() – event is bound to an element  .on() – event is bound to an element  Specific event registration  .click(callback)  .dblclick(callback)  And many other specific event functions 26
  27. 27. www.devconnections.com JQUERY FUNDAMENTALS DEMO Working with Events
  28. 28. www.devconnections.com JQUERY FUNDAMENTALS AJAX  Ajax – Asynchronous JavaScript and XML 28
  29. 29. www.devconnections.com JQUERY FUNDAMENTALS JQUERY AJAX FUNCTIONS  jQuery allows Ajax requests:  Allow partial rendering  Cross-browser support  Simple API  GET and POST support  Load JSON, XML, HTML or even scripts 29
  30. 30. www.devconnections.com JQUERY FUNDAMENTALS JQUERY AJAX FUNCTIONS – CONT.  jQuery provides functions for sending and receiving data:  $(selector).load – load HTML data from the server  $.get() and $.post() – get raw data from the server  $.getJSON() – get/post and return data in JSON format  $.ajax() – provide core functionality for Ajax requests  jQuery Ajax functions work with web services, REST interfaces and more 30
  31. 31. www.devconnections.com JQUERY FUNDAMENTALS DEMO Ajax
  32. 32. www.devconnections.com JQUERY FUNDAMENTALS PLUGINS  jQuery eco-system includes a big variety of plugins  jQueryUI – widgets/animation/UI interaction  jqGrid – grid based on jQuery  jqTree – tree based on jQuery  And more  You can write your own plugin by assigning it to $.fn  Remember to return jQuery in order to allow chaining 32
  33. 33. www.devconnections.com JQUERY FUNDAMENTALS DEMO Writing a Simple Plugin
  34. 34. www.devconnections.com JQUERY FUNDAMENTALS PERFORMANCE TIPS  Use chaining as much as possible  DOM manipulation is expensive  Cache selected elements if you need to use them later  Selector performance (from fastest to slowest):  Id  Element  Class  Pseudo 34
  35. 35. www.devconnections.com JQUERY FUNDAMENTALS QUESTIONS
  36. 36. www.devconnections.com JQUERY FUNDAMENTALS SUMMARY  jQuery is an open source, cross-browser and lightweight JavaScript library  It includes a huge plugins eco-system  It brings a lot of fun for JavaScript development
  37. 37. www.devconnections.com JQUERY FUNDAMENTALS RESOURCES  Session slide deck and demos – http://sdrv.ms/1e4J2sM  jQuery Website – http://www.jquery.com  My Website – http://www.gilfink.net  Follow me on Twitter – @gilfink
  38. 38. www.devconnections.com JQUERY FUNDAMENTALS THANK YOU Gil Fink Senior Architect gilf@sela.co.il @gilfink http://www.gilfink.net

×