2. Why JS Libraries?
⢠DOM scripting made easy
⢠Cross browser work done for you
⢠Puts some fun back in to coding
3. Why jQuery?
⢠Lean API, makes your code smaller
⢠Small (15k gzipâd), encapsulated, friendly
library - plays well!
⢠Plugin API is really simple
⢠Large, active community
⢠Big boys use it too: Google, BBC, Digg,
Wordpress, Amazon, IBM.
4. Whatâs in jQuery?
⢠Selectors & Chaining
⢠DOM manipulation
⢠Events
⢠Ajax
⢠Simple effects
9. Selector Performance
$(â#emailâ) // same as getElementById
$(â.emailâ) // slower on a big DOM
// using context
$(â#emails .subjectâ)
$(â.subjectâ, this)
// Caching
var subjects = $(â#emails .subjectâ);
11. Chaining
⢠jQuery returns itself *
⢠We can use the selector once, and keep
manipulating
⢠Can reduce size of our code
12. Chaining
⢠jQuery returns itself *
⢠We can use the selector once, and keep
manipulating
⢠Can reduce size of our code
* except when requesting string values, such as .css() or .val()
13. Chaining in Action
var image = new Image();
$(image)
.load(function () {
// show new image
})
.error(function () {
// handle error
})
.attr(âsrcâ, â/path/to/large-image.jpgâ);
14. More Chaining
// simple tabs
$(âa.tabâ).click(function () {
$(tabs)
.hide()
.ďŹlter(this.hash)
.show();
});
// live example
21. Data
⢠Storing data directly $(this).data(âtypeâ, âforwardâ);
against elements can
var types =
cause leaks $(âa.subjectâ).data(âtypeâ);
⢠.data() clean way of $(âa.subjectâ).removeData();
linking data to element
⢠All handled by jQueryâs
garbage collection
23. DOM Ready
⢠Most common event: DOM ready
$(document).ready(function () {})
// or as a shortcut:
$(function () {})
24. Binding
⢠Manages events and garbage collection
⢠Event functions are bound to the elements
matched selector
⢠Also supports .one()
$(âa.revealâ).bind(âclickâ, function(event) {
// âthisâ refers to the current element
// this.hash is #moreInfo - mapping to real element
$(this.hash).slideDown();
}).ďŹlter(â:ďŹrstâ).trigger(âclickâ);
26. Custom Events
⢠Roll your own
⢠Bind to element (or elements)
⢠Trigger them later and pass data
$(âdiv.myWidgetâ).trigger(âfooâ, { id : 123 });
// id access via event.data.id
27. Event Namespaces
⢠Support for event $(âaâ).bind(âclick.fooâ, fn);
subsets via namespaces $(âaâ).unbind(â.fooâ);
⢠If you donât want to
unbind all type X events
- use namespaces
29. Ajax Made Easy
⢠Cross browser, no hassle.
⢠$.ajax does it all
⢠Helpers $.get, $.getJSON, $.getScript,
$.post, $.load
⢠All Ajax requests sends:
X-Requested-With = XMLHttpRequest
30. $.ajax
$(âform.registerâ).submit(function () {
var el = this; // cache for use in success function
$.ajax({
url : $(this).attr(âactionâ),
data : { âusernameâ : $(âinput.usernameâ).val() }, // âthisâ is the link
beforeSend : showValidatingMsg, // function
dataType : âjsonâ,
type : âpostâ,
success : function (data) {
// do something with data - show validation message
},
error : function (xhr, status, e) {
// handle the error - inform the user of problem
console.log(xhr, status, e);
}
});
return false; // cancel default browser action
});