Skip to content

Instantly share code, notes, and snippets.

@pacoguzman

pacoguzman/jquery-1-4-hawtness-1-with-paul-irish.js

Created January 31, 2010 16:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save pacoguzman/291125 to your computer and use it in GitHub Desktop.
Save pacoguzman/291125 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Hawtness with Paul Irish
Raw
jquery-1-4-hawtness-1-with-paul-irish.js
// http://pastie.org/783420.
// view the full video at:
// http://jquery14.com/day-05/jquery-1-4-hawtness-1-with-paul-irish
/* d8b .d88888b. d888 d8888
Y8P d88P" "Y88b d8888 d8P888
888 888 888 d8P 888
8888 888 888 888 888 .d88b. 888d888 888 888 888 d8P 888
"888 888 888 888 888 d8P Y8b 888P" 888 888 888 d88 888
888 888 Y8b 888 888 888 88888888 888 888 888 888 8888888888
888 Y88b.Y8b88P Y88b 888 Y8b. 888 Y88b 888 888 d8b 888
888 "Y888888" "Y88888 "Y8888 888 "Y88888 8888888 Y8P 888
888 Y8b 888
d88P Y8b d88P
888P" "Y88P"
888 888 888
888 888 888
888 888 888
8888888888 8888b. 888 888 888 888888 88888b. .d88b. .d8888b .d8888b
888 888 "88b 888 888 888 888 888 "88b d8P Y8b 88K 88K
888 888 .d888888 888 888 888 888 888 888 88888888 "Y8888b. "Y8888b.
888 888 888 888 Y88b 888 d88P Y88b. 888 888 Y8b. X88 X88
888 888 "Y888888 "Y8888888P" "Y888 888 888 "Y8888 88888P' 88888P'
#1: live() and closest()
db d8b db d888888b d888888b db db
88 I8I 88 `88' `~~88~~' 88 88
88 I8I 88 88 88 88ooo88
Y8 I8I 88 88 88 88~~~88
`8b d8'8b d8' .88. 88 88 88
`8b8' `8d8' Y888888P YP YP YP
d8888b. .d8b. db db db d888888b d8888b. d888888b .d8888. db db
88 `8D d8' `8b 88 88 88 `88' 88 `8D `88' 88' YP 88 88
88oodD' 88ooo88 88 88 88 88 88oobY' 88 `8bo. 88ooo88
88~~~ 88~~~88 88 88 88 88 88`8b 88 `Y8b. 88~~~88
88 88 88 88b d88 88booo. .88. 88 `88. .88. db 8D 88 88
88 YP YP ~Y8888P' Y88888P Y888888P 88 YD Y888888P `8888Y' YP YP
*/
/*
oooo o8o
`888 `"'
888 oooo oooo ooo .ooooo.
888 `888 `88. .8' d88' `88b
888 888 `88..8' 888ooo888
888 888 `888' 888 .o
o888o o888o `8' `Y8bod8P'
*/
// all <a href="#anchor"> smoothscroll to those elements
$("a[href^=#][href!=#]").live('click',function(e){
$('html,body').animate({'scrollTop': $($(this).attr('href')).offset().top+'px'});
e.preventDefault();
});
// all dropdowns, including dynamically added ones execute this when the value is changed
$('select').live('change',function(e){
console.log( e.target, ' has been changed to ', $(this).val() );
});
// already worked in FF..
// all forms, including dynamically added ones execute this when they are submitted
$('form').live('submit',function(e){
console.log(e.target,' has sumbitted');
});
// focusin and focusout for focus/blur
$('input:text').live('focusout',function(){
checkValidation( this, $(this).val() );
});
// hinting with default placeholder values for text input items.
// $('input[placeholder]').placeholder();
$.fn.placeholder = function(){
// quit if there's support for html5 placeholder
if (this[0] && 'placeholder' in document.createElement('input')) return;
return this
.live('focusin',function(){
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
}).live('focusout',function(){
if ($(this).val() === ''){
$(this).val( $(this).attr('placeholder') );
}_
});
}
// updates:
// thx to jkline for the tip. this works now
// mathias bynens has blown this code out into a full plugin:
// http://github.com/mathiasbynens/Placeholder-jQuery-Plugin
// mouseenter mouseleave
// colorize the hoverboxes when people hover in and out of them
$('div.hoverbox').live('mouseenter mouseleave',function(e){
var isEnter = (e.type === 'mouseenter');
$(this).css('backgroundColor', isEnter ? 'red' : 'blue');
});
// using data{} with live()
$('#content a.external').live('click',{ bindtime : new Date() },function(e){
var clicktime = new Date(),
duration = (clicktime - e.data.bindtime) / 1000;
console.log(duration,' seconds between binding and clicking');
});
// custom events with live()
$("p").live("myCustomEvent", function(e, myName, myValue){
$(this).text("Hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});
// performance optimization: providing a context for your delegation
// will execute much quicker on every click, vs $('a.external').live(....
$('a.external', $('#content')[0] ).live('click',function(){.....
/*
oooo .
`888 .o8
.ooooo. 888 .ooooo. .oooo.o .ooooo. .oooo.o .o888oo
d88' `"Y8 888 d88' `88b d88( "8 d88' `88b d88( "8 888
888 888 888 888 `"Y88b. 888ooo888 `"Y88b. 888
888 .o8 888 888 888 o. )88b 888 .o o. )88b 888 .
`Y8bod8P' o888o `Y8bod8P' 8""888P' `Y8bod8P' 8""888P' "888"
*/
// closest(Array)
jQuery("body").closest(["body","html"])
// returns an object like this:
[{selector:"body", elem:document.body}, {selector:"html", elem:document.documentElement}]
// performance optimization: providing a context for your delegation
// only elements div.post within #content will be found.
var post = $('a.external').closest('div.post', $('#content')[0])
d8b 888
Y8P 888
888
.d8888b .d88b. 88888b.d88b. 888 88888b. .d88b. .d8888b .d88b. .d88b. 88888b. 888
d88P" d88""88b 888 "888 "88b 888 888 "88b d88P"88b 88K d88""88b d88""88b 888 "88b 888
888 888 888 888 888 888 888 888 888 888 888 "Y8888b. 888 888 888 888 888 888 Y8P
Y88b. Y88..88P 888 888 888 888 888 888 Y88b 888 X88 Y88..88P Y88..88P 888 888 "
"Y8888P "Y88P" 888 888 888 888 888 888 "Y88888 88888P' "Y88P" "Y88P" 888 888 888
888
Y8b d88P
"Y88P"
// setterMethods(function(i,val){ ... }) and animation
// events! bind(). proxy(). special
// traversing and manipulation
// *ajax!*
// utilities
// what may break in 1.4 for you.'
Raw
jquery-1-4-hawtness-2-with-paul-irish.js
// http://pastie.org/786425
// http://jquery14.com/day-07/jquery-1-4-hawtness-2-with-paul-irish
/*d8b .d88888b. d888 d8888
Y8P d88P" "Y88b d8888 d8P888
888 888 888 d8P 888
8888 888 888 888 888 .d88b. 888d888 888 888 888 d8P 888
"888 888 888 888 888 d8P Y8b 888P" 888 888 888 d88 888
888 888 Y8b 888 888 888 88888888 888 888 888 888 8888888888
888 Y88b.Y8b88P Y88b 888 Y8b. 888 Y88b 888 888 d8b 888
888 "Y888888" "Y88888 "Y8888 888 "Y88888 8888888 Y8P 888
888 Y8b 888
d88P Y8b d88P
888P" "Y88P"
888 888 888
888 888 888
888 888 888
8888888888 8888b. 888 888 888 888888 88888b. .d88b. .d8888b .d8888b
888 888 "88b 888 888 888 888 888 "88b d8P Y8b 88K 88K
888 888 .d888888 888 888 888 888 888 888 88888888 "Y8888b. "Y8888b.
888 888 888 888 Y88b 888 d88P Y88b. 888 888 Y8b. X88 X88
888 888 "Y888888 "Y8888888P" "Y888 888 888 "Y8888 88888P' 88888P'
#2: setterMethods(function(i,val){ ... }) and animation
db d8b db d888888b d888888b db db
88 I8I 88 `88' `~~88~~' 88 88
88 I8I 88 88 88 88ooo88
Y8 I8I 88 88 88 88~~~88
`8b d8'8b d8' .88. 88 88 88
`8b8' `8d8' Y888888P YP YP YP
d8888b. .d8b. db db db d888888b d8888b. d888888b .d8888. db db
88 `8D d8' `8b 88 88 88 `88' 88 `8D `88' 88' YP 88 88
88oodD' 88ooo88 88 88 88 88 88oobY' 88 `8bo. 88ooo88
88~~~ 88~~~88 88 88 88 88 88`8b 88 `Y8b. 88~~~88
88 88 88 88b d88 88booo. .88. 88 `88. .88. db 8D 88 88
88 YP YP ~Y8888P' Y88888P Y888888P 88 YD Y888888P `8888Y' YP YP
*/
/*
. .
.o8 .o8
.oooo.o .ooooo. .o888oo .o888oo .ooooo. oooo d8b
d88( "8 d88' `88b 888 888 d88' `88b `888""8P
`"Y88b. 888ooo888 888 888 888ooo888 888
o. )88b 888 .o 888 . 888 . 888 .o 888
8""888P' `Y8bod8P' "888" "888" `Y8bod8P' d888b
. oooo .o8
.o8 `888 "888
ooo. .oo. .oo. .ooooo. .o888oo 888 .oo. .ooooo. .oooo888 .oooo.o
`888P"Y88bP"Y88b d88' `88b 888 888P"Y88b d88' `88b d88' `888 d88( "8
888 888 888 888ooo888 888 888 888 888 888 888 888 `"Y88b.
888 888 888 888 .o 888 . 888 888 888 888 888 888 o. )88b
o888o o888o o888o `Y8bod8P' "888" o888o o888o `Y8bod8P' `Y8bod88P" 8""888P'
http://github.com/jquery/jquery/commit/600d3145386a9dca8143918cc3e339168f886a63#comments
*/
// turn <a href="brandnew.html"> to <a href="brandnew.html?0923840293">
// old 'n busted
$('a#foo').each(function(){
var newhref = $(this).attr('href') + '?' + new Date();
$(this).attr('href', newhref );
});
// 1.3 weaksauce
$('a#foo').attr('href', function(){
return $(this).attr('href') + '?' + new Date();
});
// new hotness
$('a#foo').attr('href', function(i,href){
return href + '?' + new Date();
});
// want some more?
// fix doublefloat margin bug for IE6.. sorta.
$(floatedElems).css('leftMargin',function(i,margin){
return parseFloat(margin)/2 +'px';
});
// 'some thing' -> 'another thing'... 'some one' -> 'another one'
$('span').text( function(i,text){
return text.replace( /some (thing|one)/gi, 'another $1' );
});
// style ampersands with pretty font
$('a').html(function(i,html){
return html.replace( /&amp;/gi,'<span class="amp">&amp;</span>');
});
// politeness plugin
$.fn.bePolite = function(){
return this.text(function(index, value) {
return "Please, " + value + ' &mdash; and thank you.';
});
}
$('li.commands').bePolite();
// supported methods with current value
// .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), and .toggleClass().
// function only, no currrent value
// .before(), .after(), .replaceWith(), .wrap(), .wrapInner()
// random colors!!
// function but no value passed in
$('div.random').css('backgroundColor',function(){
return '#'+Math.floor(Math.random()*16777215).toString(16);
}).css('color',function(){
function contrast(color){ return '#' +
(Number('0x'+color.substr(1)).toString(10) > 0xffffff/2 ? '000' : 'fff');
}
return contrast( $(this).css('backgroundColor') );
});
/*
o8o . o8o
`"' .o8 `"'
.oooo. ooo. .oo. oooo ooo. .oo. .oo. .oooo. .o888oo oooo .ooooo. ooo. .oo.
`P )88b `888P"Y88b `888 `888P"Y88bP"Y88b `P )88b 888 `888 d88' `88b `888P"Y88b
.oP"888 888 888 888 888 888 888 .oP"888 888 888 888 888 888 888
d8( 888 888 888 888 888 888 888 d8( 888 888 . 888 888 888 888 888
`Y888""8o o888o o888o o888o o888o o888o o888o `Y888""8o "888" o888o `Y8bod8P' o888o o888o
*/
// per property easing
// http://james.padolsey.com/javascript/easing-in-jquery-1-4a2/
jQuery(elem).animate({
left: [500, 'swing'],
top: [200, 'easeOutBounce']
});
// http://james.padolsey.com/demos/jquery/easing/easing-jq14.html
jQuery(elem).animate({
left: 500,
top: 200
}, {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
jQuery(elem).animate({
x: [100, 'easeInQuad'],
y: [100, 'easeOutBounce'],
z: 100
}, 1000, 'linear');
// go crazy
$("div").animate({
width: ["+=200px", "swing"],
height: ["+=50px", "linear"],
}, 2000, function() {
$(this).after("<div>Animation complete.</div>");
});
/*
.o8 oooo
"888 `888
.oooo888 .ooooo. 888 .oooo. oooo ooo
d88' `888 d88' `88b 888 `P )88b `88. .8'
888 888 888ooo888 888 .oP"888 `88..8'
888 888 888 .o 888 d8( 888 `888'
`Y8bod88P" `Y8bod8P' o888o `Y888""8o .8'
.o..P'
`Y8P'
*/
// delay
$notice.fadeIn().delay(3000).fadeOut()
// troll mode.
$('img.thumbnail').click(function(){
$(this).delay( isTroll ? 5000 : 0 ).dialog('open');
})
/*
oooo .oooooo.
`888 d8P' `Y8b
.ooooo. 888 .ooooo. .oooo. oooo d8b 888 888 oooo oooo .ooooo. oooo oooo .ooooo.
d88' `"Y8 888 d88' `88b `P )88b `888""8P 888 888 `888 `888 d88' `88b `888 `888 d88' `88b
888 888 888ooo888 .oP"888 888 888 888 888 888 888ooo888 888 888 888ooo888
888 .o8 888 888 .o d8( 888 888 `88b d88b 888 888 888 .o 888 888 888 .o
`Y8bod8P' o888o `Y8bod8P' `Y888""8o d888b `Y8bood8P'Ybd' `V88V"V8P' `Y8bod8P' `V88V"V8P' `Y8bod8P'
*/
// DEMO TIME!!
// http://api.jquery.com/clearQueue/
d8b 888
Y8P 888
888
.d8888b .d88b. 88888b.d88b. 888 88888b. .d88b. .d8888b .d88b. .d88b. 88888b. 888
d88P" d88""88b 888 "888 "88b 888 888 "88b d88P"88b 88K d88""88b d88""88b 888 "88b 888
888 888 888 888 888 888 888 888 888 888 888 "Y8888b. 888 888 888 888 888 888 Y8P
Y88b. Y88..88P 888 888 888 888 888 888 Y88b 888 X88 Y88..88P Y88..88P 888 888 "
"Y8888P "Y88P" 888 888 888 888 888 888 "Y88888 88888P' "Y88P" "Y88P" 888 888 888
888
Y8b d88P
"Y88P"
// events! bind(). proxy(). special
// traversing and manipulation
// *ajax!*
// utilities
// what may break in 1.4 for you.'
Raw
jquery-1-4-hawtness-3-with-paul-irish.js
// http://fixee.org/paste/q5yfwwo/
// http://jquery14.com/day-09/jquery-1-4-hawtness-3-with-paul-irish
/*d8b .d88888b. d888 d8888
Y8P d88P" "Y88b d8888 d8P888
888 888 888 d8P 888
8888 888 888 888 888 .d88b. 888d888 888 888 888 d8P 888
"888 888 888 888 888 d8P Y8b 888P" 888 888 888 d88 888
888 888 Y8b 888 888 888 88888888 888 888 888 888 8888888888
888 Y88b.Y8b88P Y88b 888 Y8b. 888 Y88b 888 888 d8b 888
888 "Y888888" "Y88888 "Y8888 888 "Y88888 8888888 Y8P 888
888 Y8b 888
d88P Y8b d88P
888P" "Y88P"
888 888 888
888 888 888
888 888 888
8888888888 8888b. 888 888 888 888888 88888b. .d88b. .d8888b .d8888b
888 888 "88b 888 888 888 888 888 "88b d8P Y8b 88K 88K
888 888 .d888888 888 888 888 888 888 888 88888888 "Y8888b. "Y8888b.
888 888 888 888 Y88b 888 d88P Y88b. 888 888 Y8b. X88 X88
888 888 "Y888888 "Y8888888P" "Y888 888 888 "Y8888 88888P' 88888P'
#3: events! bind(). proxy(). special
db d8b db d888888b d888888b db db
88 I8I 88 `88' `~~88~~' 88 88
88 I8I 88 88 88 88ooo88
Y8 I8I 88 88 88 88~~~88
`8b d8'8b d8' .88. 88 88 88
`8b8' `8d8' Y888888P YP YP YP
d8888b. .d8b. db db db d888888b d8888b. d888888b .d8888. db db
88 `8D d8' `8b 88 88 88 `88' 88 `8D `88' 88' YP 88 88
88oodD' 88ooo88 88 88 88 88 88oobY' 88 `8bo. 88ooo88
88~~~ 88~~~88 88 88 88 88 88`8b 88 `Y8b. 88~~~88
88 88 88 88b d88 88booo. .88. 88 `88. .88. db 8D 88 88
88 YP YP ~Y8888P' Y88888P Y888888P 88 YD Y888888P `8888Y' YP YP
*/
/*
oo.ooooo. oooo d8b .ooooo. oooo ooo oooo ooo
888' `88b `888""8P d88' `88b `88b..8P' `88. .8'
888 888 888 888 888 Y888' `88..8'
888 888 888 888 888 .o8"'88b `888'
888bod8P' d888b `Y8bod8P' o88' 888o .8'
888 .o..P'
o888o `Y8P'
*/
// unbinding magic with $.proxy()
function yellFn(){
console.log('i am ' + this.name)
}
function foodObj {
this.name = 'dinner!';
}
jQuery("#firstp")
.bind("click", jQuery.proxy(yellFn, foodObj))
.click()
.unbind("click", yellFn);
// PROXY DEMO!
// http://jsfiddle.net/vzCDY/3/
/*
.o8 o8o .o8
"888 `"' "888
888oooo. oooo ooo. .oo. .oooo888
d88' `88b `888 `888P"Y88b d88' `888
888 888 888 888 888 888 888
888 888 888 888 888 888 888
`Y8bod8P' o888o o888o o888o `Y8bod88P"
*/
// multiple binds at once
$('#foo').click(function() {
// do something on click
},
dblclick: function() {
// do something on dblclick
});
/*
. oooo
.o8 `888
.ooooo. .o888oo 888 .oo. .ooooo. oooo d8b
d88' `88b 888 888P"Y88b d88' `88b `888""8P
888 888 888 888 888 888ooo888 888
888 888 888 . 888 888 888 .o 888
`Y8bod8P' "888" o888o o888o `Y8bod8P' d888b
.
.o8
.ooooo. oooo ooo .ooooo. ooo. .oo. .o888oo .oooo.o
d88' `88b `88. .8' d88' `88b `888P"Y88b 888 d88( "8
888ooo888 `88..8' 888ooo888 888 888 888 `"Y88b.
888 .o `888' 888 .o 888 888 888 . o. )88b .o. .o. .o.
`Y8bod8P' `8' `Y8bod8P' o888o o888o "888" 8""888P' Y8P Y8P Y8P
*/
// onbeforeunload binds works fine in IE now
$(window).bind('onbeforeunload',function(){
$.ajax({
url :'userleaving.php',
method : 'POST'
data : userData,
async : false
})
})
// mutation events! DOMAttrModified, DOMNodeInserted, DOMNodeRemoved, DOMSubtreeModified
// http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents
// watch its content to change
$('#magicbox').bind('DOMSubtreeModified', function(e) {
// what's inside #magicbox has changed
});
// touch events a la iphone
$body
.bind('touchstart', handleTouch)
.bind('orientationchange', updateOrientation)
.trigger('orientationchange');
// image load events not 100%
var loaded = 0;
$('img').load(function(){
loaded++;
if (loaded == $('img').length) console.log('all images loaded')
});
/*
oooo
`888
888 .oo. .ooooo. oooo ooo .ooooo. oooo d8b
888P"Y88b d88' `88b `88. .8' d88' `88b `888""8P
888 888 888 888 `88..8' 888ooo888 888
888 888 888 888 `888' 888 .o 888
o888o o888o `Y8bod8P' `8' `Y8bod8P' d888b
*/
// colorize the hoverboxes when people hover in and out of them
$('div.hoverbox').hover(function(e){
var isEnter = (e.type === 'mouseenter');
$(this).css('backgroundColor', isEnter ? 'red' : 'blue');
});
/*
.
.o8
.ooooo. oooo ooo .ooooo. ooo. .oo. .o888oo
d88' `88b `88. .8' d88' `88b `888P"Y88b 888
888ooo888 `88..8' 888ooo888 888 888 888
888 .o `888' 888 .o 888 888 888 . .o.
`Y8bod8P' `8' `Y8bod8P' o888o o888o "888" Y8P
o8o oooo
`"' `888
.oooo.o oo.ooooo. .ooooo. .ooooo. oooo .oooo. 888
d88( "8 888' `88b d88' `88b d88' `"Y8 `888 `P )88b 888
`"Y88b. 888 888 888ooo888 888 888 .oP"888 888
o. )88b 888 888 888 .o 888 .o8 888 d8( 888 888
8""888P' 888bod8P' `Y8bod8P' `Y8bod8P' o888o `Y888""8o o888o
888
o888o
*/
$('div')
.bind("multiclick", { threshold: 5 }, function( event ) {
alert( "Clicked 5 times" );
})
.bind("multiclick", { threshold: 3 }, function( event ) {
alert( "Clicked 3 times" );
});
jQuery.event.special.multiclick = {
add: function( handler, data, namespaces ) {
// called for each bound handler
},
setup: function( data, namespaces ) {
// called once per an element
},
remove: function( namespaces ) {
// called for each bound handler
},
teardown: function( namespaces ) {
// called once per an element
},
handler: function( event ) {
}
};
d8b 888
Y8P 888
888
.d8888b .d88b. 88888b.d88b. 888 88888b. .d88b. .d8888b .d88b. .d88b. 88888b. 888
d88P" d88""88b 888 "888 "88b 888 888 "88b d88P"88b 88K d88""88b d88""88b 888 "88b 888
888 888 888 888 888 888 888 888 888 888 888 "Y8888b. 888 888 888 888 888 888 Y8P
Y88b. Y88..88P 888 888 888 888 888 888 Y88b 888 X88 Y88..88P Y88..88P 888 888 "
"Y8888P "Y88P" 888 888 888 888 888 888 "Y88888 88888P' "Y88P" "Y88P" 888 888 888
888
Y8b d88P
"Y88P"
// traversing and manipulation
// *ajax!*
// utilities
// what may break in 1.4 for you.'
Raw
jquery-1-4-hawtness-4-with-paul-irish.js
// http://gist.github.com/284769
// http://jquery14.com/day-010/jquery-1-4-hawtness-4-with-paul-irish
/*d8b .d88888b. d888 d8888
Y8P d88P" "Y88b d8888 d8P888
888 888 888 d8P 888
8888 888 888 888 888 .d88b. 888d888 888 888 888 d8P 888
"888 888 888 888 888 d8P Y8b 888P" 888 888 888 d88 888
888 888 Y8b 888 888 888 88888888 888 888 888 888 8888888888
888 Y88b.Y8b88P Y88b 888 Y8b. 888 Y88b 888 888 d8b 888
888 "Y888888" "Y88888 "Y8888 888 "Y88888 8888888 Y8P 888
888 Y8b 888
d88P Y8b d88P
888P" "Y88P"
888 888 888
888 888 888
888 888 888
8888888888 8888b. 888 888 888 888888 88888b. .d88b. .d8888b .d8888b
888 888 "88b 888 888 888 888 888 "88b d8P Y8b 88K 88K
888 888 .d888888 888 888 888 888 888 888 88888888 "Y8888b. "Y8888b.
888 888 888 888 Y88b 888 d88P Y88b. 888 888 Y8b. X88 X88
888 888 "Y888888 "Y8888888P" "Y888 888 888 "Y8888 88888P' 88888P'
#4: traversing. manipulation. ajax
db d8b db d888888b d888888b db db
88 I8I 88 `88' `~~88~~' 88 88
88 I8I 88 88 88 88ooo88
Y8 I8I 88 88 88 88~~~88
`8b d8'8b d8' .88. 88 88 88
`8b8' `8d8' Y888888P YP YP YP
d8888b. .d8b. db db db d888888b d8888b. d888888b .d8888. db db
88 `8D d8' `8b 88 88 88 `88' 88 `8D `88' 88' YP 88 88
88oodD' 88ooo88 88 88 88 88 88oobY' 88 `8bo. 88ooo88
88~~~ 88~~~88 88 88 88 88 88`8b 88 `Y8b. 88~~~88
88 88 88 88b d88 88booo. .88. 88 `88. .88. db 8D 88 88
88 YP YP ~Y8888P' Y88888P Y888888P 88 YD Y888888P `8888Y' YP YP
*/
/*
oooo
`888
888 .oo. .oooo. .oooo.o
888P"Y88b `P )88b d88( "8
888 888 .oP"888 `"Y88b.
888 888 d8( 888 o. )88b
o888o o888o `Y888""8o 8""888P'
*/
$('li:has(a)').addClass('navLI');
$('li').has('a').addClass('navLI');
// equivalent
$myLI.filter(function(){
return $(this).find('a').length;
})
/*
.o88o. o8o . oooo .
888 `" `"' .o8 `888 .o8
.ooooo. .ooooo oo o888oo oooo oooo d8b .oooo.o .o888oo 888 .oooo. .oooo.o .o888oo
d88' `88b d88' `888 888 `888 `888""8P d88( "8 888 888 `P )88b d88( "8 888
888ooo888 888 888 888 888 888 `"Y88b. 888 888 .oP"888 `"Y88b. 888
888 .o 888 888 .o. 888 888 888 o. )88b 888 . 888 d8( 888 o. )88b 888 .
`Y8bod8P' `V8bod888 Y8P o888o o888o d888b 8""888P' "888" o888o `Y888""8o 8""888P' "888"
888.
8P'
"
*/
var lastelem = $elems.eq(-1); // get() too!
$('#nav li:first') === $('#nav li').first()
$('#nav li:last') === $('#nav li').last()
/*
. o8o oooo .o.
.o8 `"' `888 888
oooo oooo ooo. .oo. .o888oo oooo 888 .oooo.o 888
`888 `888 `888P"Y88b 888 `888 888 d88( "8 Y8P
888 888 888 888 888 888 888 `"Y88b. `8'
888 888 888 888 888 . 888 888 o. )88b .o.
`V88V"V8P' o888o o888o "888" o888o o888o 8""888P' Y8P
*/
// next until
$('dl dt').click(function(){
$(this).nextUntil('dt').fadeIn();
});
// prev until
$('a.markasread').live('click',function(){
var readIDs = $(this)
.closest('p').prevUntil('p.read') // optional p arg
.addClass('read')
.map(function( return this.id )).get();
$.post('readstate.php',readIDs);
});
// parents until
$('a.explode').click(function(){
$(this)
.parentsUntil('.explodecontainer')
.css('position','absolute')
.animate({
opacity: 0,
top : '-='+ -100+Math.random()*200 + 'px',
left: '+='+ -100+Math.random()*200 + 'px',
});
});
/*
.o8 .o8
"888 "888
.oooo. .oooo888 .oooo888
`P )88b d88' `888 d88' `888
.oP"888 888 888 888 888
d8( 888 888 888 888 888
`Y888""8o `Y8bod88P" `Y8bod88P"
*/
// now with context()!
$('div.inbox').load('newmail.php', function(){
$('.title', this)
.hover(showTooltip)
.add('.from', this)
.click(openMsg);
});
/*
oooo oooo ooo. .oo. oooo oooo ooo oooo d8b .oooo. oo.ooooo.
`888 `888 `888P"Y88b `88. `88. .8' `888""8P `P )88b 888' `88b
888 888 888 888 `88..]88..8' 888 .oP"888 888 888
888 888 888 888 `888'`888' 888 d8( 888 888 888
`V88V"V8P' o888o o888o `8' `8' d888b `Y888""8o 888bod8P'
888
o888o
*/
<body>
<div>
<p>annie</p>
<p>davey</p>
<p>stevie</p>
</div>
</body>
// */
// i had this as $('div').unwrap() in the video but that was SO damn wrong.
// i apologize.
$('p').unwrap();
<body>
<p>annie</p>
<p>davey</p>
<p>stevie</p>
</body>
/*
o8o .o. .o. .o. .o
`"' 888 888 888 o888
.oooo. oooo .oooo. oooo ooo 888 888 888 888
`P )88b `888 `P )88b `88b..8P' Y8P Y8P Y8P 888
.oP"888 888 .oP"888 Y888' `8' `8' `8' 888
d8( 888 888 d8( 888 .o8"'88b .o. .o. .o. 888
`Y888""8o 888 `Y888""8o o88' 888o Y8P Y8P Y8P o888o
888
.o. 88P
`Y888P
*/
// http://farm1.static.flickr.com/31/66831554_1e1630590f.jpg
// In jQuery 1.3, the contentType setting was ignored in jQuery.ajax if no data was sent. In jQuery 1.4, the contentType is always sent. This fixes an issue with some backends that used the Content-Type header to decide what kind of response to send.
// Response headers will be obeyed (if no dataType):
Content-Type : 'application/json' // parsed as JSON
// or
Content-Type : 'application/javascript' // executed as script
// The success callback for any ajax request now
// receives the XMLHttpRequest object as the third argument.
$.get(myurl,function(data,textStatus,XHR){
// XHR object available here!!11
});
/*
o8o
`"'
oooo .oooo.o .ooooo. ooo. .oo. oo.ooooo.
`888 d88( "8 d88' `88b `888P"Y88b 888' `88b
888 `"Y88b. 888 888 888 888 888 888
888 o. )88b 888 888 888 888 888 888
888 8""888P' `Y8bod8P' o888o o888o 888bod8P'
888 888
.o. 88P o888o
`Y888P
*/
// more like.. json-c. json with callback. write to your congressman!
//jsonpCallback
window._callback = function(data) {
window.console && console.log(data);
};
jQuery.ajax({
url: "http://pipes.yahoo.com/pipe.run?_id=UtVVPkx83h&_render=json&_callback=?",
dataType: "jsonp",
jsonpCallback: "_callback"
});
// new explicit JSON parsing
// use www.jsonlint.com
$.getJSON('bestdataever.json.js',function(){
...
});
//response:
{
"unquotedkeys" : true,
"invalid" : true
}
// ERRORS WILL BE THROWN. BELIEVE YOU ME.
/*
oo.ooooo. .oooo. oooo d8b .oooo. ooo. .oo. .oo.
888' `88b `P )88b `888""8P `P )88b `888P"Y88bP"Y88b
888 888 .oP"888 888 .oP"888 888 888 888
888 888 d8( 888 888 d8( 888 888 888 888
888bod8P' `Y888""8o d888b `Y888""8o o888o o888o o888o
888
o888o
*/
// As of jQuery 1.4, the $.param() method serializes deep objects
// recursively to accommodate modern scripting languages and
// frameworks such as PHP and Ruby on Rails.
// In jQuery 1.3: (or jQuery.ajaxSettings.traditional=true; in 1.4)
$.param( {foo: ["bar", "baz"]} ) === "foo=bar&foo=baz".
// In jQuery1.4
$.param( {foo: ["bar", "baz"]} ) === "foo[]=bar&foo[]=baz".
// In jQuery 1.4 HTML5 input elements are serialized, as well.
Raw
jquery-1-4-hawtness-5-with-paul-irish.js
// http://gist.github.com/286150
// http://jquery14.com/day-12/jquery-1-4-hawtness-5-with-paul-irish
/*d8b .d88888b. d888 d8888
Y8P d88P" "Y88b d8888 d8P888
888 888 888 d8P 888
8888 888 888 888 888 .d88b. 888d888 888 888 888 d8P 888
"888 888 888 888 888 d8P Y8b 888P" 888 888 888 d88 888
888 888 Y8b 888 888 888 88888888 888 888 888 888 8888888888
888 Y88b.Y8b88P Y88b 888 Y8b. 888 Y88b 888 888 d8b 888
888 "Y888888" "Y88888 "Y8888 888 "Y88888 8888888 Y8P 888
888 Y8b 888
d88P Y8b d88P
888P" "Y88P"
888 888 888
888 888 888
888 888 888
8888888888 8888b. 888 888 888 888888 88888b. .d88b. .d8888b .d8888b
888 888 "88b 888 888 888 888 888 "88b d8P Y8b 88K 88K
888 888 .d888888 888 888 888 888 888 888 88888888 "Y8888b. "Y8888b.
888 888 888 888 Y88b 888 d88P Y88b. 888 888 Y8b. X88 X88
888 888 "Y888888 "Y8888888P" "Y888 888 888 "Y8888 88888P' 88888P'
#5: utilities
db d8b db d888888b d888888b db db
88 I8I 88 `88' `~~88~~' 88 88
88 I8I 88 88 88 88ooo88
Y8 I8I 88 88 88 88~~~88
`8b d8'8b d8' .88. 88 88 88
`8b8' `8d8' Y888888P YP YP YP
d8888b. .d8b. db db db d888888b d8888b. d888888b .d8888. db db
88 `8D d8' `8b 88 88 88 `88' 88 `8D `88' 88' YP 88 88
88oodD' 88ooo88 88 88 88 88 88oobY' 88 `8bo. 88ooo88
88~~~ 88~~~88 88 88 88 88 88`8b 88 `Y8b. 88~~~88
88 88 88 88b d88 88booo. .88. 88 `88. .88. db 8D 88 88
88 YP YP ~Y8888P' Y88888P Y888888P 88 YD Y888888P `8888Y' YP YP
*/
// new element creation
jQuery("<div/>", {
id: "foo",
rel : "something"
css: {
height: "50px",
width: "50px",
color: "blue",
backgroundColor: "#ccc"
},
click: function() {
$(this).css("backgroundColor", "red");
}
}).appendTo("body");
/*
.o8 . oooo
"888 .o8 `888
.oooo888 .ooooo. .o888oo .oooo. .ooooo. 888 .oo.
d88' `888 d88' `88b 888 `P )88b d88' `"Y8 888P"Y88b
888 888 888ooo888 888 .oP"888 888 888 888
888 888 888 .o 888 . d8( 888 888 .o8 888 888
`Y8bod88P" `Y8bod8P' "888" `Y888""8o `Y8bod8P' o888o o888o
*/
// fixed the missing $. good catch, dabear
var $table = $('#mytable').detach();
$table.dostuffto();
$table.appendTo('.tablewrap');
/*
.o8 .
"888 .o8
.oooo888 .oooo. .o888oo .oooo.
d88' `888 `P )88b 888 `P )88b
888 888 .oP"888 888 .oP"888
888 888 d8( 888 888 . d8( 888
`Y8bod88P" `Y888""8o "888" `Y888""8o
*/
$('#bigchief')
.data('age',7)
.data('interests',['lollipops','ice cream','italian ice'])
.data(); // previously something like 12324789549
// now an obj: { 'age' : 12, 'interests' : ['lollipops'] }
// isPlainObject()
jQuery.isPlainObject({}) // true
jQuery.isPlainObject("test") // false
jQuery.isPlainObject({ foo: 'bar'}) // true
// isEmptyObject()
jQuery.isEmptyObject({}) // true
jQuery.isPlainObject({ empty: "test"}) // false
/*
. oooo .oooooo. oooo
.o8 `888 d8P' `Y8b `888
.o888oo .ooooo. .oooooooo .oooooooo 888 .ooooo. 888 888 .oooo. .oooo.o .oooo.o
888 d88' `88b 888' `88b 888' `88b 888 d88' `88b 888 888 `P )88b d88( "8 d88( "8
888 888 888 888 888 888 888 888 888ooo888 888 888 .oP"888 `"Y88b. `"Y88b.
888 . 888 888 `88bod8P' `88bod8P' 888 888 .o `88b ooo 888 d8( 888 o. )88b o. )88b
"888" `Y8bod8P' `8oooooo. `8oooooo. o888o `Y8bod8P' `Y8bood8P' o888o `Y888""8o 8""888P' 8""888P'
d" YD d" YD
"Y88888P' "Y88888P'
*/
<div class="tumble">Some text.</div>
$(div).toggleClass('bounce spin')
<div class="tumble bounce spin">Some text.</div>
$(div).toggleClass('bounce jump', isConditional ? false : true)
<div class="tumble spin">Some text.</div>
/*
o8o .o8
`"' "888
oooo ooo. .oo. .oooo888 .ooooo. oooo ooo
`888 `888P"Y88b d88' `888 d88' `88b `88b..8P'
888 888 888 888 888 888ooo888 Y888'
888 888 888 888 888 888 .o .o8"'88b
o888o o888o o888o `Y8bod88P" `Y8bod8P' o88' 888o
*/
// get index of .current vs its siblings -- old <= 1.3.2 method
$('li').index('li.current') // 3
// get the index of the first <li class="index"> in relation to its siblings:
$("li.current").index() // 3
// get the index of the <h3 id="more-info"> in relation to all <h3> elements:
$("h3#more-info").index("h3")
/*
. o8o
.o8 `"'
.ooooo. .ooooo. ooo. .oo. .o888oo .oooo. oooo ooo. .oo. .oooo.o
d88' `"Y8 d88' `88b `888P"Y88b 888 `P )88b `888 `888P"Y88b d88( "8
888 888 888 888 888 888 .oP"888 888 888 888 `"Y88b.
888 .o8 888 888 888 888 888 . d8( 888 888 888 888 o. )88b
`Y8bod8P' `Y8bod8P' o888o o888o "888" `Y888""8o o888o o888o o888o 8""888P'
*/
jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false
/*
ooo. .oo. .ooooo. .ooooo. oo.ooooo.
`888P"Y88b d88' `88b d88' `88b 888' `88b
888 888 888 888 888 888 888 888
888 888 888 888 888 888 888 888
o888o o888o `Y8bod8P' `Y8bod8P' 888bod8P'
888
o888o
*/
$.fn.myPlugin(callback){
// do great stuff!
return this.animate({height:'+=20px'},500, callback || jQuery.noop );
}
.d88b. 88888b. .d88b. 88888b.d88b. .d88b. 888d888 .d88b.
d88""88b 888 "88b d8P Y8b 888 "888 "88b d88""88b 888P" d8P Y8b
888 888 888 888 88888888 888 888 888 888 888 888 88888888
Y88..88P 888 888 Y8b. 888 888 888 Y88..88P 888 Y8b.
"Y88P" 888 888 "Y8888 888 888 888 "Y88P" 888 "Y8888
Raw
jquery-1-4-hawtness-6-with-paul-irish.js
// http://gist.github.com/286873
// http://jquery14.com/day-13/jquery-1-4-hawtness-6-with-paul-irish
/*d8b .d88888b. d888 d8888
Y8P d88P" "Y88b d8888 d8P888
888 888 888 d8P 888
8888 888 888 888 888 .d88b. 888d888 888 888 888 d8P 888
"888 888 888 888 888 d8P Y8b 888P" 888 888 888 d88 888
888 888 Y8b 888 888 888 88888888 888 888 888 888 8888888888
888 Y88b.Y8b88P Y88b 888 Y8b. 888 Y88b 888 888 d8b 888
888 "Y888888" "Y88888 "Y8888 888 "Y88888 8888888 Y8P 888
888 Y8b 888
d88P Y8b d88P
888P" "Y88P"
888 888 888
888 888 888
888 888 888
8888888888 8888b. 888 888 888 888888 88888b. .d88b. .d8888b .d8888b
888 888 "88b 888 888 888 888 888 "88b d8P Y8b 88K 88K
888 888 .d888888 888 888 888 888 888 888 88888888 "Y8888b. "Y8888b.
888 888 888 888 Y88b 888 d88P Y88b. 888 888 Y8b. X88 X88
888 888 "Y888888 "Y8888888P" "Y888 888 888 "Y8888 88888P' 88888P'
#6: OMG what could break???!
db d8b db d888888b d888888b db db
88 I8I 88 `88' `~~88~~' 88 88
88 I8I 88 88 88 88ooo88
Y8 I8I 88 88 88 88~~~88
`8b d8'8b d8' .88. 88 88 88
`8b8' `8d8' Y888888P YP YP YP
d8888b. .d8b. db db db d888888b d8888b. d888888b .d8888. db db
88 `8D d8' `8b 88 88 88 `88' 88 `8D `88' 88' YP 88 88
88oodD' 88ooo88 88 88 88 88 88oobY' 88 `8bo. 88ooo88
88~~~ 88~~~88 88 88 88 88 88`8b 88 `Y8b. 88~~~88
88 88 88 88b d88 88booo. .88. 88 `88. .88. db 8D 88 88
88 YP YP ~Y8888P' Y88888P Y888888P 88 YD Y888888P `8888Y' YP YP
*/
// http://code.jquery.com/jquery.compat-1.3.js
// .add() returns elements in document order.
$('.foo').add('.bar').eq(0)
// .clone(true) now copies events AND data instead of just events.
$('.muchodata')
.data('saywhattt','ooh yah')
.clone(true)
.appendTo('section:eq(2)')
.data('saywhattt') // 'ooh yah'
jQuery(elem).data() no longer returns an id, it returns the element’s object cache instead.
$('#bigcheif')
.data('age',7).data('interests',['lollipops'])
.data(); // previously something like 12324789549
// now an obj: { 'age' : 12, 'interests' : ['lollipops'] }
jQuery() (with no arguments) no longer converts to jQuery(document).
$(documen).ready(function(){
})
//.val('name') on an option or a checkbox is no longer ambiguous (it will always select by value now, not by text value).
<select>
<option value="1">2</option>
<option value="2">1</option>
</select>
$('select').val('1'); // first one set to selected
$('select').val('2'); // first one set to selecteds
//jQuery.browser.version returns engine version for webkit and gecko/mozilla
$.browser.webkit
$.browser.mozilla
$.browser.msie
$.browser.opera
$.browser.version
//Param serialization now happens in the PHP/Rails style by default. You can use jQuery.ajaxSettings.traditional = true; to use traditional parameter serialization. You can also set the behavior on a per-request basis by passing traditional: true to the jQuery.ajax method.
// In jQuery 1.3: (or jQuery.ajaxSettings.traditional=true)
$.param( {foo: ["bar", "baz"]} ) === “foo=bar&foo=baz”.
// In jQuery1.4
$.param( {foo: ["bar", "baz"]} ) === “foo[]=bar&foo[]=baz”.
// jQuery.extend(true, ...) No longer extends non-plain-objects or arrays.
var func = function() {}
var extendee = {hello: func};
$.extend(extendee, {foo: "bar"})
extendee // in 1.3: {foo: "bar", hello: {}}
extendee // in 1.4: {foo: "bar", hello: func }
// If an Ajax request is made without specifying a dataType and it is returned as text/javascript, it will be executed. Previously, an explicit dataType was required. Previously it would have been interpretted as text and remained unexecuted.
// Response header is obeyed if no dataType given:
Content-Type : 'application/json' // parsed as JSON
// or
Content-Type : 'application/javascript' // executed as script
// Setting an Ajax request’s ifModified now takes ETags into consideration.
$.ajax({
url : ajaxurl,
success : purplePeopleEaterFn,
ifModified : true
})
//We are now strict about incoming JSON and throw an exception if we get malformed JSON. If you need to be able to evaluate malformed JSON that is valid JavaScript, you can make a text request and use eval() to evaluate the contents.
$.getJSON('bestdataever.json.js',function(){
...
});
//response:
{
"unquotedkeys" : function illegalfuncs(){},
"invalid" : true
}
// http://code.jquery.com/jquery.compat-1.3.js
888 888 888
888 888 888
888 888 888
888888 88888b. 8888b. 88888b. 888 888 888 888 .d88b. 888 888 d8b
888 888 "88b "88b 888 "88b 888 .88P 888 888 d88""88b 888 888 Y8P
888 888 888 .d888888 888 888 888888K 888 888 888 888 888 888
Y88b. 888 888 888 888 888 888 888 "88b Y88b 888 Y88..88P Y88b 888 d8b
"Y888 888 888 "Y888888 888 888 888 888 "Y88888 "Y88P" "Y88888 88P
888 8P
Y8b d88P "
"Y88P"
more at: http://jquery14.com
my podcast: http://yayquery.com
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment