write less. do more. who am I? DataMapper what is jquery? - - PowerPoint PPT Presentation

▶
write less do more who am i datamapper what is jquery
SMART_READER_LITE
LIVE PREVIEW

write less. do more. who am I? DataMapper what is jquery? - - PowerPoint PPT Presentation

Jan 13, 2024 636 likes •2.58k views

write less. do more. who am I? DataMapper what is jquery? unobtrusive h1 { color: #999; } css h1 { color: #999; } h1 { color: #999; } UJS With jQuery $(h1).click(function() { $(this).fadeIn(); }); Why do we like CSS?

slide-1
SLIDE 1
slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4

write less. do more.

slide-5
SLIDE 5
slide-6
SLIDE 6

who am I?

slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10

DataMapper

slide-11
SLIDE 11
slide-12
SLIDE 12

what is jquery?

slide-13
SLIDE 13
slide-14
SLIDE 14

unobtrusive

slide-15
SLIDE 15
slide-16
SLIDE 16

css

h1 { color: #999; }

slide-17
SLIDE 17

h1 { color: #999; }

slide-18
SLIDE 18

UJS With jQuery

h1 { color: #999; }

$(“h1”).click(function() { $(this).fadeIn(); });

slide-19
SLIDE 19
slide-20
SLIDE 20

Why do we like CSS?

slide-21
SLIDE 21
slide-22
SLIDE 22

reusable styles

slide-23
SLIDE 23
slide-24
SLIDE 24

change-once, change-everwhere

slide-25
SLIDE 25
slide-26
SLIDE 26

We got over <font>

slide-27
SLIDE 27
slide-28
SLIDE 28

why should you like UJS?

slide-29
SLIDE 29
slide-30
SLIDE 30

same reasons

slide-31
SLIDE 31
slide-32
SLIDE 32

application-wide behavior

slide-33
SLIDE 33
slide-34
SLIDE 34

change-once, change everywhere

slide-35
SLIDE 35
slide-36
SLIDE 36

we’re over onclick=

slide-37
SLIDE 37
slide-38
SLIDE 38

in short...

if you like CSS, YOU’ll like UJS

slide-39
SLIDE 39
slide-40
SLIDE 40

javascript can be fun!

slide-41
SLIDE 41
slide-42
SLIDE 42

jquery’s core philosophy

slide-43
SLIDE 43
slide-44
SLIDE 44

get some elements. do some stuff.

slide-45
SLIDE 45
slide-46
SLIDE 46

some people* call it DOM-SCRIPTING.

* Jeremy keith

slide-47
SLIDE 47

some people* call it DOM-SCRIPTING.

* Jeremy keith

slide-48
SLIDE 48

some people* call it DOM-SCRIPTING. call it DOM-SCRIPTING.

in his book: dom-scripting * Jeremy keith

slide-49
SLIDE 49
slide-50
SLIDE 50

get some elements. but how?

slide-51
SLIDE 51
slide-52
SLIDE 52

did i mention CSS?

slide-53
SLIDE 53

CSS 3 plus

slide-54
SLIDE 54

CSS 3 plus

  • div
  • div#foo
  • div.class
  • div, p, a
  • div p
  • div > p
  • div + p
  • div ~ p
  • div:first
  • div:last
  • div:not(#foo)
  • div:even
  • div:odd
  • div:eq(1)
  • div:gt(1)
  • div:lt(1)
  • div:header
  • div:animated
  • div:contains(txt)
  • div:empty
  • div:has(p)
  • div:parent
  • div:hidden
  • div:visible
slide-55
SLIDE 55

CSS 3 plus

slide-56
SLIDE 56

CSS 3 plus

slide-57
SLIDE 57

CSS 3 plus

  • div[foo]
  • div[foo=bar]
  • div[foo!=bar]
  • div[foo^=bar]
  • div[foo$=bar]
  • div[foo*=bar]
  • :nth-child(2)
  • :nth-child(even)
  • :first-child
  • :last-child
  • :only-child
  • :input
  • :text
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file
  • :hidden
  • :enabled
  • :disabled
  • :checked
  • :selected
slide-58
SLIDE 58

CSS 3 plus

slide-59
SLIDE 59
slide-60
SLIDE 60

get some elements.

slide-61
SLIDE 61
slide-62
SLIDE 62

$(“table tr:nth- child(even) > td:visible”)

slide-63
SLIDE 63
slide-64
SLIDE 64

do stuff.

slide-65
SLIDE 65
slide-66
SLIDE 66

$(“div”)

Returns jquery object

slide-67
SLIDE 67
slide-68
SLIDE 68

$(“div”).fadeIn()

Returns jquery object

slide-69
SLIDE 69
slide-70
SLIDE 70

$(“div”).fadeIn() .css(“color”, “green”)

Returns jquery object

slide-71
SLIDE 71
slide-72
SLIDE 72

we call this chaining

slide-73
SLIDE 73

Crazy chains

slide-74
SLIDE 74

Crazy chains

$(“ul.open”) // [ ul, ul, ul ] .children(“li”) // [ li, li, li ] .addClass(“open”) // [ li, li, li] .end() // [ ul, ul, ul ] .find(“a”) // [ a, a, a ] .click(function(){ $(this).next().toggle(); return false; }) // [ a, a, a ] .end(); // [ ul, ul, ul ]

slide-75
SLIDE 75
slide-76
SLIDE 76
slide-77
SLIDE 77

5 parts of jquery

dom events effects ajax plugins

slide-78
SLIDE 78

dom

slide-79
SLIDE 79

dom traversal

$(“div”).parent(); $(“div”).siblings(); $(“div”).next(); $(“div”).nextAll(“p”); $(“div”).nextAll(“p:first”);

dom

slide-80
SLIDE 80

dom

slide-81
SLIDE 81

dom

$(“div”)

<body> <div> <p> <p> <p> <div> <pre> <p> <p> <p>

slide-82
SLIDE 82

dom

slide-83
SLIDE 83

dom

$(“div#foo”).siblings()

<body> <div id='foo'> <p> <p> <p> <div> <pre> <p> <p> <p>

slide-84
SLIDE 84

dom

slide-85
SLIDE 85

dom

$(“div”).next()

<body> <div> <p> <p> <p> <div> <pre> <p> <p> <p>

slide-86
SLIDE 86

dom

slide-87
SLIDE 87

dom

$(“div”).nextall(“p”)

<body> <div id='foo'> <p> <p> <pre> <p>

slide-88
SLIDE 88

dom

slide-89
SLIDE 89

dom

$(“div”).nextall(“p:first”)

<body> <div id='foo'> <p> <p> <pre> <p>

slide-90
SLIDE 90

dom

slide-91
SLIDE 91

find

$(“div pre”) $(“div”).find(“pre”)

dom

slide-92
SLIDE 92

dom

slide-93
SLIDE 93

dom

$(“div pre”)

<body> <div> <p> <pre> <pre> <div> <pre> <p> <pre> <p>

slide-94
SLIDE 94

dom

slide-95
SLIDE 95

dom

$(“div”).find(“pre”)

<body> <div> <p> <pre> <pre> <div> <pre> <p> <pre> <p>

slide-96
SLIDE 96

dom

slide-97
SLIDE 97

filter

$(“div:contains(some text)”) $(“div”).filter(“:contains(some text)”) $(“div”).filter(function() { return $(this).text().match(“some text”) })

dom

slide-98
SLIDE 98

dom

slide-99
SLIDE 99

andself()

$(“div”).siblings().andSelf() $(“div”).parent().andSelf()

dom

slide-100
SLIDE 100

dom

slide-101
SLIDE 101

dom

$(“div”).siblings().andself()

<body> <div id='foo'> <p> <p> <p> <div> <pre> <p> <p> <p>

slide-102
SLIDE 102

dom

<body> <div id='foo'> <p> <p> <p> <div> <pre> <p> <p> <p>

slide-103
SLIDE 103

dom

$(“p”).parent().andself()

<body> <div id='foo'> <p> <p> <p> <div> <pre> <p> <p> <p>

slide-104
SLIDE 104

DOM

slide-105
SLIDE 105

DOM

end()

$(“div”)

slide-106
SLIDE 106

DOM

end()

$(“div”).find(“p”)

slide-107
SLIDE 107

DOM

end()

$(“div”).find(“p”).end()

slide-108
SLIDE 108

DOM

end()

$(“div”).find(“p”).end().appendTo(“pre”)

slide-109
SLIDE 109

dom

slide-110
SLIDE 110

attributes

$(“div”).attr(“id”) // returns id $(“div”).attr(“id”, “hello”) // sets id to hello $(“div”).attr(“id”, function() { return this.name }) $(“div”).attr({id: “foo”, name: “bar”}) $(“div”).removeAttr(“id”);

dom

slide-111
SLIDE 111

dom

slide-112
SLIDE 112

classes

$(“div”).addClass(“foo”) $(“div”).removeClass(“foo”) $(“div”).toggleClass(“foo”) $(“div”).hasClass(“foo”)

dom

slide-113
SLIDE 113

dom

slide-114
SLIDE 114
  • ther

$(“div”).html() $(“div”).html(“<p>Hello</p>”) $(“div”).text() $(“div”).text(“Hello”) $(“div”).val() $(“div”).val(“Hello”)

dom

slide-115
SLIDE 115
slide-116
SLIDE 116

noticing a pattern?

slide-117
SLIDE 117

dom

slide-118
SLIDE 118

manipulation

$(“div”).append(“<p>Hello</p>”) $(“<p>Hello</p>”).appendTo(“div”) $(“div”).after(“<p>Hello</p>”) $(“<p>Hello</p>”).insertAfter(“div”)

dom

slide-119
SLIDE 119

dom

slide-120
SLIDE 120

way more...

http://docs.jquery.com

dom

slide-121
SLIDE 121

5 parts of jquery

dom events effects ajax plugins

slide-122
SLIDE 122

5 parts of jquery

dom events effects ajax plugins

slide-123
SLIDE 123
slide-124
SLIDE 124

document ready

slide-125
SLIDE 125

document ready

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

slide-126
SLIDE 126
slide-127
SLIDE 127

bind

$(“div”).bind(“click”, function() { ... }) Alias: $(“div”).click(function() { ... })

slide-128
SLIDE 128
slide-129
SLIDE 129

“this”

refers to the element bound

slide-130
SLIDE 130
slide-131
SLIDE 131

e

$(“div”).click(function(e) { ... })

slide-132
SLIDE 132
slide-133
SLIDE 133

corrected event object

Property Correction

target The element that triggered the event (event delegation) relatedTarget The element that the mouse is moving in (or out) of pageX/Y The mouse cursor relative to the document which mouse: 1 (left) 2 (middle) 3 (right) keypress: The ASCII value of the text input metaKey Control on Windows and Apple on OSX

slide-134
SLIDE 134
slide-135
SLIDE 135

trigger

$(“div”).trigger(“click”) Alias: $(“div”).click()

slide-136
SLIDE 136
slide-137
SLIDE 137

triggerhandler

doesn’t trigger the browser’s default actions

slide-138
SLIDE 138
slide-139
SLIDE 139

custom events

$(“div”).bind(“myEvent”, function() { ... }) $(“div”).trigger(“myEvent”)

slide-140
SLIDE 140
slide-141
SLIDE 141

hover

$(“div”).hover(function() { ... }, function() { ... })

slide-142
SLIDE 142
slide-143
SLIDE 143

toggle

$(“div”).toggle(function() { ... }, function() { ... })

slide-144
SLIDE 144

5 parts of jquery

dom events effects ajax plugins

slide-145
SLIDE 145

5 parts of jquery

dom events effects ajax plugins

slide-146
SLIDE 146
slide-147
SLIDE 147

Fades

$(“div”).fadeIn() $(“div”).fadeOut(“slow”)

slide-148
SLIDE 148
slide-149
SLIDE 149

slides

$(“div”).slideUp(200) $(“div”).slideDown(“slow”)

slide-150
SLIDE 150
slide-151
SLIDE 151

animate

$(“div”).animate({height: “toggle”, opacity: “toggle”}) $(“div”).animate({fontSize: “24px”, opacity: 0.5}, {easing: “expo”})

slide-152
SLIDE 152

5 parts of jquery

dom events effects ajax plugins

slide-153
SLIDE 153

5 parts of jquery

dom events effects ajax plugins

slide-154
SLIDE 154
slide-155
SLIDE 155

make easy things easy

$(“div”).load(“some_url”); $(“div”).load(“some_url”, {data: “foo”}, function(text) { ... });

slide-156
SLIDE 156
slide-157
SLIDE 157

it’s easy to do it right

$.getJSON(“some_url”, function(json) { ... }) $.getJSON(“some_url”, {data: “foo”}, function(json) { ... })

slide-158
SLIDE 158
slide-159
SLIDE 159

it’s consistent

$.get(“some_url”, function(text) { ... }) $.post(“some_url”, {data: “foo”}, function(text) { ... })

slide-160
SLIDE 160
slide-161
SLIDE 161

and powerful

  • async
  • beforeSend
  • cache
  • complete
  • contentType
  • data
  • dataType
  • error
  • global
  • ifModified
  • jsonp
  • processData
  • success
  • timeout
  • type

$.ajax Options

slide-162
SLIDE 162

and powerful

slide-163
SLIDE 163

and powerful

/* No Ajax requests exist, and one starts */ $(“div.progress”).ajaxStart(function() { $(this).show() }); /* The last Ajax request stops */ $(“div.progress”).ajaxStop(function() { $(this).hide() }); /* Any Ajax request is sent */ $(“p”).ajaxSend(function() { ... }); /* Any Ajax request completes (success or failure) */ $(“div”).ajaxComplete(function() { ... }); /* Any Ajax request errors out */ $(“div”).ajaxError(function() { ... }); /* Any Ajax request succeeds */ $(“div”).ajaxSucccess(function() { ... });

global ajax settings

slide-164
SLIDE 164

5 parts of jquery

dom events effects ajax plugins

slide-165
SLIDE 165

5 parts of jquery

dom events effects ajax plugins

slide-166
SLIDE 166
slide-167
SLIDE 167

there are hundreds

slide-168
SLIDE 168
slide-169
SLIDE 169

which are important?

slide-170
SLIDE 170
slide-171
SLIDE 171

jquery ui

  • Draggables
  • Droppables
  • Sortables
  • Selectables
  • Resizables
  • Accordion
  • Date Picker
  • Dialog
  • Slider
  • Tabs

Widgets Primitives http://ui.jquery.com

slide-172
SLIDE 172
slide-173
SLIDE 173

jquery enchant

improvements to our core animation

http://ui.jquery.com/enchant

BETA

slide-174
SLIDE 174
slide-175
SLIDE 175

jquery forms

ajaxify a form in one easy step: $(“form.remote”).ajaxForm()

http://www.malsup.com/jquery/form/

slide-176
SLIDE 176
slide-177
SLIDE 177

form validation

specify validation rules in your markup

http://bassistance.de/jquery- plugins/jquery-plugin-validation/

slide-178
SLIDE 178
slide-179
SLIDE 179

metadata plugin

specify metadata for elements in markup <div data=”{some: ‘data’}”> $(“div”).metadata().some // returns ‘data’

http://jqueryjs.googlecode.com/svn/ trunk/plugins/metadata/

BASE

slide-180
SLIDE 180
slide-181
SLIDE 181

who’s using jquery?

slide-182
SLIDE 182
slide-183
SLIDE 183

who, you ask?

  • Google
  • Dell
  • NBC
  • CBS
  • MSNBC
  • Bank of America
  • BBC
  • Reuters
  • Digg
  • Business Week
  • Newsweek
  • Amazon
  • Intel
  • Oracle
  • Cisco
  • Slashdot
  • Technorati
  • Sourceforge
slide-184
SLIDE 184
slide-185
SLIDE 185

not enough?

  • Intuit
  • American Eagle
  • Salesforce
  • Newsgator
  • Boston Globe
  • New York Post
  • Miami Herald
  • The Food Network
  • The Onion
  • Feedburner
  • WB Records
  • Def Jam Records
  • AOL
  • Classmates.com
  • Fandango
  • Pandora
  • Vodafone
  • Ars Technica
slide-186
SLIDE 186
slide-187
SLIDE 187

you say you want more?

  • Linux.com
  • Super Smash Bros.
  • Barack Obama
  • Joost
  • iFilm.com
  • Mozilla
  • Wordpress
  • PEAR
  • Trac
  • Zend
  • Hackety Hack
  • Joomla
  • Age of Empires 3
  • myYearbook.com
  • REI
  • Poker Room
  • isoHunt
  • Ask a Ninja
slide-188
SLIDE 188
slide-189
SLIDE 189

get a complete list at

http://docs.jquery.com/Sites_Using_jQuery

slide-190
SLIDE 190
slide-191
SLIDE 191

this is only the beginning

slide-192
SLIDE 192
slide-193
SLIDE 193

thank you.