Covering jQuery and the details behind the features. Also covers the new 1.3 features.

1. jQuery <3 Developers

2. Hi, I'm Remy.
Enjoys: JavaScript &
dressing (sort of) like Mr T.

3. Unobtrusive
JavaScript

4. Worst example
<a href=quot;javascript:window.open(
'help.html')quot;>Help</a>

5. Just as bad
<a href=quot;#quot; onclick=quot;window.open(
'help.html')quot;>Help</a>

6. quot;Why? Doesn't
everyone have
JavaScript turned on?quot;

7. No!

8. Corporate
policies
NoScript Firefox
plugin No!
Network script
stripping proxies

9. Corporate
policies
NoScript Firefox
plugin No!
Network script
stripping proxies

11. Unobtrusive way
<a href=quot;help.htmlquot;>Help</a>
DOM scripting way

12. Graceful Degradation
????? What's the difference ????
Progressive Enhancement

13. GD vs. PE

14. GD vs. PE
• Old way
• Top down
• All singing all dancing
first
• Add fail cases
• Run out of time, you're
caught out

15. GD vs. PE
• Old way • New way
• Top down • Bottom up
• All singing all dancing • Layered development
first
• No environment
• Add fail cases assumptions
• Run out of time, you're • Works by default
caught out

16. quot;Find something,
do something to itquot;

17. Why jQuery?

18. Why a DOM Library?

19. • Cross browser quirks handled for you
• DOM scripting made easy

20. Less donkey work
More problem solving

21. Less donkey work
More problem solving

22. What's so special
about jQuery?

23. It's pretty popular...

24. Community!

25. Community

26. APIs
docs.jquery.com
api.jquery.com
visualjquery.com
Community

27. APIs Blogs, tutorials, screencasts,
docs.jquery.com plugins, development sprints
api.jquery.com
visualjquery.com
Community

28. APIs Blogs, tutorials, screencasts,
docs.jquery.com plugins, development sprints
api.jquery.com
visualjquery.com
Google Groups
jquery-en
jquery-dev
Community jquery-ui-en
jquery-ui-dev
jquery-a11y

29. APIs Blogs, tutorials, screencasts,
docs.jquery.com plugins, development sprints
api.jquery.com
visualjquery.com
Google Groups
jquery-en
Twitter jquery-dev
@jquery Community jquery-ui-en
jquery-ui-dev
@jquerysites
@jqueryui jquery-a11y

30. APIs Blogs, tutorials, screencasts,
docs.jquery.com plugins, development sprints
api.jquery.com
visualjquery.com
Google Groups
jquery-en
Twitter jquery-dev
@jquery Community jquery-ui-en
jquery-ui-dev
@jquerysites
@jqueryui jquery-a11y
IRC channel
freenode.net/#jquery

32. What's in the box?

33. • Selector engine: Sizzle
• DOM manipulation
• Events
• Effects
• Ajax
• Utilities
What's in the box?

34. ew in
N
1.3
Sizzlejs.com

35. The bling function

36. $ == jQuery

37. $('div')
==
jQuery('div')

38. $
• Selectors - CSS1, CSS2 and some CSS3

39. $
• Selectors - CSS1, CSS2 and some CSS3
• DOM elements

40. $
• Selectors - CSS1, CSS2 and some CSS3
• DOM elements
• Raw HTML

41. $
• Selectors - CSS1, CSS2 and some CSS3
• DOM elements
• Raw HTML
• quot;Readyquot; functions

43. $('ul')

44. $('ul')
$(document.createElement('ul'))

45. $('ul')
$(document.createElement('ul'))
$('<ul />') or $('<ul></ul>')

46. jQuery(document).ready(fn)
$(document).ready(fn)
$(fn)
jQuery(function ($) {
// private instance of $
})

47. jQuery(document).ready(fn)
$(document).ready(fn)
$(fn)
jQuery(function ($) {
// private instance of $
})

48. jQuery(document).ready(fn)
$(document).ready(fn)
$(fn)
jQuery(function ($) {
// private instance of $
})

49. jQuery(document).ready(fn)
$(document).ready(fn)
$(fn)
jQuery(function ($) {
// private instance of $
})

50. Custom Selectors
• :visible, :hidden
• :first, :last
• :even, :odd
• :animated
• :has

51. $('li a')
<ul>
<li>1st</li>
<li>2nd</li>
<li><a href=quot;#thirdquot;>3rd</a></li>
<li>4th</li>
</ul>

