1 / 27

jQuery

jQuery. What is jQuery ?. j Query is a fast , small, and feature- rich JavaScript library that simplifies HTML document traversing and manipulation event handling animation Ajax interactions for rapid web development. http://jquery.com. jQuery: the most popular JS library.

barid
Télécharger la présentation

jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jQuery

  2. What is jQuery? • jQuery is a fast, small, and feature-rich JavaScript library that simplifies • HTML document traversing and manipulation • event handling • animation • Ajax interactions for rapid web development http://jquery.com

  3. jQuery: the most popular JS library http://w3techs.com/technologies/history_overview/javascript_library/all

  4. jQuery: the most popular JS library http://w3techs.com/technologies/history_overview/javascript_library/all

  5. History • First released in January 2006 at BarCamp NYC by John Resig • Latest stable releases: 1.10.2 / July 3, 2013 2.0.3 / July 3, 2013

  6. Downloading jQuery • Library is distributed as jqueryXXX.js • Available in two formats • Compressed • Uncompressed • Library size: • 32 KB (production mode: minified and gzipped) • 91.6 KB 247 KB (development mode: uncompressed)

  7. jQuery features • DOM element selections (cross-browser) • DOM traversal and modification • Events • CSS manipulation • Effects and animations • Ajax • Extensibility through plug-ins • Utilities - user agent info, feature detection

  8. Adding jQuery to the project <html> <head> <script type="text/javascript" src="jquery.js“/> </script> <script type="text/javascript"> // add JavaScript and jQuery code here </script> </head> <body> <!-- add HTML content here --> </body> </html>

  9. CDN hosted jQuery • A number of large enterprises provide hosted copies of jQuery on existing CDN networks that are available for public use • CDN = Content delivery network • So, you can simply use hosted library, i.e. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  10. How to start • jQuery homepage http://jquery.com/provides a large number of tutorials, as well as detailed documentation and API reference • Good starting point is “How jQuery Works”article by jQuery author John Resig http://docs.jquery.com/How_jQuery_Works

  11. Ready event for the document • Most usually jQuery is used to read or manipulate the document object model (DOM) • It is necessary to ensure that jQuery code is executed (e.g. event handlers are added) as soon as the DOM is ready • Register a ready event for the document: <script> $(document).ready(function() { // do stuff when DOM is ready alert("Hello :)"); }); </script>

  12. Checking that jQuery works JavaScript alert will appear after each page refresh: <script> window.onload = function(){ alert("welcome"); } </script>

  13. Another simple jQuery example Show an alert when clicking a link: $(document).ready(function() { $("a").click(function() { alert("Click on Link!"); }); }); $("a") - jQuery selector, which selects all <a> elements on the page click() - binds a click event to all selected elements

  14. Using Selectors jQuery provides two approaches to select elements: • a combination of CSS and XPath selectors passed as a string to the jQuery constructor • $("div > ul a") • using several methods of the jQuery object All further examples are taken from http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

  15. Using Selectors document.getElementById("id") JavaScript: jQuery: $(document).ready(function() { $("#id").addClass("red"); }); .red { color: red; }

  16. Using Selectors Selecting child elements: $(document).ready(function() { $("#orderedlist > li").addClass("blue"); }); Selects all child li-s of the element with the id orderedlist and adds the class "blue".

  17. Using Selectors Add and remove the class when the user hovers the li element, but only on the last element in the list: $(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); },function(){ $(this).removeClass("green"); }); });

  18. Using Selectors $(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).append( " BAM! " + i ); }); }); What does this code do?

  19. Using Events For every JavaScript onxxxevent available, like onclick, onchange, onsubmit, there is a jQuery equivalent http://api.jquery.com/category/events/

  20. Doing Ajax with jQuery Sending GET Ajax request: • jQuery.get( • url • [, data] • [, success(data, textStatus, jqXHR)] • [, dataType] ) url: a string containing the URL data: a map or string that is sent to the server with the request success(data, textStatus, jqXHR): a callback function that is executed if the request succeeds dataType: the type of data expected from the server.

  21. Spring Controller for Ajax request @Controller public class SubscribeController { @ResponseBody @RequestMapping(value = "/subscribeAsync/{id}", method = RequestMethod.POST) public String subscribeAsync(@PathVariable String id) { // do processing // send response return "Done"; } } http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/bind/annotation/ResponseBody.html

  22. Doing Ajax with jQuery Fetch the requested HTML snippet and insert it on the page $.get('ajax/test.html', function(data) { $('.result').html(data); alert('Load was performed.'); });

  23. Doing Ajax with jQuery Rating example: $(document).ready(function() { // generate markup $("#rating").append("Please rate: "); for (var i = 1; i <= 5; i++ ){ $("#rating").append( "<a href='#'>" + i + "</a> "); } … … …

  24. Doing Ajax with jQuery • // add markup to container and apply click handlers • $("#rating a").click(function(e){ • e.preventDefault(); // stop normal link click • // send request • $.post("rate.php", {rating: $(this).html()}, • function(xml) { • // format and output result • $("#rating").html( • "Thanks for rating, current average: " + • $("average", xml).text() + • ", number of votes: " + • $("count", xml).text() • ); • }); • }); • });

  25. Animations and Effects Simple animations with jQuery can be achieved with show() and hide() $(document).ready(function(){ $("a").toggle(function(){ $(".stuff").hide('slow'); },function(){ $(".stuff").show('fast'); }); }); toggle() – bind two or more handlers to the matched elements, to be executed on alternate clicks hide(),show() – effects to hide/show the matched elements

  26. jQuery UI • Provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets that you can use to build highly interactive web applications • Interactions • Widgets • Utilities • Effects • http://jqueryui.com/

  27. References jQuery homepage http://jquery.com/

More Related