who am I? what is jquery? jquerys core philosophy get some - - PowerPoint PPT Presentation

▶
who am i what is jquery jquery s core philosophy get some
SMART_READER_LITE
LIVE PREVIEW

who am I? what is jquery? jquerys core philosophy get some - - PowerPoint PPT Presentation

Dec 26, 2022 281 likes •1.06k views

who am I? what is jquery? jquerys core philosophy get some elements. do some stuff. get some elements. but how? why reinvent the wheel? CSS 3 plus div div:first div:animated div:last div:contains( div#foo txt)

slide-1
SLIDE 1
slide-2
SLIDE 2

who am I?

slide-3
SLIDE 3
slide-4
SLIDE 4

what is jquery?

slide-5
SLIDE 5

jquery’s core philosophy

slide-6
SLIDE 6

get some elements. do some stuff.

slide-7
SLIDE 7

get some elements. but how?

slide-8
SLIDE 8

why reinvent the wheel?

slide-9
SLIDE 9

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-10
SLIDE 10

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-11
SLIDE 11

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-12
SLIDE 12

get some elements.

slide-13
SLIDE 13

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

slide-14
SLIDE 14

do stuff.

slide-15
SLIDE 15

$(“div”)

Returns jquery object

slide-16
SLIDE 16

$(“div”).fadeIn()

Returns jquery object

slide-17
SLIDE 17

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

Returns jquery object

slide-18
SLIDE 18

we call this chaining

slide-19
SLIDE 19

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-20
SLIDE 20

5 parts of jquery

dom events effects ajax plugins

slide-21
SLIDE 21

dom

$(“div”)

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

slide-22
SLIDE 22

dom

$(“div”).next()

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

slide-23
SLIDE 23

dom

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

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

slide-24
SLIDE 24

dom

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

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

slide-25
SLIDE 25

find

dom

slide-26
SLIDE 26

dom

$(“div pre”)

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

slide-27
SLIDE 27

dom

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

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

slide-28
SLIDE 28

filter

$(“div:contains(some text)”) $(“div”).filter( “:contains(some text)”)

dom

slide-29
SLIDE 29

filter

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

dom

slide-30
SLIDE 30

andself()

dom

slide-31
SLIDE 31

dom

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

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

slide-32
SLIDE 32

attributes

$(“div”).attr(“id”) $(“div”).attr(“id”, “hello”)

dom Getter Setter

slide-33
SLIDE 33

attributes

$(“div”).attr(“id”, function() { return this.name }) $(“div”).attr( {id: “foo”, name: “bar”})

dom

slide-34
SLIDE 34
  • ther

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

dom Getter Setter

slide-35
SLIDE 35
  • ther

$(“div”).text() $(“div”).text(“Hello”)

dom Getter Setter

slide-36
SLIDE 36
  • ther

$(“div”).val() $(“div”).val(“Hello”)

dom Getter Setter

slide-37
SLIDE 37

noticing a pattern?

slide-38
SLIDE 38

5 parts of jquery

dom events effects ajax plugins

slide-39
SLIDE 39

bind

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

slide-40
SLIDE 40

“this”

refers to the element bound

slide-41
SLIDE 41

e

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

slide-42
SLIDE 42

corrected event

  • bject

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-43
SLIDE 43

trigger

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

slide-44
SLIDE 44

triggerhandler

doesn’t trigger the browser’s default actions

slide-45
SLIDE 45

custom events

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

slide-46
SLIDE 46

namespaces

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

slide-47
SLIDE 47

5 parts of jquery

dom events effects ajax plugins

slide-48
SLIDE 48

make easy things easy

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

slide-49
SLIDE 49

it’s easy to do it right

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

slide-50
SLIDE 50

it’s consistent

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

slide-51
SLIDE 51

and powerful

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

$.ajax Options

slide-52
SLIDE 52

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-53
SLIDE 53

5 parts of jquery

dom events effects ajax plugins

slide-54
SLIDE 54

metadata

slide-55
SLIDE 55

metadata

<input class="autocomplete" metadata="{ cluster_id: 1, get: '/customers/from_salesforce’ fields: {id: 'details[salesforce_id]'} }" />

slide-56
SLIDE 56

in rails

<%= autocomplete( “Search for Salesforce Customer”, { :cluster_id => @cluster.id, :get => “/customers/from_salesforce”, :fields => {:id => ‘details[salesforce_id]’} } ) %>

slide-57
SLIDE 57

livequery

slide-58
SLIDE 58

replaces each

$("input.autocomplete").each(function() { var match = $(this).metadata().match || "name"; $(this).autocomplete({ ajax: $(this).metadata().get, insertText: function(obj) { return obj[match]; }, match: function(typed) { var regex = new RegExp(typed, “i”); return this[match || "name"] .toString().match(regex); }, template: function(obj) { return "<li>" + obj[match || "name"] + "</li>"; } }) });

metadata

slide-59
SLIDE 59

replaces each

$("input.autocomplete").each(function() { var match = $(this).metadata().match || "name"; $(this).autocomplete({ ajax: $(this).metadata().get, insertText: function(obj) { return obj[match]; }, match: function(typed) { var regex = new RegExp(typed, “i”); return this[match || "name"] .toString().match(regex); }, template: function(obj) { return "<li>" + obj[match || "name"] + "</ li>"; } }) });

metadata

<%= autocomplete( “Search for Salesforce Customer”, { :cluster_id => @cluster.id, :get => “/customers/from_salesforce”, :fields => {:id => ‘details[salesforce_id]’} } ) %>

reminder

slide-60
SLIDE 60

replaces each

$("input.autocomplete").livequery(function() { var match = $(this).metadata().match || "name"; $(this).autocomplete({ ajax: $(this).metadata().get, insertText: function(obj) { return obj[match]; }, match: function(typed) { var regex = new RegExp(typed, “i”); return this[match || "name"] .toString().match(regex); }, template: function(obj) { return "<li>" + obj[match || "name"] + "</li>"; } }) });

catch that?

slide-61
SLIDE 61

replaces bind

$("a.edit_autocomplete").bind("click", function() { $(this).parent().hide() .prev().show() .find("input").focus(); return false; });

slide-62
SLIDE 62

replaces bind

$("a.edit_autocomplete").livequery("click", function() { $(this).parent().hide() .prev().show() .find("input").focus(); return false;

catch that?

slide-63
SLIDE 63

seamless interaction

slide-64
SLIDE 64

ajax

$("input.autocomplete").livequery(function() { $(this).bind("activate.autocomplete", function(e, d) { var data = {}, self = this, meta = $(this).metadata() var self = this; var fields = meta.fields, field = meta.field; if(meta.put) { for(prop in fields) data[fields[prop]] = d[prop]; $.post(meta.put, data, function(json) { $(self).val(""); $(self).parent().hide().after("<h5>" + json[field] + " <a href='#' class='edit_autocomplete'>(Edit)</a></h5>"); }, "json"); } else { for(prop in fields) $(":input[name=\"" + fields[prop] + "\"]").val(d[prop]); } }); });

var self = this;

slide-65
SLIDE 65

ajax

$("input.autocomplete").livequery(function() { $(this).bind("activate.autocomplete", function(e, d) { var data = {}, self = this, meta = $(this).metadata() var self = this; var fields = meta.fields, field = meta.field; if(meta.put) { for(prop in fields) data[fields[prop]] = d[prop]; $.post(meta.put, data, function(json) { $(self).val(""); $(self).parent().hide().after("<h5>" + json[field] + " <a href='#' class='edit_autocomplete'>(Edit)</a></h5>"); }, "json"); } else { for(prop in fields) $(":input[name=\"" + fields[prop] + "\"]").val(d[prop]); } }); });

meta.put

slide-66
SLIDE 66

ajax

$("input.autocomplete").livequery(function() { $(this).bind("activate.autocomplete", function(e, d) { var data = {}, self = this, meta = $(this).metadata() var self = this; var fields = meta.fields, field = meta.field; if(meta.put) { for(prop in fields) data[fields[prop]] = d[prop]; $.post(meta.put, data, function(json) { $(self).val(""); $(self).parent().hide().after("<h5>" + json[field] + " <a href='#' class='edit_autocomplete'>(Edit)</a></h5>"); }, "json"); } else { for(prop in fields) $(":input[name=\"" + fields[prop] + "\"]").val(d[prop]); } }); });

function(json)

slide-67
SLIDE 67

in rails

class CustomersController def update @customer = Customer.find(params[:id]) @customer.update(params[:details]) respond_to do |format| format.html format.json :json => @customer end end end

send JSON

slide-68
SLIDE 68

in merb

class Customers def update(id, details) @customer = Customer.get!(id) @customer.update(details) display @customer end end

send JSON

slide-69
SLIDE 69

ajax

$("input.autocomplete").livequery(function() { $(this).bind("activate.autocomplete", function(e, d) { var data = {}, self = this, meta = $(this).metadata() var self = this; var fields = meta.fields, field = meta.field; if(meta.put) { for(prop in fields) data[fields[prop]] = d[prop]; $.post(meta.put, data, function(json) { $(self).val(""); $(self).parent().hide().after("<h5>" + json[field] + " <a href='#' class='edit_autocomplete'>(Edit)</a></h5>"); }, "json"); } else { for(prop in fields) $(":input[name=\"" + fields[prop] + "\"]").val(d[prop]); } }); });

$.post(meta.put, data, function(json) { $(self).val(""); $(self).parent().hide().after("<h5>" + json[field] + " <a href='#' class='edit_autocomplete'> " + "(Edit)</a></h5>"); }, "json");

receive JSON

slide-70
SLIDE 70

who’s using jquery?

slide-71
SLIDE 71

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-72
SLIDE 72

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-73
SLIDE 73

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-74
SLIDE 74

get a complete list at

http://docs.jquery.com/Sites_Using_jQuery

slide-75
SLIDE 75

this is only the beginning

slide-76
SLIDE 76

thank you.