52. $('li a')
<ul>
<li>1st</li>
<li>2nd</li>
<li><a href=quot;#thirdquot;>3rd</a></li>
<li>4th</li>
</ul>

53. $('li:has(a)')
<ul>
<li>1st</li>
<li>2nd</li>
<li><a href=quot;#thirdquot;>3rd</a></li>
<li>4th</li>
</ul>

54. $('li:has(a)')
<ul>
<li>1st</li>
<li>2nd</li>
<li><a href=quot;#thirdquot;>3rd</a></li>
<li>4th</li>
</ul>

55. ew in
N
1.3 Selector Attributes
• selector, e.g. $('li').find('a').selector == 'li a'
• context

56. Extending Selectors
$.extend($.expr[':'], {
visible : function(elem){
return elem.offsetWidth > 0
|| elem.offsetHeight > 0;
}
});

57. Extending Selectors
$.extend($.expr[':'], {
visible : function(elem){
return elem.offsetWidth > 0
|| elem.offsetHeight > 0;
}
});

58. Extending Selectors
$.extend($.expr[':'], {
visible : function(elem){
return elem.offsetWidth > 0
|| elem.offsetHeight > 0;
}
});

59. Extending Selectors
$.extend($.expr[':'], {
visible : function(elem){
return elem.offsetWidth > 0
|| elem.offsetHeight > 0;
}
});

60. Behind the Scenes
• getElementById
• getElementsByTagName
• querySelectorAll
• getElementsByClassName

61. $ returns a new object

62. ...that also has array
like properties.

63. >>> $('li')
[li, li]
>>> $('li')[0]
<li>
>>> $('li').length
2

64. Does Selector Exist?
if ( $(expr).length ) {
// do stuff
}

65. Plugin Architecture
$.fn.myPlugin = function () {
return this.each(function () {
// do stuff
});
}

66. Plugin Architecture
$.fn.myPlugin = function () {
return this.each(function () {
// do stuff
});
}

67. Plugin Architecture
$.fn.myPlugin = function () {
return this.each(function () {
// do stuff
});
}

68. Plugin Architecture
$.fn.myPlugin = function () {
return this.each(function () {
// do stuff
});
}

69. Chaining

70. Common
$('a').addClass('ready').click(fn);

71. Common
$('a').addClass('ready').click(fn);

72. Common
$('a').addClass('ready').click(fn);

73. Common
$('a').addClass('ready').click(fn);

74. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');

75. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');

76. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');

77. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');

78. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');

79. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');

80. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');

81. DOM Navigation

82. Finding

83. $('li a')
$('li').find('a')
$('a').next()
$('a').parent()
$('a').parents('ul')

84. <ul>
$('li a')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

85. <ul>
$('li a')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

86. <ul>
$('li a').next()
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

87. <ul>
$('li a').next()
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

88. <ul>
$('li a').next().parent()
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

89. <ul>
$('li a').next().parent()
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

90. <ul>
$('li a').parents('ul')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

91. <ul>
$('li a').parents('ul')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

92. ew in
N
1.3 .closest('expr')
<ul>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

93. ew in
N
1.3 $('img').closest('ul')
<ul>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

94. ew in
N
1.3 $('img').closest('ul')
<ul>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

95. ew in
N
1.3 $('img').closest('ul')
<ul>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>

96. Filtering

97. $('li').filter(':first')
$('a').not(':has(span)')
$('a').slice(1, 1)

98. <li>
$('li')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>

99. <li>
$('li')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>

100. <li>
$('li').filter(':has(img)')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>

101. <li>
$('li').filter(':has(img)')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>

102. <li>
$('li').not(':first')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>

103. <li>
$('li').not(':first')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>

104. <li>
$('li').slice(0, 2)
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>

105. <li>
$('li').slice(0, 2)
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>

106. Manipulation

107. • append, appendTo, prepend, prependTo
• after, before, insertAfter, insertBefore
• wrap, wrapAll, wrapInner
• empty, remove
• clone
• html, text

108. $('li').append('<span />')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>

109. $('li').append('<span />')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
<span></span>
</li>

110. $('li').prepend('<span />')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>

111. $('li').prepend('<span />')
<li>
<span></span>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>

112. $('#foo').prependTo('li')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<img id=quot;fooquot; src=quot;foo.gifquot;>

