Designers Guide To jQuery
8 likes1,357 views
The document provides an overview of jQuery, including: - jQuery is a JavaScript framework that simplifies cross-browser compatibility and allows modifying HTML without touching code. - jQuery can be used to create animations, add interactivity, and perform AJAX requests. Popular sites like Drupal use jQuery. - Getting started involves leveraging existing CSS skills and including jQuery in files, with code wrapped in document ready functions. - jQuery selects elements using CSS selectors and then allows manipulating and modifying the DOM through methods like adding/removing classes and content.
![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](https://image.slidesharecdn.com/designers-guide-to-jquery-1210446479672920-8/85/Designers-Guide-To-jQuery-14-320.jpg)
Designers Guide To jQuery
- 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() { $( "p" ). hover (function () { $(this). css ({ backgroundColor:"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..
Editor's Notes
- #2: 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?