jQuery

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

jQuery: the most popular JS library

jQuery: the most popular JS library

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

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 // add JavaScript and jQuery code here

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.

How to start jQuery homepage 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

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 alert("Hello :)"); });

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

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 elements on the page click() - binds a click event to all selected elements

Using Selectors jQuery provides two approaches to select elements: 1.a combination of CSS and XPath selectors passed as a string to the jQuery constructor $("div > ul a") 2.using several methods of the jQuery object All further examples are taken from

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

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

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

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 onxxx event available, like onclick, onchange, onsubmit, there is a jQuery equivalent

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 public class = "/subscribeAsync/{id}", method = RequestMethod.POST) public String String id) { // do processing // send response return "Done"; } 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( " " + i + " "); } … … …

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

References jQuery homepage