The DOM Scripting Toolkit: jQuery Remy Sharp Left Logic Why JS - - PowerPoint PPT Presentation

▶
the dom scripting toolkit jquery
SMART_READER_LITE
LIVE PREVIEW

The DOM Scripting Toolkit: jQuery Remy Sharp Left Logic Why JS - - PowerPoint PPT Presentation

Aug 29, 2022 534 likes •1.47k views

The DOM Scripting Toolkit: jQuery Remy Sharp Left Logic Why JS Libraries? DOM scripting made easy Why JS Libraries? DOM scripting made easy Cross browser work done for you Why JS Libraries? DOM scripting made easy Cross

slide-1
SLIDE 1

The DOM Scripting Toolkit: jQuery

Remy Sharp Left Logic

slide-2
SLIDE 2

Why JS Libraries?

  • DOM scripting made easy
slide-3
SLIDE 3

Why JS Libraries?

  • DOM scripting made easy
  • Cross browser work done for you
slide-4
SLIDE 4

Why JS Libraries?

  • DOM scripting made easy
  • Cross browser work done for you
  • Puts some fun back in to coding
slide-5
SLIDE 5

Why jQuery?

  • Lean API, makes your code smaller
slide-6
SLIDE 6

Why jQuery?

  • Lean API, makes your code smaller
  • Small (15k gzip’d), encapsulated, friendly

library - plays well!

slide-7
SLIDE 7

Why jQuery?

  • Lean API, makes your code smaller
  • Small (15k gzip’d), encapsulated, friendly

library - plays well!

  • Plugin API is really simple
slide-8
SLIDE 8

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
slide-9
SLIDE 9

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.

slide-10
SLIDE 10

What’s in jQuery?

  • Selectors & Chaining
  • DOM manipulation
  • Events
  • Ajax
  • Simple effects
slide-11
SLIDE 11

Selectors

