j Query 1021 Today j Query Some cool

j. Query 10/21

Today j. Query Some cool tools around the web Java. Script Libraries Drawing libraries HTML Frameworks Conventions

Java. Script in the Real World You need to make sure your code works on all browsers. Some very popular browsers don’t implement basic things according to a standard. Therefore, you often need to have special cases for basic things like event handling.

Why People Use Libraries… People use Java. Script libraries to avoid needing to take care of all these special cases themselves. Libraries handle different browser cases so you don’t have to.

j. Query One of the most popular Java. Script libraries. If you don’t use it, you will at least need to deal with it. What it does. Allows you to easily select HTML elements Allows you to manipulate these elements, define event handlers, do animation, and do AJAX calls more easily

Getting j. Query Download the Java. Script library from http: //jquery. com Can also use hosted locations like Google Library API http: //code. google. com/apis/libraries/ Also links you to some of the most popular Java. Script libraries.

Things j. Query can do 1. Make it easy to run a function when your page loads. 2. Select a bunch of DOM elements and do something with them 3. Handle events 4. Do AJAX calls easily

1. Run something when the page loads There are 4 overloads total, I will only discuss 2 today. j. Query(function (){…}): function passed in gets executed when the DOM loads. Equivalent to calling document. ready(); which is when all the DOM elements have loaded (but not necessarily all images). similar to window. onload = function() {…} except window. onload waits for images to load too.

Loading example… Pop up an alert saying “hello, world!” once the document loads. $(document). ready(function() { alert("hello world"); }); OR $(function(){ alert("hello, world!"); }); OR function hello. World() { alert("hello world"); } $(hello. World);

2. Select a bunch of DOM elements and do something with them j. Query has a focus on queries: You do a query to get a list of objects back (j. Query objects). You can then do interesting things with these objects. j. Query defines one global function: j. Query() So commonly used that j. Query defines a global symbol, $ for it.

j. Query Basics j. Query() function (or, $()) is ‘overloaded’ Remember when I said Java. Script doesn’t support overloading? Well, you can write overloading yourself by checking your parameters. Most basic parameter to $(): string representing a “css selector” A “CSS Selector” is a string (query) which selects some subset of elements in your DOM. For example, $("div") gets all divs, $(". class. Name") gets all elements whose class is class. Name.

j. Query example For loop that turns all h 1 elements red var h 1 s = $("h 1"); for (var i = 0; i < h 1 s. length; i++) { h 1 s[i]. style. color="red"; }

css() allows you to either get the css properties of an element or set the css properties of an element. Method is overloaded by checking for existence of variables. Setting the text color of element with my. Id to red: $("#my. Id"). css({color: "red"}); If multiple elements returned, executes on all elements found. Returns list of modified elements (chainable!)

