the dom scripting toolkit: jquery

8/14/2019 The DOM scripting toolkit: jQuery

1/92

The DOM Scripting Toolkit:

jQueryRemy SharpLeft Logic


2/92

Why JS Libraries?

DOM scripting made easy


3/92

Why JS Libraries?

DOM scripting made easy Cross browser work done for you


4/92

Why JS Libraries?

DOM scripting made easy Cross browser work done for you

Puts some fun back in to coding


5/92

Why jQuery?

Lean API, makes your code smaller


6/92

Why jQuery?


Small (15k gzipd), encapsulated, friendly

library - plays well!


7/92

Why jQuery?




Plugin API is reallysimple


8/92

Why jQuery?





Large, active community


9/92

Why jQuery?





Large, active community

Big boys use it too: Google, BBC, Digg,Wordpress, Amazon, IBM.


10/92

Whats in jQuery?

Selectors & Chaining

DOM manipulation Events

Ajax

Simple effects


11/92

Selectors$(#emails a.subject);


12/92

Selectors

Find something, do something with it


13/92

Selectors


The dollar function


14/92

Selectors


The dollar function CSS 1-3 selectors at the core of jQuery


15/92

Selectors


The dollar function CSS 1-3 selectors at the core of jQuery

Custom selectors


16/92

CSS Selectors

$(div)


17/92

CSS Selectors

$(div)

$(div.foo)


18/92

CSS Selectors

$(div)

$(div.foo)

$(a[type=application/pdf])


19/92

CSS Selectors

$(div)

$(div.foo)

$(a[type=application/pdf])

$(tr td:first-child)


20/92

Custom Selectors

$(div:visible)


21/92

Custom Selectors

$(div:visible)

$(:animated)


22/92

Custom Selectors

$(div:visible)

$(:animated)

$(:input)


23/92

Custom Selectors

$(div:visible)

$(:animated)

$(:input)

$(tr:odd)


24/92

Selector Performance

$(#email) // same as getElementById


25/92



$(.email) // slower on a big DOM


26/92




// using context$(#emails .subject)$(.subject, this)


27/92




// using context$(#emails .subject)$(.subject, this)

// Cachingvar subjects = $(#emails .subject);


28/92

Chaining$(#emails .subjects)

.click()

.addClass(read);


29/92

Chaining

jQuery returns itself *

* except when requesting string values, such as .css() or .val()


30/92

Chaining

jQuery returns itself * We can use the selector once, and keepmanipulating



31/92

Chaining

jQuery returns itself * We can use the selector once, and keepmanipulating

Can reduce size of our code



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);


33/92

More Chaining

// simple tabs

$(a.tab).click(function () {$(tabs).hide().filter(this.hash)

.show();});


34/92

Collections$(#emails .subjects).each(fn)


35/92

Collections

.each(fn)Iterates through a collection applying themethod


36/92

Collections

.each(fn)Iterates through a collection applying themethod

.map(fn)Iterates through collection, returning arrayfrom fn


37/92

Working the DOM$(this).addClass(read).next().show();


38/92

DOM Walking

Navigation: children,parent, parents, siblings,next, prev


39/92

DOM Walking

Navigation: children,parent, parents, siblings,

next, prev

Filters: filter, find, not, eq


40/92

DOM Walking


next, prev


Collections: add, end


41/92

DOM Walking


next, prev


Collections: add, end Tests: is


42/92

DOM Walking


next, prev


Collections: add, end Tests: is

$(div).find(a.subject)

.click(fn).end() // strip filter.eq(0) // like :first.addClass(highlight);


43/92

Manipulation

Inserting: after, append, before, prepend,html, text, wrap, clone


44/92

Manipulation


Clearing: empty, remove, removeAttr


45/92

Manipulation


Clearing: empty, remove, removeAttr Style: attr, addClass, removeClass,

toggleClass, css, hide, show, toggle


46/92

Manipulation


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);


47/92

Data

Storing data directlyagainst elements can

cause leaks


48/92

Data


cause leaks

.data() clean way oflinking data to element


49/92

Data


cause leaks


All handled by jQuerysgarbage collection


50/92

Data


cause leaks


All handled by jQuerysgarbage collection

$(this).data(type, forward);

var types =$(a.subject).data(type);

$(a.subject).removeData();


51/92

Events$(a.subject).click();

DOM R d


52/92

DOM Ready

Most common event: DOM ready

DOM R d


53/92

DOM Ready

Most common event: DOM ready

$(document).ready(function () {})

// or as a shortcut:

$(function () {})


54/92

Binding

Manages events and garbage collection


55/92

Binding

Manages events and garbage collection Event functions are bound to the elements

matched selector


56/92

Binding


matched selector

Also supports .one()


57/92

Binding


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);


58/92

Helpers

Mouse: click, dlbclick, mouseover, toggle,hover, etc.


59/92

Helpers


Keyboard: keydown, keyup, keypress


60/92

Helpers


Keyboard: keydown, keyup, keypress Forms: change, select, submit, focus, blur


61/92

Helpers



Windows: scroll


62/92

Helpers



Windows: scroll Windows, images, scripts: load, error


63/92

Custom Events

Roll your own


64/92

Custom Events

Roll your own

Bind to element (or elements)


65/92

Custom Events

Roll your own

Bind to element (or elements) Trigger them later and pass data


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) {})


67/92

Event Namespaces

Support for eventsubsets via namespaces


68/92

Event Namespaces


If you dont want tounbind all type X events

- use namespaces


69/92

Event Namespaces


If you dont want tounbind all type X events

- use namespaces

$(a).bind(click.foo, fn);

$(a).unbind(.foo);


70/92

Ajax$.ajax({ url : /foo, success : bar });


71/92

Ajax Made Easy

Cross browser, no hassle.


72/92

Ajax Made Easy


$.ajax does it all


73/92

Ajax Made Easy


$.ajax does it all Helpers $.get, $.getJSON, $.getScript,$.post, $.load


74/92

Ajax Made Easy


$.ajax does it all Helpers $.get, $.getJSON, $.getScript,$.post, $.load

All Ajax requests sends:X-Requested-With = XMLHttpRequest


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

});


76/92

Effects$(this).slideDown();


77/92

Base Effects

$(div:hidden).show(200, fn);$(div:visible).hide(200);

$(div).fadeIn(200);$(div).slideDown(100);


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)


79/92

Utilities$.browser.version


80/92

Utilities

Iterators: each, map, grep


81/92


82/92

Utilities

Iterators: each, map, grep Browser versions, model and boxModelsupport

isFunction


83/92

Core Utilities

jQuery can plays with others!


84/92

Core Utilities

jQuery can plays with others!

$j = $.noConflict();$j === $ // false


85/92

Core Utilities

Extend jQuery, merge objects and createsettings from defaults


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 }


87/92

Plugins$(#emails .subjects).doMagic()


88/92

Plugins

Simple to write


89/92

Plugins

Simple to write Makes your code more reusable


90/92

Plugins

Simple to write Makes your code more reusable Dont break the chain!


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);


92/92

More Info

Resources:

jquery.com

docs.jquery.com

groups.google.com/group/jquery-en

ui.jquery.comlearningjquery.com

jqueryfordesigners.com

Remy Sharp:

[email protected]

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/

the dom scripting toolkit: jquery

Documents