Your SlideShare is downloading. ×
0
jQuery:<br />Love at first sight...or site!<br />Bronson Quick<br />sennza  |  (07) 3040-1545  |  bronson@sennza.com.au  |...
What we’ll cover<br />The basics<br />A brief intro into the jQuery including:<br /> Adding jQuery to a web page<br /> Cal...
Adding jQuery<br />Give it to me jQuery! Uhuh, Uhuh!<br />Use Google’s CDN<br /><script src="http://ajax.googleapis.com/aj...
 Online
 Highly secured network</li></ul>Once you know the environment then you will know if you have to ship your app/page with j...
Using jQuery<br />I was used!<br />Use Google’s CDN<br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jq...
Selectors<br />ID, classes & elements<br />Get element by class name<br /><ul><br /><li class="awesome">Google Search</li>...
Selectors<br />ID, classes & elements<br />Pseudo class selectors<br /><table><br /><tr><td>I'm even!</td></tr><br /><tr><...
Events<br />Lets interact with something<br />Some handy events<br />.click()<br />.dblclick()<br />.focus()<br />.keypres...
Effects<br />Peek a boo!<br />Fast, slow or milliseconds<br />.hide(‘fast’);<br />.hide(‘slow’);<br />.hide(4000);<br />$(...
Effects<br />Slide up, slide down, toggle<br />Fast, slow or milliseconds<br />$(function(){<br />	$(“#up”).click(function...
Effects<br />I’m fading away to nothing!<br />Fast, slow or milliseconds<br />$(function(){<br />	$(“#in”).click(function(...
Chaining<br />Alice in Chains!<br /><div id="box">I'm a box!</div><br /><a href="#" title="Chaining” id="chain">Chained</a...
Links<br />Some useful jQuery links<br />http://jquery.com/<br />http://api.jquery.com/<br />http://jqueryui.com/<br />Sli...
Upcoming SlideShare
Loading in...5
×

J Query - Your First Steps

1,389

Published on

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

Published in: Education
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,389
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "J Query - Your First Steps"

  1. 1. jQuery:<br />Love at first sight...or site!<br />Bronson Quick<br />sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza<br />
  2. 2. What we’ll cover<br />The basics<br />A brief intro into the jQuery including:<br /> Adding jQuery to a web page<br /> Calling jQuery after the DOM has loaded<br /> Basic selectors<br /> Basic events & callback functions<br /> Chaining<br />Slide 2 of 14<br />rethink | redesign | results<br />
  3. 3. Adding jQuery<br />Give it to me jQuery! Uhuh, Uhuh!<br />Use Google’s CDN<br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br />Given the number of pages using jQuery these days there is a good chance that jQuery will be already cached on the users browser.<br />Speed up the page load time!<br />See if it’s working:<br />$('<p>Oh god yes!</p>').appendTo('body');<br />Before we use get to fool around with the awesomeness that is jQuery we have to tell the browser what we’re talking ‘about!<br />Locally or from a CDN<br />Where is your page going to be viewed?<br /><ul><li> Locally (Offline)
  4. 4. Online
  5. 5. Highly secured network</li></ul>Once 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).<br />Slide 3 of 14<br />rethink | redesign | results<br />
  6. 6. Using jQuery<br />I was used!<br />Use Google’s CDN<br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br />Given the number of pages using jQuery these days there is a good chance that jQuery will be already cached on the users browser.<br />Speed up the page load time!<br />Before we can add some jQuery sexiness we need to let the browser know that we are going to do something!<br />The long way<br />$(document).ready(function(){<br /> alert(‘The world is a vampire!’);<br />});<br />The ‘quick’ way<br />$(function(){<br /> alert(‘The world is a vampire!’);<br />});<br />Slide 4 of 14<br />rethink | redesign | results<br />
  7. 7. Selectors<br />ID, classes & elements<br />Get element by class name<br /><ul><br /><li class="awesome">Google Search</li><br /><li class="awesome">Google Docs</li><br /><li>Google Chrome</li><br /></ul><br />$(function(){<br /> $(“.awesome").css({<br /> 'backgroundColor':'#652D90',<br /> 'color': '#fff'<br /> });<br />});<br /><div id=“yo”><br /><p>I like stuff. Do you like stuff?</p><br /></div><br />Get an element by ID<br />$(function(){<br /> $("#yo").css({<br /> 'backgroundColor':'#652D90',<br /> 'color': '#fff'<br /> });<br />});<br />Slide 5 of 14<br />rethink | redesign | results<br />
  8. 8. Selectors<br />ID, classes & elements<br />Pseudo class selectors<br /><table><br /><tr><td>I'm even!</td></tr><br /><tr><td>I'm odd!</td></tr><br /><tr><td>I'm even!</td></tr><br /><tr><td>I'm odd!</td></tr><br /></table><br />$(function(){<br /> $("td:even").css({<br /> 'backgroundColor':'#652D90',<br /> 'color': '#fff'<br /> });<br />});<br /><h1>I am a heading!</h1><br />$(function(){<br /> $(“h1").css({<br /> 'backgroundColor':'#652D90',<br /> 'color': '#fff'<br /> });<br />});<br />Remember:<br />This will get all HTML elements on the page so if you had multiple <h1>’s this change would apply to all of them.<br />A great list of pseudo class selectors<br />http://css-tricks.com/pseudo-class-selectors/<br />Slide 6 of 14<br />rethink | redesign | results<br />
  9. 9. Events<br />Lets interact with something<br />Some handy events<br />.click()<br />.dblclick()<br />.focus()<br />.keypress()<br />.mouseover()<br />.hover()<br /><h1>I am a heading!</h1><br />$(function(){<br /> $("h1").click(function(){<br /> $(this).css({<br /> 'backgroundColor':'#652D90',<br /> 'color': '#fff'<br /> });<br /> });<br />});<br />The full list of events<br />http://api.jquery.com/category/events/<br />Slide 7 of 14<br />rethink | redesign | results<br />
  10. 10. Effects<br />Peek a boo!<br />Fast, slow or milliseconds<br />.hide(‘fast’);<br />.hide(‘slow’);<br />.hide(4000);<br />$(function(){<br /> $("#hide").click(function(){<br /> $("h1").hide('fast');<br /> });<br /> $("#show").click(function(){<br /> $("h1").show(‘slow’);<br /> });<br />});<br /><h1>I am a heading!</h1><br /><a href=“#” title=“Hide heading” id=“hide”>Hide heading</a><br /><a href=“#” title=“Show heading” id=“show”>Show heading</a><br />$(function(){<br /> $(“#hide”).click(function(){<br /> $(“h1”).hide();<br /> });<br /> $(“#show”).click(function(){<br /> $(“h1”).show();<br /> });<br />});<br />Slide 8 of 14<br />rethink | redesign | results<br />
  11. 11. Effects<br />Slide up, slide down, toggle<br />Fast, slow or milliseconds<br />$(function(){<br /> $(“#up”).click(function(){<br /> $(“#box”).slideUp(‘fast’);<br /> });<br /> $(“#down”).click(function(){<br /> $(“#box”).slideDown(‘slow’);<br /> });<br />});<br /><div id=“box”>I’m a box!</div><br /><a href=“#” title=“Slide up” id=“up”>Slide up</a><br /><a href=“#” title=“Slide down” id=“down”>Slide down</a><br />$(function(){<br /> $(“#up”).click(function(){<br /> $(“#box”).slideUp();<br /> });<br /> $(“#down”).click(function(){<br /> $(“#box”).slideDown();<br /> });<br />});<br />Slide 9 of 14<br />rethink | redesign | results<br />
  12. 12. Effects<br />I’m fading away to nothing!<br />Fast, slow or milliseconds<br />$(function(){<br /> $(“#in”).click(function(){<br /> $(“#box”).fadeIn(‘slow’);<br /> });<br /> $(“#out”).click(function(){<br /> $(“#box”).fadeOut(‘fast’);<br /> });<br />});<br /><div id=“box”>I’m a box!</div><br /><a href=“#” title=“Fade In” id=“in”>Fade In</a><br /><a href=“#” title=“Fade Out” id=“out”>Fade Out</a><br />$(function(){<br /> $(“#in”).click(function(){<br /> $(“#box”).fadeIn();<br /> });<br /> $(“#out”).click(function(){<br /> $(“#box”).fadeOut();<br /> });<br />});<br />The full list of effects<br />http://api.jquery.com/category/effects/<br />Slide 10 of 14<br />rethink | redesign | results<br />
  13. 13. Chaining<br />Alice in Chains!<br /><div id="box">I'm a box!</div><br /><a href="#" title="Chaining” id="chain">Chained</a><br />$(function(){<br /> $("#chain").click(function(){<br /> $("#box").fadeOut('slow').fadeIn(4000).slideUp();<br /> });<br />});<br />Slide 11 of 14<br />rethink | redesign | results<br />
  14. 14. Links<br />Some useful jQuery links<br />http://jquery.com/<br />http://api.jquery.com/<br />http://jqueryui.com/<br />Slide 12 of 14<br />rethink | redesign | results<br />
  15. 15. Thanks & Questions<br />Blatant plug for our WordPress Meetup group<br />WordPress Brisbane<br />http://www.meetup.com/WordPress-Brisbane<br />Slide 13 of 14<br />rethink | redesign | results<br />
  16. 16. bronson@sennza.com.au<br />http://www.sennza.com.au/<br />http://www.youtube.com/user/BronsonQuick<br />Twitter: @sennza<br />rethink | redesign | results<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×