$(‘#emails a.subject’);

slide-12
SLIDE 12

Selectors

  • “Find something, do something with it”
slide-13
SLIDE 13

Selectors

  • “Find something, do something with it”
  • The dollar function
slide-14
SLIDE 14

Selectors

  • “Find something, do something with it”
  • The dollar function
  • CSS 1-3 selectors at the core of jQuery
slide-15
SLIDE 15

Selectors

  • “Find something, do something with it”
  • The dollar function
  • CSS 1-3 selectors at the core of jQuery
  • Custom selectors
slide-16
SLIDE 16

CSS Selectors

$(‘div’)

slide-17
SLIDE 17

CSS Selectors

$(‘div’) $(‘div.foo’)

slide-18
SLIDE 18

CSS Selectors

$(‘div’) $(‘div.foo’) $(‘a[type=”application/pdf”]’)

slide-19
SLIDE 19

CSS Selectors

$(‘div’) $(‘div.foo’) $(‘a[type=”application/pdf”]’) $(‘tr td:first-child’)

slide-20
SLIDE 20

Custom Selectors

$(‘div:visible’)

slide-21
SLIDE 21

Custom Selectors

$(‘div:visible’) $(‘:animated’)

slide-22
SLIDE 22

Custom Selectors

$(‘div:visible’) $(‘:animated’) $(‘:input’)

slide-23
SLIDE 23

Custom Selectors

$(‘div:visible’) $(‘:animated’) $(‘:input’) $(‘tr:odd’)

slide-24
SLIDE 24

Selector Performance

$(‘#email’) // same as getElementById

slide-25
SLIDE 25

Selector Performance

$(‘#email’) // same as getElementById $(‘.email’) // slower on a big DOM

slide-26
SLIDE 26

Selector Performance

$(‘#email’) // same as getElementById $(‘.email’) // slower on a big DOM // using context $(‘#emails .subject’) $(‘.subject’, this)

slide-27
SLIDE 27

Selector Performance

$(‘#email’) // same as getElementById $(‘.email’) // slower on a big DOM // using context $(‘#emails .subject’) $(‘.subject’, this) // Caching var subjects = $(‘#emails .subject’);

slide-28
SLIDE 28

Chaining

$(‘#emails .subjects’) .click() .addClass(‘read’);

slide-29
SLIDE 29

Chaining

  • jQuery returns itself *

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

slide-30
SLIDE 30

Chaining

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

manipulating

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

slide-31
SLIDE 31

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

slide-32
SLIDE 32

Chaining in Action

var image = new Image(); $(image) .load(function () { // show new image }) .error(function () { // handle error }) .attr(‘src’, ‘/path/to/large-image.jpg’);

slide-33
SLIDE 33

More Chaining

// simple tabs $(‘a.tab’).click(function () { $(tabs) .hide() .filter(this.hash) .show(); });

slide-34
SLIDE 34

Collections

$(‘#emails .subjects’).each(fn)

slide-35
SLIDE 35

Collections

  • .each(fn)

Iterates through a collection applying the method

slide-36
SLIDE 36

Collections

  • .each(fn)

Iterates through a collection applying the method

  • .map(fn)

Iterates through collection, returning array from fn

slide-37
SLIDE 37

Working the DOM

$(this).addClass(‘read’).next().show();

slide-38
SLIDE 38

DOM Walking

  • Navigation: children,

parent, parents, siblings, next, prev

slide-39
SLIDE 39

DOM Walking

  • Navigation: children,

parent, parents, siblings, next, prev

  • Filters: filter, find, not, eq
slide-40
SLIDE 40

DOM Walking

  • Navigation: children,

parent, parents, siblings, next, prev

  • Filters: filter, find, not, eq
  • Collections: add, end
slide-41
SLIDE 41

DOM Walking

  • Navigation: children,

parent, parents, siblings, next, prev

  • Filters: filter, find, not, eq
  • Collections: add, end
  • Tests: is
slide-42
SLIDE 42

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

slide-43
SLIDE 43

Manipulation

  • Inserting: after, append, before, prepend,

html, text, wrap, clone

slide-44
SLIDE 44

Manipulation

  • Inserting: after, append, before, prepend,

html, text, wrap, clone

  • Clearing: empty, remove, removeAttr
slide-45
SLIDE 45

Manipulation

  • Inserting: after, append, before, prepend,

html, text, wrap, clone

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

toggleClass, css, hide, show, toggle

slide-46
SLIDE 46

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>’) a.css(‘opacity’, 0.6).text(‘My Link’).attr(‘href’, ‘/home/’); $(‘div’).empty().append(a);

slide-47
SLIDE 47

Data

  • Storing data directly

against elements can cause leaks

slide-48
SLIDE 48

Data

  • Storing data directly

against elements can cause leaks

  • .data() clean way of

linking data to element

slide-49
SLIDE 49

Data

  • Storing data directly

against elements can cause leaks

  • .data() clean way of

linking data to element

  • All handled by jQuery’s

garbage collection

slide-50
SLIDE 50

Data

  • Storing data directly

against elements can cause leaks

  • .data() clean way of

linking data to element

  • All handled by jQuery’s

garbage collection

$(this).data(‘type’, ‘forward’); var types = $(‘a.subject’).data(‘type’); $(‘a.subject’).removeData();

slide-51
SLIDE 51

Events

$(‘a.subject’).click();

slide-52
SLIDE 52

DOM Ready

  • Most common event: DOM ready
slide-53
SLIDE 53

DOM Ready

  • Most common event: DOM ready

$(document).ready(function () {}) // or as a shortcut: $(function () {})

slide-54
SLIDE 54

Binding

  • Manages events and garbage collection
slide-55
SLIDE 55

Binding

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

matched selector

slide-56
SLIDE 56

Binding

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

matched selector

  • Also supports .one()
slide-57
SLIDE 57

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

slide-58
SLIDE 58

Helpers

  • Mouse: click, dlbclick, mouseover, toggle,

hover, etc.

slide-59
SLIDE 59

Helpers

  • Mouse: click, dlbclick, mouseover, toggle,

hover, etc.

  • Keyboard: keydown, keyup, keypress
slide-60
SLIDE 60

Helpers

  • Mouse: click, dlbclick, mouseover, toggle,

hover, etc.

  • Keyboard: keydown, keyup, keypress
  • Forms: change, select, submit, focus, blur
slide-61
SLIDE 61

Helpers

  • Mouse: click, dlbclick, mouseover, toggle,

hover, etc.

  • Keyboard: keydown, keyup, keypress
  • Forms: change, select, submit, focus, blur
  • Windows: scroll
slide-62
SLIDE 62

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
slide-63
SLIDE 63

Custom Events

  • Roll your own
slide-64
SLIDE 64

Custom Events

  • Roll your own
  • Bind to element (or elements)
slide-65
SLIDE 65

Custom Events

  • Roll your own
  • Bind to element (or elements)
  • Trigger them later and pass data
slide-66
SLIDE 66

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

slide-67
SLIDE 67

Event Namespaces

  • Support for event

subsets via namespaces

slide-68
SLIDE 68

Event Namespaces

  • Support for event

subsets via namespaces

  • If you don’t want to

unbind all type X events

  • use namespaces
slide-69
SLIDE 69

Event Namespaces

  • Support for event

subsets via namespaces

  • If you don’t want to

unbind all type X events

  • use namespaces

$(‘a’).bind(‘click.foo’, fn); $(‘a’).unbind(‘.foo’);

slide-70
SLIDE 70

Ajax

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

slide-71
SLIDE 71

Ajax Made Easy

  • Cross browser, no hassle.
slide-72
SLIDE 72

Ajax Made Easy

  • Cross browser, no hassle.
  • $.ajax does it all
slide-73
SLIDE 73

Ajax Made Easy

  • Cross browser, no hassle.
  • $.ajax does it all
  • Helpers $.get, $.getJSON, $.getScript,

$.post, $.load

slide-74
SLIDE 74

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

slide-75
SLIDE 75

$.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 });

slide-76
SLIDE 76

Effects

$(this).slideDown();

slide-77
SLIDE 77

Base Effects

$(‘div:hidden’).show(200, fn); $(‘div:visible’).hide(200); $(‘div’).fadeIn(200); $(‘div’).slideDown(100);

slide-78
SLIDE 78

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)

slide-79
SLIDE 79

Utilities

$.browser.version

slide-80
SLIDE 80

Utilities

  • Iterators: each, map, grep
slide-81
SLIDE 81

Utilities

  • Iterators: each, map, grep
  • Browser versions, model and boxModel

support

slide-82
SLIDE 82

Utilities

  • Iterators: each, map, grep
  • Browser versions, model and boxModel

support

  • isFunction
slide-83
SLIDE 83

Core Utilities

  • jQuery can plays with others!
slide-84
SLIDE 84

Core Utilities

  • jQuery can plays with others!

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

slide-85
SLIDE 85

Core Utilities

  • Extend jQuery, merge objects and create

settings from defaults

slide-86
SLIDE 86

Core Utilities

  • Extend jQuery, merge objects and create

settings 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’ }

slide-87
SLIDE 87

Plugins

$(‘#emails .subjects’).doMagic()

slide-88
SLIDE 88

Plugins

  • Simple to write
slide-89
SLIDE 89

Plugins

  • Simple to write
  • Makes your code more reusable
slide-90
SLIDE 90

Plugins

  • Simple to write
  • Makes your code more reusable
  • Don’t break the chain!
slide-91
SLIDE 91

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

slide-92
SLIDE 92

More Info

Resources: jquery.com docs.jquery.com groups.google.com/group/ jquery-en ui.jquery.com learningjquery.com jqueryfordesigners.com Remy Sharp: remy@leftlogic.com leftlogic.com remysharp.com