Introduction to jQuery

jQuery Quick facts Is a cross-compatible JavaScript library Released in 2006 by John Resig Simplifies HTML document traversing, event handling, animating, and AJAX. Write less, do more!

Disclaimer! No lecture, tutorial, or video will be able to give you all possible information about jQuery. You MUST visit the jQuery API website to find extensive documentation and some examples for learning all the ins/outs of jQuery.jQuery API CSE 33453

Getting jQuery You can download and locally host a copy which can be downloaded here.here Hotlink Google’s copy which is available here.here I prefer hot linking to Google’s copy. CSE 33454

Including jQuery in web pages To include jQuery in your website, all you need is a script tag with its src pointed to the hosted location. CSE 33455

Using jQuery To use the jQuery library in your javascript, you can either use the jQuery() function or more simply the $(). $() creates a jQuery object CSE 33456

window.onload Previously, we used the window.onload event as the place to start using javascript that manipulates the HTML document. We used the window.onload event because that gets fired when all the objects in the document have been loaded into the DOM and all the images have finished loading. CSE 33457

.ready() event jQuery provides a simple statement that checks the document and waits until it’s ready to be manipulated called the ready event. You’ll put most of your code in this method $(document).ready(function(){ // Your code here }); CSE 33458

Get some Elements jQuery provides two approaches to select elements: 1.jQuery Selectors 2.jQuery Filter Methods Both approaches return a jQuery object which contains an array of all elements found. CSE 33459

jQuery Selectors Supports CSS selectors versions By element: $(“div”) 2.By id : $(“#id”) 3.By class: $(“.classname”) 4.By attribute: $(“a[href]”) 5.By attribute that contains value: $(“div[class*=‘warning’]”) 6.Any CSS selector will work CSE

jQuery selectors See here for complete list.here CSE

Your turn Quiz Google Bing You should be careful!! jQuery is super powerful and may be harmful to small babies -Select the google anchor element -Select the element with an id equal to nav -Select the element with the class equal to warning CSE

jQuery Example Link CSE

jQuery Filter Methods jQuery provides methods that will ‘filter’ sets return from a selector search..first() – reduces a set of matched elements to the first item.last() – reduces a set of matched elements to the last item.eq(index) – reduces a set of matched elements to the one at the specified index.slice( start [, end] ) - reduces a set of matched elements to the subset specified by the range of indices.find( selector|jQuery Object|element ) – search the descendants of the current set filtered by a selector, jQuery Object, or element. CSE

jQuery Object $(‘div’) will return a jQuery Object that contains an array of matched elements for the specified selector. Using that jQuery object, we can perform any jQuery method on that object. CSE

jQuery Method Examples $("div").find("a"); $("body *").first(); $("body *").last(); $("body > *").slice(0,2); //selects the first two children of the body element CSE

CSS Methods.addClass() – Adds the specified class(es) to each element of the matched set..hasClass() - Determine whether any of the matched elements are assigned the given class..removeClass() - Remove a single class, multiple classes, or all classes from each element in the set of matched elements. CSE

CSS Methods.addClass("warning"); //adds the warning class.addClass("warning critical"); //adds the warning & critical classes.hasClass("warning"); // returns true.hasClass("penguin"); // returns false.removeClass("warning"); //remove the warning class.removeClass("warning critical"); //remove the warning & critical classes.removeClass(); //removes all classes CSE

CSS Method.height() Gets the current computed height for the first element’s content area of the matched set. Returns a unit-less numeric pixel value (No parseInt() required). Recommended for math calculations CSE

CSS Method.height(value) Sets the CSS height of every element in the matched set value can be an integer representing a number value can be a String but it must include valid units CSE

.height() example $(window).height(); //685 $('div').height(); // 50 $('div').eq(0).height(100); //sets the height of the first div element of the matched set to 100px $('div').eq(0).height("100px"); //same as previous statement CSE

Other CSS height Methods.innerHeight() – get the height of the element including padding..outerHeight(includeMargin) – get the height of the element including padding, border, and optionally margin. CSE

CSS Method.width() Exactly like.height(), but using width CSE

CSS Element Coordinate Methods.offset() – returns the current coordinates of the first element in the matched set relative to the document..position() - returns the current coordinates of the first element in the matched set relative to the element’s containing block. CSE

CSS Methods.css().css(propertyName) – Get the value of a style property for the first element in the set of matched elements..css(propertyName, value) – set one or more CSS properties for the matched set. Get/set any CSS 1 & 2 property. Some of CSS3 isn’t supported by vanilla jQuery, but plugins can be used to support them. CSE

.css() examples $('p').css('height'); // "50px" $('p').css('color'); // "rgb(255, 255, 255)" $('p').css('width', '100px'); //sets the matched elements' width to 100px $('p:last').css('color', 'red'); //sets the last item of the matched elements color to red CSE

Mixing jQuery and DOM API Using the jQuery object of matched elements, we can access a particular element using array index notation. Doing this will return a DOM node. // returns a DOM node for the first matched element $('div')[0]; CSE

Mixing jQuery and DOM API You CAN’T use jQuery methods directly on a DOM node. $('div')[0].css('color', 'red'); //this WON'T work $('div')[2].height(); //this WON'T work CSE

Mixing jQuery and DOM API You CAN use DOM API properties and methods on DOM nodes directly. //The following uses DOM API properties on DOM nodes $('div')[0].style.color; // "red" $('div')[0].style.display; // "block" //The following uses DOM API methods on DOM nodes $('div')[0].addEventListener('click', function(e) { alert(e.target); }, false); CSE

Mixing jQuery and DOM API If you have a DOM node and want to use jQuery on it, use the node as the selector. //This example is a little wasteful var node = $('div')[0]; $(node).css('color'); // "black" //This example is useful $(document.body).css('display'); // "block" CSE

jQuery Events CSE

Subset of jQuery Events.click().dblclick().focus(),.focusin(),.focusout().hover().keydown(),.keyup(),.keypress().mousedown(),.mouseup().mousemove().ready() CSE

.hover() Binds two event handlers to the set of matched elements. One handler is executed when the mouse pointer enters an element. A second handler is executed when the point leaves the element. CSE

.hover() example CSE

Ways to use.hover() Fade in/out objects Make elements grow/shrink Change element’s class and take advantage of CSS CSE

.ready() Unlike the window.onload event, jQuery’s ready() is handled once the DOM hierarchy has been fully constructed. In most cases, this is the best place to attach jQuery event handlers or run other jQuery code. However if you need to perform operations on images, you’ll need to use jQuery’s load() event. CSE

.css() revisited Using.css() as a setter method only modifies the element’s inline style. You can unset applied inline styles by supplying an empty string as the property value. Note this does NOT remove a style that has been applied with a CSS rule in a stylesheet or element. CSE

Unsetting inline CSS property //this removes any inline color style applied $('div:first').css('color', ''); CSE

.css() revisited jQuery can equally interpret CSS and DOM style properties. So the following sets are equivalent: $('div').css('background-color', 'red'); $('div').css('backgroundColor', 'red'); $('div').css('margin-top'); // 100px $('div').css('marginTop'); //100px CSE

.css() revisited If you dislike having to set CSS properties one at a time, then you’re in luck. You can pass a JSON string which consists of property-value pairs to set multiple CSS properties. CSE

.css() with JSON //sets the bg color to black and the color to red all in one //method call $('div').css( { 'background-color' : 'black', 'color' : 'red' }); $('span').css( { 'position' : 'absolute', 'top' : '10px', 'left' : '200px' }); CSE

jQuery Effects CSE

jQuery Effects The jQuery library provides several techniques for adding animations to a webpage. You can create custom animations You can use standard pre-made animations CSE

Premade Fade Animations.fadeIn() - display matched elements by fading them to opaque..fadeOut() – display matched elements by fading them to transparent..fadeTo() – adjust the opacity of matched elements. CSE

.fadeIn().fadeIn() – animates matched elements to opaque over 400ms..fadeIn([duration]) – animates matched elements to opaque over duration ms. You can use the string fast and slow to indicate durations of 200 and 600ms. CSE

.fadeIn().fadeIn([callback]) – you can provide a function to call once the animation is complete. Using the.fadeIn() method on an element with display: none will change the element’s display value to inline or block. CSE

.fadeIn() Example //fades matched img element to opaque after 400ms $('img').fadeIn(); //fades matched img elements to opaque after 200ms; $('img').fadeIn('fast'); $('img').fadeIn(100, function() { alert('~100ms have elapsed since click'); }); CSE

.fadeOut() Very similar to fadeIn() except for the following: 1.Matched elements fade to transparent 2.At the end of the animation, the element’s display property is set to none. CSE

.fadeOut() Example $('img').fadeOut(100, function() { alert("The element's display property value is now none"); }); CSE

Premade hiding/showing animations.hide() – Hide the matched elements.show() – Display the matched elements CSE

.hide().hide() will immediately hide an element and is equivalent to.css(‘display’, ‘none’). The element display value is saved in cache..hide([duration]) will animate the width, height, and opacity of matched elements. After the animation completes, the elements display values are set to none. CSE

fadeOut() versus hide() CSE hide fadeOut

.show().show() will immediately reveal matched elements and is equivalent to.css(‘display’, ‘block’). The elements display property is restored to its previous value..show([duration])will animate the width, height, and opacity simultaneously for duration ms. CSE

Premade slide animations.slideDown() – Display the matched elements with a sliding motion..slideUp() – Hide the matched elements with a sliding motion. CSE

.slideDown() Animates the height of matched elements. This will cause elements beneath the selected elements to slide down as well..slideDown() – with no specified duration the animation will complete in 400ms..slideDown([duration]) – performs slide animation for duration ms. You can also specify fast and slow. CSE

.slideDown().slideDown([callback]) – If supplied, the callback function will be called with the animation completes. $('img').slideDown(); //performs animation for default 400ms $('img').slideDown('slow'); //performs slide animation for 600ms $('img').slideDown(300, function() { $(this).css('height'); }); CSE

.slideUp() Opposite of slideDown() Supports same parameters CSE

.slideToggle() Slides up or down depending on the current state of the element Supports same parameters as other slide functions CSE

Custom Animation If you need more power than the premade animations, then you can make your own. CSE

.animation() This method allows developers to create animations effects on any numeric CSS value. By default you can’t animate colors. You can‘t animate font-family, position, display, etc. You can however set these properties once the animation completes. CSE

Specifying properties to.animate() The animate() method accepts a property map similar to.css(). Use any numeric valued properties to animate. Provide a duration and callback function for when the animation completes. CSE

.animate() Example //Use JSON string to specify CSS property map $('img').animate({ height : '10px', width : '200px', opacity : '.2' }); $('img').animate({ height : '10px', width : '200px', opacity : '.2' }, 400); $('img').animate({ left : '500px', top : '200px'}, 200, function() { $(this).css('display', 'none'); } ); CSE

this in jQuery In callback functions, the this variable is a DOM node. That means you can’t use jQuery methods directly on it. How do we fix that? CSE

this example $('a').click( function(e) { console.log('this: ' + this); //this is a DOM node //e.target is the target of the click event. console.log('e.target: ' + e.target); if ( this === e.target ) { console.log('e.target === target'); } //stop the default action of the browser opening the link. e.preventDefault(); $(this).css('backgroundColor', 'green'); }); CSE

.each() function Iterates over a jQuery object executing a function for each matched element. Each time the function runs, it is passed the current loop iteration. The function is fired in the current context of the DOM element, so this refers to the element. CSE

.each() example $('div').each( function(i) { console.log( i + ': ' + this.tagName + ' ' + $(this).text();); }); CSE

jQuery Extras CSE

Store data with jQuery.data() Store arbitrary data associated with the specified element. Data is cleared when page reloads jQuery.data(element, key, value)

Get data with jQuery.data() Returns a value for the named data store on the element. jQuery.data(element, key); CSE

jQuery.data() example jQuery.data(document.body, 'foo', 'bar'); // 'bar' jQuery.data(document.body, 'foo'); // 'bar' //In chrome $0 is shorthand for document.body jQuery.data($0, 'json', "{ 'name' : 'fred' }"); // "{ 'name' : // 'fred'}" jQuery.data($0, 'json'); // "{ 'name' : 'fred'}" jQuery.data($0, 'id', 52); // 52 jQuery.data($0, 'id'); // 52 jQuery.data($0, 'isAwesome', true); // true jQuery.data($0, 'isAwesome'); // true CSE

You can also do AJAX with jQuery // Assign handlers immediately after making the request, // and remember the jqxhr object for this request var jqxhr = $.ajax( "example.php" ).done(function() { alert("success"); }).fail(function() { alert("error"); }).always(function() { alert("complete"); }); // perform other work here... // Set another completion function for the request above jqxhr.always(function() { alert("second complete"); }); CSE

jQuery UI Provides abstractions for low-level interaction and animation, advanced effects and high- level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. CSE