css() Getting the text color of element with id “my. Id”: $(“#my. Id”). css(“color”); If multiple elements returned, executes on first element found. Does not return a list (terminates your chain). Setting the text color of element with id “my. Id” red: $(“#my. Id”). css({color: “red”});

More Useful CSS Functions Add a CSS class to an element: $("#my. Id"). add. Class("my. Class. Name"); Toggle a CSS class: If element has the class, remove it. If it doesn’t have the class, add it. $("#my. Id"). toggle. Class("highlight"); More at http: //api. jquery. com/category/css/

Getting/Setting HTML Content text() gets/sets the inner text of an element and its children. html() gets/sets the inner HTML of an element and its children. Example: Get the text of the first h 1 element: $(“h 1”). text(); Example: Set the text of each h 1 element to be “foobar” $(“h 1”). text(“foobar”); Example: Add section numbers to each header element $(“h 1”). text(function(n, current){ return “section “ + (n+1) + “: “ + current });

Getting/Setting Element Position offset() gets/sets the position of an element relative to the entire document. position() gets/sets the position of an element relative to its parent. Example: scroll all elements with class “scrolling” left to right: function scroll. Text(){ $(". scrolling"). offset(function(index, curpos){ return { left: (curpos. left + 5) % $(window). width(), top: (curpos. top) }; }); set. Timeout(scroll. Text, 30); }

data() Allows you to associate data with any j. Query object (i. e. object that’s a result of a query). Example: set some data for all div elements: $("div"). data("x", 5); Example: query data: $("div"). data("x"): get “x” property $("div"). data(): return object with all properties.

Manipulating Document Structure Methods that add/remove elements to your HTML document. You can either pass in Element objects or HTML strings. $("#my. Id"). append(document. create. Element("h r")); Adds an <hr> element at end of element with id my. Id $("#my. Id"). after("<hr />") Inserts an <hr> element directly after element with id my. Id.

Method Chaining Example Most j. Query methods operate on a list of objects, then return the modified list. This allows you to chain methods, i. e. do multiple things on one line Example: Set text color of all h 1 elements to green and add an hr element before and after these elements:

Method Chaining Example Most j. Query methods operate on a list of objects, then return the modified list. This allows you to chain methods, i. e. do multiple things on one line Example: Set text color of all h 1 elements to green and add an hr element before and after these elements: $(“h 1”). css({color: “green”}). before(“<hr />”). after(“<hr />”);

Method chaining explained $(“h 1”). css({color: “green”}). before(“<hr />”). after(“<hr />”);

Method chaining explained $(“h 1”). css({color: “green”}). before(“<hr />”). after(“<hr />”); <h 1>

Method chaining explained $(“h 1”). css({color: “green”}). before(“<hr />”). after(“<hr />”); <h 1> <h 1>

Method chaining explained $(“h 1”). css({color: “green”}). before(“<hr />”). after(“<hr />”); <h 1> <h 1> <hr/> <h 1>

Method chaining explained $(“h 1”). css({color: “green”}). before(“<hr />”). after(“<hr />”); <h 1> <h 1> <hr/> <hr/> <h 1> <hr/> end result

3. Event Handlers in j. Query Event handling is especially annoying because IE implements a different event API than other browsers. Instead of add. Event. Listener, uses attach. Event Makes it a big pain to do event handling cross-browser. j. Query makes it much easier for us to do event handling.

Event Registration in JQuery Example: clicking on <p> element toggles its background color. Define class “highlighted” to have a grey background color. $("p"). on("click", function(){ $(this). toggle. Class("highlighted"); })

Event Registration Details j. Query does pass in parameters to the event handler First argument is the event object, contains info about the event. Stuff like target, client. X, etc. For more information: http: //api. jquery. com/category/events/event-object/ Return value of your event handler is important: If it returns false the default action of event and any future propagation are canceled

Types of events handlers scroll() click() change() dblclick() focus() hover() keypress() load() Many more at http: //api. jquery. com/category/events/

Event Handler example Useful debugging blurb that shows you the position of your mouse relative to the window.

Animations in j. Query has pretty powerful animation framework which allows you to smoothly change css properties of DOM elements. Animations add polish to your site. Examples of animations: http: //api. jquery. com/fade. In/

Animation Basics Every function has a duration that says how long the effect should last for. Specify in ms or a string. “fast”, “slow”. Animations are asynchronous. Can specify a second parameter to your animation: the function to execute when your animation is complete.

Basic Visual Effects fade. In(speed, callback): $("div"). fade. In(); fades in all divs. $("div"). fade. In("fast"); fades in all divs fast. fade. Out(speed, callback) fade. To({fade options such as opacity to fade to}, speed, callback);

Basic Visual Effects hide(): Animates width and height to 0 show(): Animates width and height from 0 Toggle() Toggles between show and hide.

Queueing Animations You can execute one animation after another by doing: $("#my. Element"). fade. In(). fade. Out();

Custom Animations Use animate() to specify custom animation of css styles. $("img"). animate({height: 0}, {duration: "fast", complete: function(){…})) quickly animates all images to have a height of 0 and executes a specified function on completion. The first parameter specifies what properties you should animate to. The second parameter (function object) is optional.

Stopping and Delaying Animations Some people find animations jarring. j. Query. fx. off = true disables all j. Query animations. To stop a current element from animating, you can use stop(). This stops the current element from animating. You can also use delay(ms) to delay animations

Example Fading images on mouseover $("img"). mouseover(function(){ $(this). stop(). fade. To(300, 1. 0); }; $("img"). mouseout(function(){ $(this). stop(). fade. To(300, 0. 5); } Example taken from Java. Script: the definitive guide by David

Example Fading images on mouseover $("img"). mouseover(function(){ $(this). stop(). fade. To(300, 1. 0); }; $("img"). mouseout(function(){ $(this). stop(). fade. To(300, 0. 5); } Example taken from Java. Script: the definitive guide by David

4. AJAX calls getting or saving data from servers somewhere not getting into it in this class but check out $. ajax, $. get, $. post if you're interested.

Shout to other useful Java. Script Libraries Underscore. JS j. Query Prototype. JS Moo. Tools

UI Frameworks j. Query UI j. Query Mobile Bootstrap YUI

MVC Framework Tools Angular. JS Backbone

Drawing Libraries Raphaël Processing. JS Paper. JS

Web Effects http: //acko. net/blog/this-is-your-brain-on-css/ http: //www. nike. com/jumpman 23/aj 2012/ http: //www. inception-explained. com/