An introduction to jQuery that was presented for Drupalcamp Vancouver 08

1. Designers Guide to Presented by Steve Krueger

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

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

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..