113. $('#foo').prependTo('li')
<li>
<img id=quot;fooquot; src=quot;foo.gifquot;>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>

114. $('ul').wrap('<div />')
<ul>
<li><a href=quot;#firstquot;>1st</a></li>
</ul>
<ul>
<li><a href=quot;#secondquot;>2nd</a></li>
</ul>

115. $('ul').wrap('<div />')
<div>
<ul>
<li><a href=quot;#firstquot;>1st</a></li>
</ul>
</div>
<div>
<ul>
<li><a href=quot;#secondquot;>2nd</a></li>
</ul>
</div>

116. $('ul').wrapAll('<div />')
<div>
<ul>
<li><a href=quot;#firstquot;>1st</a></li>
</ul>
<ul>
<li><a href=quot;#secondquot;>2nd</a></li>
</ul>
</div>

117. $('li').wrapInner('<em />')
<ul>
<li><em><a href=quot;#firstquot;>1st</a></
em></li>
</ul>
<ul>
<li><em><a href=quot;#secondquot;>2nd</
a></em></li>
</ul>

118. Style Manipulation

119. Key/Value Pair
// get
$('input').attr('title');
$('a').css('font-weight');
// set
$('input').attr('title', 'Name');
$('a').css('font-weight', 'bold');

120. Changing Multiples
$('input').attr({
'title' : 'Your username',
'value' : 'Enter your username'
});
$('a').css({
'font-weight' : 'bold',
'background-color' : '#c00'
});

121. $('a').attr({ class :
'home', href : '/home' });
<a href=quot;/logoutquot; class=quot;logoutquot;>Go</a>

122. $('a').attr({ class :
'home', href : '/home' });
<a href=quot;/homequot; class=quot;homequot;>Go</a>

123. Dimensions & Position

124. • width, height
• innerHeight, innerWidth
• outerHeight, outerWidth (pass true to
include margins)
• scrollLeft, scrollTop
• offset, position (includes margin)

125. Events

126. bind, trigger & unbind

127. bind, trigger & unbind
...and .one(fn) (which unbinds on trigger)

128. $('a').bind('click', function () {
alert('you clicked');
return false;
}).trigger('click');

129. $('a').bind('click', function () {
alert('you clicked');
return false;
}).trigger('click');

130. $('a').bind('click', function () {
alert('you clicked');
return false;
}).trigger('click');

131. $('a').bind('click', function () {
alert('you clicked');
return false;
}).trigger('click');

132. $('a').bind('click', function () {
alert('you clicked');
return false;
}).trigger('click');

133. $('a').bind('click', function (event, msg) {
alert('you clicked: ' + msg);
return false;
}).trigger('click', ['ok']);

134. $('a').bind('click', function (event, msg) {
alert('you clicked: ' + msg);
return false;
}).trigger('click', ['ok']);

135. $('a').bind('click', function (event, msg) {
alert('you clicked: ' + msg);
return false;
}).trigger('click', ['ok']);

136. $('a').bind('click', function (event, msg) {
alert('you clicked: ' + msg);
return false;
}).trigger('click', ['ok']);

137. $('a').bind('click', function (event, msg) {
alert('you clicked: ' + msg);
return false;
}).trigger('click', ['ok']);

139. blur mousemove
change * mouseout
click mouseover
dblclick mouseup
error ready
focus resize
hover scroll
keydown select
keypress submit
keyup toggle
load unload
mousedown

140. triggerHandler(event, data)

141. triggerHandler(event, data)
Watch out: doesn't chain!

142. Event object
• preventDefault()
• stopPropagation()
• return false (preventDefault +
stopPropagation)
• stopImmediatePropagation()
ew in
N
1.3

143. ew in
N
1.3
Live Events

144. $('.remove').live('click',function(){
$(this).closest('tr').remove();
});

145. http://remysharp.com/demo/live.html

146. http://remysharp.com/demo/live.html

147. Live support
• Supported: click, dblclick, mousedown,
mouseup, mousemove, mouseover, mouseout,
keydown, keypress, keyup
• Not supported: blur, focus,
mouseenter, mouseleave, change,
submit

148. Effects

149. Built in Effects
• show, hide, toggle
• fadeIn, fadeOut, fadeTo
• slideUp, slideDown, slideToggle
• animate - roll your own!

150. http://remysharp.com/demo/hide-with-margins.html

151. http://remysharp.com/demo/hide-with-margins.html

