Download - The DOM scripting toolkit: jQuery
-
8/14/2019 The DOM scripting toolkit: jQuery
1/92
The DOM Scripting Toolkit:
jQueryRemy SharpLeft Logic
-
8/14/2019 The DOM scripting toolkit: jQuery
2/92
Why JS Libraries?
DOM scripting made easy
-
8/14/2019 The DOM scripting toolkit: jQuery
3/92
Why JS Libraries?
DOM scripting made easy Cross browser work done for you
-
8/14/2019 The DOM scripting toolkit: jQuery
4/92
Why JS Libraries?
DOM scripting made easy Cross browser work done for you
Puts some fun back in to coding
-
8/14/2019 The DOM scripting toolkit: jQuery
5/92
Why jQuery?
Lean API, makes your code smaller
-
8/14/2019 The DOM scripting toolkit: jQuery
6/92
Why jQuery?
Lean API, makes your code smaller
Small (15k gzipd), encapsulated, friendly
library - plays well!
-
8/14/2019 The DOM scripting toolkit: jQuery
7/92
Why jQuery?
Lean API, makes your code smaller
Small (15k gzipd), encapsulated, friendly
library - plays well!
Plugin API is reallysimple
-
8/14/2019 The DOM scripting toolkit: jQuery
8/92
Why jQuery?
Lean API, makes your code smaller
Small (15k gzipd), encapsulated, friendly
library - plays well!
Plugin API is reallysimple
Large, active community
-
8/14/2019 The DOM scripting toolkit: jQuery
9/92
Why jQuery?
Lean API, makes your code smaller
Small (15k gzipd), encapsulated, friendly
library - plays well!
Plugin API is reallysimple
Large, active community
Big boys use it too: Google, BBC, Digg,Wordpress, Amazon, IBM.
-
8/14/2019 The DOM scripting toolkit: jQuery
10/92
Whats in jQuery?
Selectors & Chaining
DOM manipulation Events
Ajax
Simple effects
-
8/14/2019 The DOM scripting toolkit: jQuery
11/92
Selectors$(#emails a.subject);
-
8/14/2019 The DOM scripting toolkit: jQuery
12/92
Selectors
Find something, do something with it
-
8/14/2019 The DOM scripting toolkit: jQuery
13/92
Selectors
Find something, do something with it
The dollar function
-
8/14/2019 The DOM scripting toolkit: jQuery
14/92
Selectors
Find something, do something with it
The dollar function CSS 1-3 selectors at the core of jQuery
-
8/14/2019 The DOM scripting toolkit: jQuery
15/92
Selectors
Find something, do something with it
The dollar function CSS 1-3 selectors at the core of jQuery
Custom selectors
-
8/14/2019 The DOM scripting toolkit: jQuery
16/92
CSS Selectors
$(div)
-
8/14/2019 The DOM scripting toolkit: jQuery
17/92
CSS Selectors
$(div)
$(div.foo)
-
8/14/2019 The DOM scripting toolkit: jQuery
18/92
CSS Selectors
$(div)
$(div.foo)
$(a[type=application/pdf])
-
8/14/2019 The DOM scripting toolkit: jQuery
19/92
CSS Selectors
$(div)
$(div.foo)
$(a[type=application/pdf])
$(tr td:first-child)
-
8/14/2019 The DOM scripting toolkit: jQuery
20/92
Custom Selectors
$(div:visible)
-
8/14/2019 The DOM scripting toolkit: jQuery
21/92
Custom Selectors
$(div:visible)
$(:animated)
-
8/14/2019 The DOM scripting toolkit: jQuery
22/92
Custom Selectors
$(div:visible)
$(:animated)
$(:input)
-
8/14/2019 The DOM scripting toolkit: jQuery
23/92
Custom Selectors
$(div:visible)
$(:animated)
$(:input)
$(tr:odd)
-
8/14/2019 The DOM scripting toolkit: jQuery
24/92
Selector Performance
$(#email) // same as getElementById
-
8/14/2019 The DOM scripting toolkit: jQuery
25/92
Selector Performance
$(#email) // same as getElementById
$(.email) // slower on a big DOM
-
8/14/2019 The DOM scripting toolkit: jQuery
26/92
Selector Performance
$(#email) // same as getElementById
$(.email) // slower on a big DOM
// using context$(#emails .subject)$(.subject, this)
-
8/14/2019 The DOM scripting toolkit: jQuery
27/92
Selector Performance
$(#email) // same as getElementById
$(.email) // slower on a big DOM
// using context$(#emails .subject)$(.subject, this)
// Cachingvar subjects = $(#emails .subject);
-
8/14/2019 The DOM scripting toolkit: jQuery
28/92
Chaining$(#emails .subjects)
.click()
.addClass(read);
-
8/14/2019 The DOM scripting toolkit: jQuery
29/92
Chaining
jQuery returns itself *
* except when requesting string values, such as .css() or .val()
-
8/14/2019 The DOM scripting toolkit: jQuery
30/92
Chaining
jQuery returns itself * We can use the selector once, and keepmanipulating
* except when requesting string values, such as .css() or .val()
-
8/14/2019 The DOM scripting toolkit: jQuery
31/92
Chaining
jQuery returns itself * We can use the selector once, and keepmanipulating
Can reduce size of our code
* except when requesting string values, such as .css() or .val()
-
8/14/2019 The DOM scripting toolkit: jQuery
32/92
Chaining in Action
var image = new Image();
$(image)
.load(function () { // show new image
})
.error(function () { // handle error}).attr(src, /path/to/large-image.jpg);
-
8/14/2019 The DOM scripting toolkit: jQuery
33/92
More Chaining
// simple tabs
$(a.tab).click(function () {$(tabs).hide().filter(this.hash)
.show();});
-
8/14/2019 The DOM scripting toolkit: jQuery
34/92
Collections$(#emails .subjects).each(fn)
-
8/14/2019 The DOM scripting toolkit: jQuery
35/92
Collections
.each(fn)Iterates through a collection applying themethod
-
8/14/2019 The DOM scripting toolkit: jQuery
36/92
Collections
.each(fn)Iterates through a collection applying themethod
.map(fn)Iterates through collection, returning arrayfrom fn
-
8/14/2019 The DOM scripting toolkit: jQuery
37/92
Working the DOM$(this).addClass(read).next().show();
-
8/14/2019 The DOM scripting toolkit: jQuery
38/92
DOM Walking
Navigation: children,parent, parents, siblings,next, prev
-
8/14/2019 The DOM scripting toolkit: jQuery
39/92
DOM Walking
Navigation: children,parent, parents, siblings,
next, prev
Filters: filter, find, not, eq
-
8/14/2019 The DOM scripting toolkit: jQuery
40/92
DOM Walking
Navigation: children,parent, parents, siblings,
next, prev
Filters: filter, find, not, eq
Collections: add, end
-
8/14/2019 The DOM scripting toolkit: jQuery
41/92
DOM Walking
Navigation: children,parent, parents, siblings,
next, prev
Filters: filter, find, not, eq
Collections: add, end Tests: is
-
8/14/2019 The DOM scripting toolkit: jQuery
42/92
DOM Walking
Navigation: children,parent, parents, siblings,
next, prev
Filters: filter, find, not, eq
Collections: add, end Tests: is
$(div).find(a.subject)
.click(fn).end() // strip filter.eq(0) // like :first.addClass(highlight);
-
8/14/2019 The DOM scripting toolkit: jQuery
43/92
Manipulation
Inserting: after, append, before, prepend,html, text, wrap, clone
-
8/14/2019 The DOM scripting toolkit: jQuery
44/92
Manipulation
Inserting: after, append, before, prepend,html, text, wrap, clone
Clearing: empty, remove, removeAttr
-
8/14/2019 The DOM scripting toolkit: jQuery
45/92
Manipulation
Inserting: after, append, before, prepend,html, text, wrap, clone
Clearing: empty, remove, removeAttr Style: attr, addClass, removeClass,
toggleClass, css, hide, show, toggle
-
8/14/2019 The DOM scripting toolkit: jQuery
46/92
Manipulation
Inserting: after, append, before, prepend,html, text, wrap, clone
Clearing: empty, remove, removeAttr Style: attr, addClass, removeClass,
toggleClass, css, hide, show, toggle
var a = $(document.createElement(a)); // or $()a.css(opacity, 0.6).text(My Link).attr(href, /home/);
$(div).empty().append(a);
-
8/14/2019 The DOM scripting toolkit: jQuery
47/92
Data
Storing data directlyagainst elements can
cause leaks
-
8/14/2019 The DOM scripting toolkit: jQuery
48/92
Data
Storing data directlyagainst elements can
cause leaks
.data() clean way oflinking data to element
-
8/14/2019 The DOM scripting toolkit: jQuery
49/92
Data
Storing data directlyagainst elements can
cause leaks
.data() clean way oflinking data to element
All handled by jQuerysgarbage collection
-
8/14/2019 The DOM scripting toolkit: jQuery
50/92
Data
Storing data directlyagainst elements can
cause leaks
.data() clean way oflinking data to element
All handled by jQuerysgarbage collection
$(this).data(type, forward);
var types =$(a.subject).data(type);
$(a.subject).removeData();
-
8/14/2019 The DOM scripting toolkit: jQuery
51/92
Events$(a.subject).click();
DOM R d
-
8/14/2019 The DOM scripting toolkit: jQuery
52/92
DOM Ready
Most common event: DOM ready
DOM R d
-
8/14/2019 The DOM scripting toolkit: jQuery
53/92
DOM Ready
Most common event: DOM ready
$(document).ready(function () {})
// or as a shortcut:
$(function () {})
-
8/14/2019 The DOM scripting toolkit: jQuery
54/92
Binding
Manages events and garbage collection
-
8/14/2019 The DOM scripting toolkit: jQuery
55/92
Binding
Manages events and garbage collection Event functions are bound to the elements
matched selector
-
8/14/2019 The DOM scripting toolkit: jQuery
56/92
Binding
Manages events and garbage collection Event functions are bound to the elements
matched selector
Also supports .one()
-
8/14/2019 The DOM scripting toolkit: jQuery
57/92
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();
}).filter(:first).trigger(click);
-
8/14/2019 The DOM scripting toolkit: jQuery
58/92
Helpers
Mouse: click, dlbclick, mouseover, toggle,hover, etc.
-
8/14/2019 The DOM scripting toolkit: jQuery
59/92
Helpers
Mouse: click, dlbclick, mouseover, toggle,hover, etc.
Keyboard: keydown, keyup, keypress
-
8/14/2019 The DOM scripting toolkit: jQuery
60/92
Helpers
Mouse: click, dlbclick, mouseover, toggle,hover, etc.
Keyboard: keydown, keyup, keypress Forms: change, select, submit, focus, blur
-
8/14/2019 The DOM scripting toolkit: jQuery
61/92
Helpers
Mouse: click, dlbclick, mouseover, toggle,hover, etc.
Keyboard: keydown, keyup, keypress Forms: change, select, submit, focus, blur
Windows: scroll
-
8/14/2019 The DOM scripting toolkit: jQuery
62/92
Helpers
Mouse: click, dlbclick, mouseover, toggle,hover, etc.
Keyboard: keydown, keyup, keypress Forms: change, select, submit, focus, blur
Windows: scroll Windows, images, scripts: load, error
-
8/14/2019 The DOM scripting toolkit: jQuery
63/92
Custom Events
Roll your own
-
8/14/2019 The DOM scripting toolkit: jQuery
64/92
Custom Events
Roll your own
Bind to element (or elements)
-
8/14/2019 The DOM scripting toolkit: jQuery
65/92
Custom Events
Roll your own
Bind to element (or elements) Trigger them later and pass data
-
8/14/2019 The DOM scripting toolkit: jQuery
66/92
Custom Events
Roll your own
Bind to element (or elements) Trigger them later and pass data
$(div.myWidget).trigger(foo, [123/*id*/]);// id access via// .bind(foo, function (event, id, etc) {})
-
8/14/2019 The DOM scripting toolkit: jQuery
67/92
Event Namespaces
Support for eventsubsets via namespaces
-
8/14/2019 The DOM scripting toolkit: jQuery
68/92
Event Namespaces
Support for eventsubsets via namespaces
If you dont want tounbind all type X events
- use namespaces
-
8/14/2019 The DOM scripting toolkit: jQuery
69/92
Event Namespaces
Support for eventsubsets via namespaces
If you dont want tounbind all type X events
- use namespaces
$(a).bind(click.foo, fn);
$(a).unbind(.foo);
-
8/14/2019 The DOM scripting toolkit: jQuery
70/92
Ajax$.ajax({ url : /foo, success : bar });
-
8/14/2019 The DOM scripting toolkit: jQuery
71/92
Ajax Made Easy
Cross browser, no hassle.
-
8/14/2019 The DOM scripting toolkit: jQuery
72/92
Ajax Made Easy
Cross browser, no hassle.
$.ajax does it all
-
8/14/2019 The DOM scripting toolkit: jQuery
73/92
Ajax Made Easy
Cross browser, no hassle.
$.ajax does it all Helpers $.get, $.getJSON, $.getScript,$.post, $.load
-
8/14/2019 The DOM scripting toolkit: jQuery
74/92
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
-
8/14/2019 The DOM scripting toolkit: jQuery
75/92
$.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 linkbeforeSend: showValidatingMsg, // functiondataType : 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
});
-
8/14/2019 The DOM scripting toolkit: jQuery
76/92
Effects$(this).slideDown();
-
8/14/2019 The DOM scripting toolkit: jQuery
77/92
Base Effects
$(div:hidden).show(200, fn);$(div:visible).hide(200);
$(div).fadeIn(200);$(div).slideDown(100);
-
8/14/2019 The DOM scripting toolkit: jQuery
78/92
Base Effects
$(div:hidden).show(200, fn);$(div:visible).hide(200);
$(div).fadeIn(200);$(div).slideDown(100);
$(div).animate({opacity : 0.5,
left : -=10px},slow, fn)
-
8/14/2019 The DOM scripting toolkit: jQuery
79/92
Utilities$.browser.version
-
8/14/2019 The DOM scripting toolkit: jQuery
80/92
Utilities
Iterators: each, map, grep
-
8/14/2019 The DOM scripting toolkit: jQuery
81/92
-
8/14/2019 The DOM scripting toolkit: jQuery
82/92
Utilities
Iterators: each, map, grep Browser versions, model and boxModelsupport
isFunction
-
8/14/2019 The DOM scripting toolkit: jQuery
83/92
Core Utilities
jQuery can plays with others!
-
8/14/2019 The DOM scripting toolkit: jQuery
84/92
Core Utilities
jQuery can plays with others!
$j = $.noConflict();$j === $ // false
-
8/14/2019 The DOM scripting toolkit: jQuery
85/92
Core Utilities
Extend jQuery, merge objects and createsettings from defaults
-
8/14/2019 The DOM scripting toolkit: jQuery
86/92
Core Utilities
Extend jQuery, merge objects and createsettings from defaults
var defaults = { limit : 10,dataType : json };var options = { limit : 5,username :remy };
var settings = $.extend({}, defaults, options);
// settings = { limit : 5, dataType : json,username : remy }
-
8/14/2019 The DOM scripting toolkit: jQuery
87/92
Plugins$(#emails .subjects).doMagic()
-
8/14/2019 The DOM scripting toolkit: jQuery
88/92
Plugins
Simple to write
-
8/14/2019 The DOM scripting toolkit: jQuery
89/92
Plugins
Simple to write Makes your code more reusable
-
8/14/2019 The DOM scripting toolkit: jQuery
90/92
Plugins
Simple to write Makes your code more reusable Dont break the chain!
-
8/14/2019 The DOM scripting toolkit: jQuery
91/92
Simple Plugin
// wrap in anonymous function to use $(function ($) {
$.fn.log = function () { console.log(this); // returning continues the chain
return this; // this is the jQuery collection};
})(jQuery);
-
8/14/2019 The DOM scripting toolkit: jQuery
92/92
More Info
Resources:
jquery.com
docs.jquery.com
groups.google.com/group/jquery-en
ui.jquery.comlearningjquery.com
jqueryfordesigners.com
Remy Sharp:
leftlogic.com
remysharp.com
http://remysharp.com/http://leftlogic.com/mailto:[email protected]?subject=jQueryhttp://remysharp.com/http://remysharp.com/http://remysharp.com/http://leftlogic.com/http://leftlogic.com/mailto:[email protected]?subject=jQuerymailto:[email protected]?subject=jQueryhttp://jqueryfordesigners.com/http://learningjquery.com/http://learningjquery.com/http://ui.jquery.com/http://ui.jquery.com/http://groups.google.com/group/jquery-enhttp://groups.google.com/group/jquery-enhttp://groups.google.com/group/jquery-enhttp://groups.google.com/group/jquery-enhttp://docs.jquery.com/http://docs.jquery.com/http://jquery.com/http://jquery.com/