Your SlideShare is downloading. ×
Designers Guide To jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Designers Guide To jQuery

7,145
views

Published on

An introduction to jQuery that was presented for Drupalcamp Vancouver 08

An introduction to jQuery that was presented for Drupalcamp Vancouver 08

Published in: Technology

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,145
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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?
  • Transcript

    • 1. Designers Guide to Presented by Steve Krueger
    • 2. 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
    • 3. What is jQuery? Makes writing JavaScript fun! blasphemy!!!11
    • 4. 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
    • 5. Example uses of jQuery
      • Farbtastic colour picker (Colour Module in Drupal Core)
      • Spin.com (Quick Tabs Module)
      • Common Sense Media (various animations)
    • 6. 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)
    • 7. Where and How do I start?
      • Every file begins with the following:
      $(document). ready (function() { });
    • 8. 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 ”> ……
    • 9. What is the DOM?
      • the hierarchy of your HTML tree structure
      <html> <head> <body> <title> Untitled <div> … ..
    • 10. jQuery Example (selects all <p> elements and adds a class of ‘italic’ to them.) $(document). ready (function() { $( ‘p’ ). addClass ( ‘italic’ ); });
    • 11. 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” }); } });
    • 12. 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”) …
    • 13. 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
    • 14. 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
    • 15. 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 !!
    • 16. jQuery Events $( “p” ). hover (function() {… // when you hover over all p tags.. $( “a” ). click (function() {… // when you click on any anchor tag..
    • 17. Tutorial Time!
      • stevekrueger.com/jquery-accordion-tutorial