Skip to content

Instantly share code, notes, and snippets.

@paulirish

paulirish/gist:284769

Created January 23, 2010 20:07
Show Gist options
  • Save paulirish/284769 to your computer and use it in GitHub Desktop.
Save paulirish/284769 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.js
// 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment