Designers Guide To jQuery

Designers Guide to Presented by Steve Krueger

What is jQuery?

A fast, concise, JavaScript Framework

Think of it as JavaScript, but in shorthand

Simplifies cross-browser issues and compatibilities

Small file-size = faster load times

What is jQuery? Makes writing JavaScript fun! blasphemy!!!11

So what can jQuery do for me?

create animations on your website

add user interaction to your website

modify HTML markup without touching your HTML files

AJAX functionality with jQuery

Example uses of jQuery

Farbtastic colour picker (Colour Module in Drupal Core)

Spin.com (Quick Tabs Module)

Common Sense Media (various animations)

Where and How do I start?

Leverage pre-existing CSS knowledge towards learning jQuery

the jQuery Library at http://www.jquery.com/

jQuery is in Drupal core

an empty JS file (for our jQuery functions and animations)

Where and How do I start?

Every file begins with the following:

$(document). ready (function() { });

What is the DOM?

the hierarchy of your HTML tree structure

<html> <head> // Is an ancestor of <html> <title> Untitled </title> // is an ancestor of <head> </head> <body> // is a sibling of <head> and ancestor of <html> <div id=“ foobar ”> ……

What is the DOM?

the hierarchy of your HTML tree structure

<html> <head> <body> <title> Untitled <div> … ..

jQuery Example (selects all <p> elements and adds a class of ‘italic’ to them.) $(document). ready (function() { $( ‘p’ ). addClass ( ‘italic’ ); });

jQuery Example (hovering over any <p> will assign the CSS property background-color with the value of “yellow” to them.) $(document). ready (function() { $( "p" ). hover (function () { $(this). css ({ backgroundColor:"yellow” }); } });

jQuery Example $(this). parent (). find ( “div.foo” ) … <div id= “parent” > // is parent() <a href= “#” >Foo</a> // is (this) </div> <div class= “foo” > // is find(“div.foo”) …

Selectors - CSS $( ‘a’ ) // Gets all anchor tags in the document $( ‘div.foobar’ ) // Gets all div’s with the class of foobar $( ‘#container’ ) // Gets the element with the ID of container

Selectors - XPath $( ‘a [@href^=“ mailto: ”] ’ ) // Gets all anchor elements with an href that begins with mailto: $( ‘img [@title] ’ ) // Gets all images with title attributes $( ‘div [ul] ’ ) // Gets div’s that contain ul elements

for more info on XPath selectors:

http://www.w3schools.com/XPath/xpath_syntax.asp

jQuery Manipulation $(this). text ( “lorem ipsum” ) // inputs text into the selected element $(this). empty () // empties the current selected element $(this). append ( “<span>Foobar!</span>” ) // appends stuff !!

jQuery Events $( “p” ). hover (function() {… // when you hover over all p tags.. $( “a” ). click (function() {… // when you click on any anchor tag..

Tutorial Time!