Let jQuery Rock Your World

Matt Gifford@coldfumonkehwww.mattgifford.co.uk

I build stuffand I write about building stuff, too

rocks my world

Today is just another dayToday I’m going to create something amazing

PIONEERS &INSPIRATION

http://www.ﬂickr.com/photos/lukasvermeer/3807984599/

How Easy...?

This Easy!$(document).ready(function() { /* Write your kick ass code here */});

http://www.ﬂickr.com/photos/spierisf/4258461086/

docs.jquery.com

Plugins

(function( $ ) { $.fn.myPlugin = function() { /* Fill your boots with custom plugin code */ };})( jQuery );

http://www.ﬂickr.com/photos/jonhoward/5715290367/lightbox/

http://www.ﬂickr.com/photos/mrpbps/2678732649/

http://www.kylebean.co.uk

DOM Manipulation Good... var myList = $(#list); var myListItems = <ul>; for (i = 0; i < 1000; i++) { myListItems.append(<li>Item number + i + </li>); } myListItems += </ul>; myList.html(myListItems); Better... var myList = $(#list); var myListItems = <ul>; for (i = 0; i < 1000; i++) { myListItems += <li>Item number + i + </li>; } myListItems += </ul>; myList.html(myListItems);

Class Selectors

Think ʻHardboiledʼhttp://hardboiledwebdesign.com/

Class Selectors Good... $(".className") Better... $("div.className") or... $(".className", "#myDiv")

Animation http://www.ﬂickr.com/photos/waltimo/3816059877/

$(#button).click(function() { $(#myElement).animate({ opacity: 0.75, left: 50, }, 2000, function() { // Animation complete });}); http://www.ﬂickr.com/photos/waltimo/3816059877/

http://www.ﬂickr.com/photos/waltimo/3816059877/

Text http://www.ﬂickr.com/photos/druclimb/879511557/

Look! Moving things here... yay!Content down here

Core Mode http://www.ﬂickr.com/photos/xtnsgo/5934924558/

Core Mode jQuery... $(HTML).addClass(JS); CSS... .JS #myDiv{display:none;}

It’s all about... timing

MAKE IT FAST http://www.ﬂickr.com/photos/ujh/4307773392/

http://www.ﬂickr.com/photos/alancleaver/2661425133/

http://code.jquery.com/jquery-latest.jshttp://code.jquery.com/jquery-latest.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

CACHEEVERYTHING

Cache Variables Good... $(#item).css(color, #ffff00); $(#item).html(monkeh lovin is good lovin); $(#item).css(background-‐color, #ffffff); Better... var item = $(#item); item.css(color, #ffff00); item.html(monkeh lovin is good lovin); item.css(background-‐color, #ffffff);

http://www.ﬂickr.com/photos/chrisjames_taylor/5644434680/

Chaining From this... var item = $(#item); item.css(color, #ffff00); item.html(monkeh lovin is good lovin); item.css(background-‐color, #ffffff); To this... var item = $(#item); item.css(color, #ffff00) .html(monkeh lovin is good lovin) .css(background-‐color, #ffffff);

Good things stillcome in smallpackages http://www.ﬂickr.com/photos/thunderchild5/6201699610/

http://www.ﬂickr.com/photos/franzlife/820495364/

What would we do without... Opera DragonFly Firebug / FireQuery Chrome Developer Tools Companion JS

TESTING

http://gnoack.wordpress.com/category/unit-tests/

Unit Testing QUnit JSUnit FireUnit

Beautiful Code - Style Guides Idiomatic.js jQuery Core Style Guide Google Javascript Style Guide

CHEATING is ok

rocks my worldmaybe it can rock your world too

You’re ALLINSPIONEERS

Today is just another dayToday I’m going to create something amazing (again)

http://www.ﬂickr.com/photos/spierisf/4258461086/

http://lanyrd.com	115
http://collection.flowkr.com	7
https://twimg0-a.akamaihd.net	4
http://us-w1.rockmelt.com	3

Let jQuery Rock Your World

by Matt Gifford on Aug 06, 2012

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 129

Statistics

Let jQuery Rock Your World Presentation Transcript