jQuery JavaScript is a powerful language but it is not always easy to work with. jQuery is a JavaScript library that helps with: – HTML document traversal – HTML manipulation – Event handling – Animation – Ajax Get it here: Learn more here:

$ Syntax In jQuery you will often be calling functions on jQuery objects. This selects all buttons on the current page and applies someFunction() to them. $(“button”).someFunction(); jQuery object representing one or more HTML elements Function to apply

$ Syntax Sometimes you will be calling jQuery functions that are not associated with HTML elements at all. These are called jQuery core methods. $.ajax(...) $.each(...)

Selectors Selectors “select” elements in the DOM. This is one of the best parts of jQuery – you can easily traverse the DOM and grab the element or elements that you need with CSS selectors. $(“button”) selects all button elements $(“.fancy”) selects all elements with the class fancy $(“#myElement”) selects one element with the ID myElement $(“nav.fancy”) selects all elements with the class fancy that are inside a nav element Learn more here: core/selecting-elements/ core/selecting-elements/ And here:

Selectors – More Efficient It's actually faster to use the jQuery find() function: $(“nav.fancy”) $(“nav”).find(“.fancy”) And while you can use pseudo classes, it's faster to use the jQuery functions: $(“li:first”) $(“li”).first()

Selectors – More Efficient More options with Filter... Select elements with both class1 and class2 $(“.class1.class2”) $(“.class1”).filter(“.class2”)

Selectors You can also step forward and back $(“li”).first() $(“li”).first().next() $(“li”).last().prev() Walk up the DOM tree $(“li”).parent() Walk down the DOM tree $(“ul”).children(“.someClass”)

Selectors - Closest Just because you can use parent() doesn't mean you always should! //Finds a specific element $(“span”).parent().parent(); This code is easier to read: //Finds the nearest ancestor //li element $(“span”).closest(“li”);

Change Text Let's say you want to dynamically change the text in an h1 tag: $(“h1”).text(“Hello!”); Or maybe you just want to grab the text to do something with it later: var text = $(“h1”).text();

Document Ready If you just write your JavaScript or jQuery in a script tag without wrapping it in any functions, it will execute as soon as the browser reads it. But that would be before the DOM has finished loading, so it won't find your HTML elements. You can execute code when the document has finished loading (not including images that may still be downloading) by using the “document ready” function: $(document).ready(function() { // Your code here. });

Adding Elements Create an element: var listItem = $(“ Some Text ”); Add an element to the DOM: $(“ul”).append(listItem); //add as last child $(“ul”).prepend(listItem); //add as first child $(“ul”).before(listItem); //add before ul $(“ul”).after(listItem); //add after ul

Adding Elements  One way: $(“ul”).append(listItem); //add as last child $(“ul”).prepend(listItem); //add as first child $(“ul”).before(listItem); //add before ul $(“ul”).after(listItem); //add after ul Another way: listItem.appendTo($(“ul”)); //add as last child listItem.prependTo($(“ul”)); //add as first child listItem.insertBefore($(“ul”)); //add before ul listItem.insertAfter($(“ul”)); //add after ul

Removing Elements Removing one or more elements is simple: $(“li”).remove()

Event Handlers Add a click event handler to all button elements: $(“button”). click(function(event) { } ); Anonymous Function

Passing Functions as Arguments If you wanted to pass arguments into the button's click function Wrong $(“button”).click(myFunction(myParam)); Right $(“button”).click(function () { myFunction(myParam); });

Event Handlers – Prevent Default Behavior You can prevent the default behavior of an event using the following: $(“button”).click(function(event) { event.preventDefault(); });

$(this) Sometimes you will want to refer to the element that the event occurred on. In many languages, including JavaScript, there is a this keyword. $(“button”).click(function(event) { $(“button”).text(“Clicked”) //WRONG this.text(“Clicked”); //WRONG $(this).text(“Clicked”); //RIGHT });

Changing CSS Classes Add or Remove a CSS class: $(“button”).addClass(“someClass”); $(“button”).removeClass(“someClass”);

HTML 5 Data HTML 5 added data attributes:... How Much? $(“button”).click(function() { var price = $(this).closest(“.product”).data(“price”); //do something with the price });

HTML 5 Data Another way to write it How Much? $(“.product”).on(“click”, “button”, function() { var price = $(this).closest(“.product”).data(“price”); //do something with the price });

Form Data To pull data out of an input box... $(“#someInput”).val(); To set data in an input box... $(“#someInput”).val(“new value”);

Show / Hide Show or hide element(s). There are optional parameters for animation available. Documentation: $(“selector”).show(); $(“selector”).hide(); Documentation: $(“selector”).slideUp(); $(“selector”).slideDown(); $(“selector”).slideToggle();

Callbacks A callback is a function that is called automatically at a later time. For example, if you make an AJAX request, it may take some time for the data to return (even if only a second). The beauty of AJAX is that it's asynchronous – in other words, code execution continues without waiting for the data to be returned. You may, however, want to execute code when the AJAX request returns. You can specify a callback function to handle this need.

AJAX var jqxhr = $.ajax( "URL_To_Service" ).done(function(data) { alert( "success" ); }).fail(function() { alert( "error" ); }).always(function() { alert( "complete" ); });