A basic intro into jQuery talk I prepared for a Meetup.com talk. You can grab the code here: http://www.sennza.com.au/jQuery-intro.zip

1. jQuery: Love at first sight...or site! Bronson Quick sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza

2. What we’ll cover The basics A brief intro into the jQuery including: Adding jQuery to a web page Calling jQuery after the DOM has loaded Basic selectors Basic events & callback functions Chaining Slide 2 of 14 rethink | redesign | results

4. Online

5. Highly secured networkOnce you know the environment then you will know if you have to ship your app/page with jQuery or if you can use a Content Delivery Network (CDN). Slide 3 of 14 rethink | redesign | results

6. Using jQuery I was used! Use Google’s CDN <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> Given the number of pages using jQuery these days there is a good chance that jQuery will be already cached on the users browser. Speed up the page load time! Before we can add some jQuery sexiness we need to let the browser know that we are going to do something! The long way $(document).ready(function(){ alert(‘The world is a vampire!’); }); The ‘quick’ way $(function(){ alert(‘The world is a vampire!’); }); Slide 4 of 14 rethink | redesign | results

7. Selectors ID, classes & elements Get element by class name <ul> <li class="awesome">Google Search</li> <li class="awesome">Google Docs</li> <li>Google Chrome</li> </ul> $(function(){ $(“.awesome").css({ 'backgroundColor':'#652D90', 'color': '#fff' }); }); <div id=“yo”> <p>I like stuff. Do you like stuff?</p> </div> Get an element by ID $(function(){ $("#yo").css({ 'backgroundColor':'#652D90', 'color': '#fff' }); }); Slide 5 of 14 rethink | redesign | results

8. Selectors ID, classes & elements Pseudo class selectors <table> <tr><td>I'm even!</td></tr> <tr><td>I'm odd!</td></tr> <tr><td>I'm even!</td></tr> <tr><td>I'm odd!</td></tr> </table> $(function(){ $("td:even").css({ 'backgroundColor':'#652D90', 'color': '#fff' }); }); <h1>I am a heading!</h1> $(function(){ $(“h1").css({ 'backgroundColor':'#652D90', 'color': '#fff' }); }); Remember: This will get all HTML elements on the page so if you had multiple <h1>’s this change would apply to all of them. A great list of pseudo class selectors http://css-tricks.com/pseudo-class-selectors/ Slide 6 of 14 rethink | redesign | results

9. Events Lets interact with something Some handy events .click() .dblclick() .focus() .keypress() .mouseover() .hover() <h1>I am a heading!</h1> $(function(){ $("h1").click(function(){ $(this).css({ 'backgroundColor':'#652D90', 'color': '#fff' }); }); }); The full list of events http://api.jquery.com/category/events/ Slide 7 of 14 rethink | redesign | results

10. Effects Peek a boo! Fast, slow or milliseconds .hide(‘fast’); .hide(‘slow’); .hide(4000); $(function(){ $("#hide").click(function(){ $("h1").hide('fast'); }); $("#show").click(function(){ $("h1").show(‘slow’); }); }); <h1>I am a heading!</h1> <a href=“#” title=“Hide heading” id=“hide”>Hide heading</a> <a href=“#” title=“Show heading” id=“show”>Show heading</a> $(function(){ $(“#hide”).click(function(){ $(“h1”).hide(); }); $(“#show”).click(function(){ $(“h1”).show(); }); }); Slide 8 of 14 rethink | redesign | results

11. Effects Slide up, slide down, toggle Fast, slow or milliseconds $(function(){ $(“#up”).click(function(){ $(“#box”).slideUp(‘fast’); }); $(“#down”).click(function(){ $(“#box”).slideDown(‘slow’); }); }); <div id=“box”>I’m a box!</div> <a href=“#” title=“Slide up” id=“up”>Slide up</a> <a href=“#” title=“Slide down” id=“down”>Slide down</a> $(function(){ $(“#up”).click(function(){ $(“#box”).slideUp(); }); $(“#down”).click(function(){ $(“#box”).slideDown(); }); }); Slide 9 of 14 rethink | redesign | results

12. Effects I’m fading away to nothing! Fast, slow or milliseconds $(function(){ $(“#in”).click(function(){ $(“#box”).fadeIn(‘slow’); }); $(“#out”).click(function(){ $(“#box”).fadeOut(‘fast’); }); }); <div id=“box”>I’m a box!</div> <a href=“#” title=“Fade In” id=“in”>Fade In</a> <a href=“#” title=“Fade Out” id=“out”>Fade Out</a> $(function(){ $(“#in”).click(function(){ $(“#box”).fadeIn(); }); $(“#out”).click(function(){ $(“#box”).fadeOut(); }); }); The full list of effects http://api.jquery.com/category/effects/ Slide 10 of 14 rethink | redesign | results

13. Chaining Alice in Chains! <div id="box">I'm a box!</div> <a href="#" title="Chaining” id="chain">Chained</a> $(function(){ $("#chain").click(function(){ $("#box").fadeOut('slow').fadeIn(4000).slideUp(); }); }); Slide 11 of 14 rethink | redesign | results

14. Links Some useful jQuery links http://jquery.com/ http://api.jquery.com/ http://jqueryui.com/ Slide 12 of 14 rethink | redesign | results

15. Thanks & Questions Blatant plug for our WordPress Meetup group WordPress Brisbane http://www.meetup.com/WordPress-Brisbane Slide 13 of 14 rethink | redesign | results

16. bronson@sennza.com.au http://www.sennza.com.au/ http://www.youtube.com/user/BronsonQuick Twitter: @sennza rethink | redesign | results