• Save
Designers Guide To jQuery
Upcoming SlideShare
Loading in...5

Designers Guide To jQuery



An introduction to jQuery that was presented for Drupalcamp Vancouver 08

An introduction to jQuery that was presented for Drupalcamp Vancouver 08



Total Views
Views on SlideShare
Embed Views



10 Embeds 1,273

http://stevekrueger.com 827
http://www.stevekrueger.com 405
http://www.webgox.com 18
http://www.slideshare.net 9
http://www.agglom.com 7
http://anonymouse.org 2
http://translate.googleusercontent.com 2
http://egox.tumblr.com 1
http://webcache.googleusercontent.com 1
http://localhost 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • I’m no an expert Focus is on designers Questions should be forwarded on to the next session about jquery for module developers We’ll be going through some basic jquery theory, do 2 practical tutorials, then save for an open discussion at the end, maybe show off what other people have done with jquery Who has worked with jquery before? Who has worked with javascript? CSS? HTML?

Designers Guide To jQuery Designers Guide To jQuery Presentation Transcript

  • 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() { $( &quot;p&quot; ). hover (function () { $(this). css ({ backgroundColor:&quot;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!
    • stevekrueger.com/jquery-accordion-tutorial