jQuery Fundamentals

  • 2,681 views
Uploaded on

jQuery fundamentals session which was delivered in DevConnections 2013

jQuery fundamentals session which was delivered in DevConnections 2013

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

Views

Total Views
2,681
On Slideshare
0
From Embeds
0
Number of Embeds
17

Actions

Shares
Downloads
144
Comments
0
Likes
5

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

Transcript

  • 1. Gil Fink Senior Architect SELA jQuery Fundamentals
  • 2. www.devconnections.com JQUERY FUNDAMENTALS AGENDA  Introduction to jQuery  Selectors  DOM Interactions  Ajax Support  Plugins
  • 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. www.devconnections.com JQUERY FUNDAMENTALS JQUERY USAGE STATISTICS 4 http://trends.builtwith.com/javascript/jQuery Websites using jQuery
  • 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. www.devconnections.com JQUERY FUNDAMENTALS DEMO Setting up the environment
  • 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. 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. www.devconnections.com JQUERY FUNDAMENTALS JQUERY‟S PROGRAMMING PHILOSOPHY GET >> ACT 9 $(“div”).hide() $(“<span/>”).appendTo(“body”) $(“:button”).click()
  • 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. 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. www.devconnections.com JQUERY FUNDAMENTALS DEMO The ready Function
  • 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. 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. 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. 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. www.devconnections.com JQUERY FUNDAMENTALS DEMO Selectors
  • 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. 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. www.devconnections.com JQUERY FUNDAMENTALS DEMO DOM Traversal
  • 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. www.devconnections.com JQUERY FUNDAMENTALS DEMO DOM Creation
  • 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. 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. www.devconnections.com JQUERY FUNDAMENTALS DEMO DOM Manipulation
  • 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. www.devconnections.com JQUERY FUNDAMENTALS DEMO Working with Events
  • 28. www.devconnections.com JQUERY FUNDAMENTALS AJAX  Ajax – Asynchronous JavaScript and XML 28
  • 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. 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. www.devconnections.com JQUERY FUNDAMENTALS DEMO Ajax
  • 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. www.devconnections.com JQUERY FUNDAMENTALS DEMO Writing a Simple Plugin
  • 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. www.devconnections.com JQUERY FUNDAMENTALS QUESTIONS
  • 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. 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. www.devconnections.com JQUERY FUNDAMENTALS THANK YOU Gil Fink Senior Architect gilf@sela.co.il @gilfink http://www.gilfink.net