270 likes | 497 Views
jQuery. What is jQuery ?. j Query is a fast and concise JavaScript library that simplifies HTML document traversing event handling animating Ajax interactions for rapid web development. http://jquery.com. jQuery: the most popular JS library.
E N D
What is jQuery? • jQuery is a fast and concise JavaScript library that simplifies • HTML document traversing • event handling • animating • Ajax interactions for rapid web development http://jquery.com
jQuery: the most popular JS library http://w3techs.com/technologies/history_overview/javascript_library/all
jQuery: the most popular JS library http://w3techs.com/technologies/history_overview/javascript_library/all
History • First released in January 2006 at BarCamp NYC by John Resig • Latest stable release: 1.8.3 / November 13, 2012
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)
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
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>
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. http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
How to start using jQuery • 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
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: $(document).ready(function() { // do stuff when DOM is ready });
Checking that jQuery works JavaScript alert will appear after each page refresh: <script> window.onload = function(){ alert("welcome"); } </script>
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
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
Using Selectors document.getElementById("id") JavaScript: jQuery: $(document).ready(function() { $("#id").addClass("red"); });
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".
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"); }); });
Using Selectors $(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).append( " BAM! " + i ); }); }); What does this code do?
Using Events For every JavaScript onxxxevent available, like onclick, onchange, onsubmit, there is a jQuery equivalent http://api.jquery.com/category/events/
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.
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
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.'); });
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> "); } … … …
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() • ); • }); • }); • });
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
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/
References jQuery homepage http://jquery.com/