The jQuery library

What is jQuery ? A javascript lightweight library Is very easy to use Is powerful Is cross-browser compatible Downloadable from jQuery.com, 2 versions (a production version and a development version)

jQuery features DOM structure/nodes and CSS manipulation CSS-like selectors Strong event handling support Effects, transitions and animations AJAX and simple data support Javascript utility methods

Linking to the jQuery library Use a downloaded version: Use an online version:

jQuery code location $(document).ready(function() { … jquery code.. }); the document ready event is fired when the DOM is fully loaded a short-hand alternative: $(function() { … jquery code.. });

jQuery method call syntax methods called on jQuery selections are in the $.fn namespace, and automatically receive and return the selection as this. Ex.: $(“p”).html(“Test paragraph”); $(“div#id”).remove(); methods in the $ namespace are generally utility-type methods, and do not work with selections Ex.: $.each([ "foo", "bar", "baz" ], function( idx, val ) { console.log( "element " + idx + " is " + val ); });

Methods called on jQuery selections Simple syntax: $(selector).action(params) Ex.: $(“div.class1”).hide(); Chain syntax: $(selector).action1(params).action2(params)… Ex.: $( "#content" ).find( "h3" ).html( "new text for the h3!" ); or $( "#content" ).find( "h3" ).html( "new text for the third h3!" ); these methods return the jQuery object

jQuery selectors Has a CSS-like syntax for selectors: $(“*”) – selects all elements $(“#someid”) – selects element with ID attribute=someid $(“.someclass”) – selects element with Class attribute=someclass $(“div”) – selects all the DIV elements $(“.class1.class2”) – selects elements with classes class1 and class2 $(“div p”) – selects all elements that are inside a $(“p:first”) – selects the first p element $(“p:last”) – selects the last p element $(“tr:even”) – selects all even tr elements $(“tr:odd”) – selects all odd tr elements $(“ul li:eq(2)”) - selects the 3rd element from an unordered list $(“:contains(‘some text’)”) – select all elements containing the text

jQuery Selectors (2) $(this) – selects the current html element $(“#div1 ul li.innerdiv”) – compound CSS selector $(“h1,h2,h3”) – selects all h1, h2 or h3 elements $(“div:first-child”) – selects div elements that are the first child of their parents $(“div:first-of-type”) - selects div elements that are the first div child of their parents $(“div:last-child”) - selects div elements that are the last child of their parents $(“div:last-of-type”) - selects div elements that are the last div child of their parents $(“div:nth-child(3)”) - selects div elements that are the 3rd child of their parents $(“div:nth-of-type(3)”) - selects div elements that are the 3 rd div child of their parents $(“div > p”) – selects elements p which are direct child of a div

jQuery Selectors (3) $("div + p") – selects p elements that are the nearest siblings of a div element $("div ~ p") – selects p elements that are siblings of div elements $("ul li:eq(3)") – selects list elements with a list index of 3 $("ul li:gt(3)") – selects list elements with a list index greater than 3 $("ul li:lt(3)") – selects list elements with a list index less than 3 $(“[attribute]”) – selects elements with a specific attribute $(“[attribute=value]”) – selects elements having an attribute equal to a specific value $(“[attribute!=value]”) - selects elements having an attribute different than a specific value $(“[attribute$=value]”) - selects elements with an attribute ending with a specific value $(“[attribute^=value]”) - selects elements with an attribute starting with specific value $(“[attribute*=value]”) – attribute contains value

jQuery events has support for most html events mouse events: click(), dblclick(), focus(), focusin(), focusout(), blur(), hover(), mousedown(), mouseenter(), mouseleave(), mousemove(), mouseout(), mouseover(), mouseup() keyboard events: keypress(), keyup(), keydown() form events: submit(), change() window events: load(), resize(), ready(), scroll(), unload()

Binding events to handling functions $(selector).event(function() { …. }); Ex.: $(“div”).dblclick(function() { $(this).hide(); }); $(selector).bind(“event”, function() { … }); Ex.: $(“li”).bind(“click”, function() { console.log(“list item was clicked”); }); $(selector).unbind() – remove all event handlers from selected elements $(selector).on(“event1 event2..”, function() { …}); Ex.: $(“p”).on(“click”, function() { $(this).css(“background-color: red”); }); $(selector).off(“event”) $(selector).one(“event”, function) – run event only once

The jquery event object is passed to the event handling function along with this (the selected element) $(“form”).on(“submit”, function(eventObj) { // cancel default functionality for specific event (e.g. form submit) eventObj.preventDefault(); … }); properties of eventObj: pageX, pageY – mouse position type – type of event data – data can be passed to handling function when evt is bound target – DOM element that initiated the event

jQuery and css getting css properties: $(“p”).css(“background-color”) setting css properties: $(“p”).css(“font-size”, “14px”) $(“p”).css({color: “red”, width: “100%”, height: “100%”}) adding, removing, toggling css classes: css code:.fancy { border: 1px dotted #00eeff; background: url(“pic.jpg”); } jquery code: $(“#div1”).addClass(“fancy”); $(“#div1”).removeClass(“fancy”); $(“#div1”).toggleClass(“fancy”);

jQuery effects – hide/show $(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback); where speed is “slow”, “fast” or miliseconds and callback is a function called after the effect is done; toggle() toggles between hide() and show() Ex.: $("button").click(function(){ $(“p”).hide(20); $(“p#id1”).show(“slow”); }); $("button").click(function(){ $("p").toggle(); });

jQuery effects - fading $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback); where speed is “slow”, “fast” or miliseconds and callback is a function called after the effect is done; fadeTo() fades to an opacity Ex.: $(“button”).click(function() { $(“#div1”).fadeIn(“2000”); });

jQuery effects - sliding $(selector).slideUp(speed,callback); $(selector).slideDown(speed,callback); $(selector).slideToggle(speed,callback); where speed is “slow”, “fast” or miliseconds and callback is a function called after the effect is done; Ex.: $(“button”).click(function() { $(“#div1”).slideUp(“2000”); });

jQuery effects - animations $(selector).animate({params},speed,callback); where speed is “slow”, “fast” or miliseconds and callback is a function called after the effect is done; Ex.: $(“button”).click(function() { $(“#div1").animate({left:’100px’, top: ’75px’}); }); $(“button”).click(function() { $(“#div1”).animate({ left: ‘500px’, opacity: ‘0.3’, height: ‘100px’, width: ’60px’ });

Getting/setting html content text() - sets or returns the text content of selected elements console.log($(“p”).text()); $(“p”).text(“Test..”); html() - sets or returns the content of selected elements (including HTML markup) console.log($(“div”).html()); $(“div”).html(“ Test ”); val() - sets or returns the value of form fields attr() – get or set attribute values console.log($(“a#id1”).attr(“href”)); $(“a#id1”).attr(“href”, “

Adding/removing html content $("p").append("Some appended text."); $("p").prepend("Some appended text."); $("p").after(“ test "); $("p").before(“ test "); $("p").remove(); $("p").empty();