152. .animate(prop, speed,
callback)

153. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});

154. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});

155. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});

156. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});

157. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});

158. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});

159. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});

160. http://remysharp.com/demo/animate.html

161. http://remysharp.com/demo/animate.html

162. Bespoke Steps
$('div').queue(function () {
$(this).removeClass('newcolor');
// pass back to sequence
$(this).dequeue();
});

163. Bespoke Steps
$('div').queue(function () {
$(this).removeClass('newcolor');
// pass back to sequence
$(this).dequeue();
});

164. Bespoke Steps
$('div').queue(function () {
$(this).removeClass('newcolor');
// pass back to sequence
$(this).dequeue();
});

165. ew in
N
1.3
$.fx.off = true

166. Enchantment

167. Enchantment
http://jqueryui.com/docs/Effects/Methods

168. UI Effects Core
• addClass, removeClass, toggleClass
• show, hide, toggle
• animate

169. http://jqueryui.com/demos/addClass/default.html

170. http://jqueryui.com/demos/addClass/default.html

171. Ajax

172. Über Easy Ajax
$(expr).load - squirt into expr
$('#info').load('info.html #links li');

173. Über Easy Ajax
$(expr).load - squirt into expr
$('#info').load('info.html #links li');

174. Über Easy Ajax
$(expr).load - squirt into expr
$('#info').load('info.html #links li');

175. Über Easy Ajax
$(expr).load - squirt into expr
$('#info').load('info.html #links li');

176. Über Easy Ajax
$(expr).load - squirt into expr
$('#info').load('info.html #links li');

177. Ajax Shortcuts
• $.get
• $.post
• $.getScript
• $.getJSON

178. $.ajax
• Full control
• Global setup available
• Much easier to debug
• http://docs.jquery.com/Ajax/
jQuery.ajax#options

179. $.ajax({
url: 'http://www.twitter.com/
statuses/user_timeline/rem.json?
callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
// this == XMLHttpRequest object
$('#status').html(data[0].text);
},
error: function(xhr, status, e) {
// debugging enabled
console.log(arguments);
}
});

180. $.ajax({
url: 'http://www.twitter.com/
statuses/user_timeline/rem.json?
callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
// this == XMLHttpRequest object
$('#status').html(data[0].text);
},
error: function(xhr, status, e) {
// debugging enabled
console.log(arguments);
}
});

181. $.ajax({
url: 'http://www.twitter.com/
statuses/user_timeline/rem.json?
callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
// this == XMLHttpRequest object
$('#status').html(data[0].text);
},
error: function(xhr, status, e) {
// debugging enabled
console.log(arguments);
}
});

182. $.ajax({
url: 'http://www.twitter.com/
statuses/user_timeline/rem.json?
callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
// this == XMLHttpRequest object
$('#status').html(data[0].text);
},
error: function(xhr, status, e) {
// debugging enabled
console.log(arguments);
}
});

183. $.ajax({
url: 'http://www.twitter.com/
statuses/user_timeline/rem.json?
callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
// this == XMLHttpRequest object
$('#status').html(data[0].text);
},
error: function(xhr, status, e) {
// debugging enabled
console.log(arguments);
}
});

184. Server Side Tip!
// sent headers include:
X-Requested-With = XMLHttpRequest

185. Utilities

186. Tests, Iterators &
Operations
• $.inArray, $.isFunction, $.isArray,
• $.each, $.extend, $.grep, $.map
• $.merge, $.unique, $.makeArray

187. Good Guys Come Last
1. Include other library first (that uses $)
2. Then include jQuery, then:
$.noConflict();
// or
$j = $.noConflict();

188. Sniffing

189. Old Way
• $.browser
• $.browser.version

190. ew in
N
1.3
$.support

191. ew in
N
1.3
$.support
boxModel leadingWhitespace opacity
cssFloat noCloneEvent scriptEval
hrefNormalized objectAll style
htmlSerialize tbody

192. Remy Sharp
@rem
remy@leftlogic.com
http://remysharp.com
http://jqueryfordesigners.com
http://full-frontal.org
P h o t o s by
charliebrewer, manfrys, magw21,
abbydonkrafts, nicora, leecullivan,
jaako, thetruthabout, artisandhu,
sundazed, otterfreak, frf_kmeron,
mattlogelin, dandiffendale,
mwagner, stanrandom, anniewong,
legin, kerotab