j query - your first steps
DESCRIPTION
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.zipTRANSCRIPT
jQuery:Love at first sight...or site!
Bronson Quick
sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
What we’ll cover
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
rethink | redesign | results Slide 2 of 14
The basics
Adding jQuery
Before we use get to fool around with the awesomeness that is jQuery we have to tell the browser what we’re talking ‘about!
rethink | redesign | results Slide 3 of 14
<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!
See if it’s working:
$('<p>Oh god yes!</p>').appendTo('body');
Give it to me jQuery! Uhuh, Uhuh!
Use Google’s CDN
Locally or from a CDN
Where is your page going to be viewed?
• Locally (Offline)
• Online
• Highly secured network
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).
Using jQuery
Before we can add some jQuery sexiness we need to let the browser know that we are going to do something!
rethink | redesign | results Slide 4 of 14
<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!
I was used! Use Google’s CDN
$(document).ready(function(){
alert(‘The world is a vampire!’);
});
The long way
$(function(){
alert(‘The world is a vampire!’);
});
The ‘quick’ way
Selectors
<div id=“yo”>
<p>I like stuff. Do you like stuff?</p>
</div>
rethink | redesign | results Slide 5 of 14
<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'
});});
ID, classes & elements Get element by class name
$(function(){$("#yo").css({
'backgroundColor':'#652D90','color': '#fff'
});});
Get an element by ID
Selectors
<h1>I am a heading!</h1>
rethink | redesign | results Slide 6 of 14
<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'
});});
ID, classes & elements Pseudo class selectors
$(function(){$(“h1").css({
'backgroundColor':'#652D90','color': '#fff'
});});
This will get all HTML elements on the page so if you had multiple <h1>’s this change would apply to all of them.
Remember:
http://css-tricks.com/pseudo-class-selectors/
A great list of pseudo class selectors
Events
<h1>I am a heading!</h1>
rethink | redesign | results Slide 7 of 14
.click()
.dblclick()
.focus()
.keypress()
.mouseover()
.hover()
Lets interact with something Some handy events
$(function(){$("h1").click(function(){
$(this).css({
'backgroundColor':'#652D90','color': '#fff'});
});});
http://api.jquery.com/category/events/
The full list of events
Effects
<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>
rethink | redesign | results Slide 8 of 14
.hide(‘fast’);
.hide(‘slow’);
.hide(4000);
$(function(){$("#hide").click(function(){
$("h1").hide('fast');});$("#show").click(function(){
$("h1").show(‘slow’);});
});
Peek a boo! Fast, slow or milliseconds
$(function(){$(“#hide”).click(function(){
$(“h1”).hide();});$(“#show”).click(function(){
$(“h1”).show();});
});
Effects
<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>
rethink | redesign | results Slide 9 of 14
$(function(){$(“#up”).click(function(){
$(“#box”).slideUp(‘fast’);
});$(“#down”).click(function(){
$(“#box”).slideDown(‘slow’);
});});
Slide up, slide down, toggle Fast, slow or milliseconds
$(function(){$(“#up”).click(function(){
$(“#box”).slideUp();});$(“#down”).click(function(){
$(“#box”).slideDown();});
});
Effects
<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>
rethink | redesign | results Slide 10 of 14
$(function(){$(“#in”).click(function(){
$(“#box”).fadeIn(‘slow’);
});$(“#out”).click(function(){
$(“#box”).fadeOut(‘fast’);
});});
I’m fading away to nothing! Fast, slow or milliseconds
$(function(){$(“#in”).click(function(){
$(“#box”).fadeIn();});$(“#out”).click(function(){
$(“#box”).fadeOut();});
});
http://api.jquery.com/category/effects/
The full list of effects
Chaining<div id="box">I'm a box!</div><a href="#" title="Chaining” id="chain">Chained</a>
rethink | redesign | results Slide 11 of 14
Alice in Chains!
$(function(){$("#chain").click(function(){
$("#box").fadeOut('slow').fadeIn(4000).slideUp();});
});
Links
rethink | redesign | results Slide 12 of 14
Some useful jQuery links
http://jquery.com/
http://api.jquery.com/
http://jqueryui.com/
Thanks & Questions
rethink | redesign | results Slide 13 of 14
Blatant plug for our WordPress Meetup groupWordPress Brisbane
http://www.meetup.com/WordPress-Brisbane
[email protected]://www.sennza.com.au/http://www.youtube.com/user/BronsonQuickTwitter: @sennza
rethink | redesign | results