JQuery do dia-a-dia Gustavo Dutra

Introdução

Gustavo Dutra

void bogosort(int size, int *array) { int i, j; for (i = 1; i <= size; i++) if (i == size) return; else if (array[i-1] > array[i]) break; for (i = 0; i < size; i++) { j = rand() % size; if (array[i] != array[j]) { int aux = array[i]; array[i] = array[j]; array[j] = aux; } } bogosort(size, array);} Adaptado de

http://pt.wikipedia.org/wiki/Bogosort#C

C

from random import shuffle

def bogosort(seq): while not all(x<=y for x,y in zip(seq,seq[1:])): shuffle(seq) return seq

Adaptado dehttp://pt.wikipedia.org/wiki/Bogosort#Python

Python

w t f ?

DOM - Data Object Model

Define um padrão para acessar documentos

DOM Core Qualquer documento

DOM XML XML

DOM HTML HTML

Fonte: http://www.w3schools.com/HTMLDOM/dom_intro.asp

OBJETOS MÉTODOS PROPRIEDADES

Padrão do quê?

HTML DOMvar el = document.getElementById("myDiv");el.parentNode.removeChild(el);

HTML DOMvar el = document.getElementById("myDiv");el.parentNode.removeChild(el);

jQuery$("#myDiv").remove();

HTML DOM SUCKS!



E se o JavaScript não estiver habilitado?

E se mudar o nome da função validDate ?

E se for adicionado mais parâmetros?



MANDA O ESTAGIÁRIO!

E se o JavaScript não estiver habilitado?

E se mudar o nome da função validDate ?

E se for adicionado mais parâmetros?

<input type="text" name="start_date" class="date" />

<input type="text" name="end_date" class="date" />

window.onload = function() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { if (inputs.[i].className == 'date') { inputs[i].onchange = function() { validDate(this); } } }}function validDate(element) { //...}

Javascript Não-Obstrusivo


Graceful Degradation Progressive Enhancement


Não suponha, VERIFIQUE!



Valide em mais de um browser!




Mantenha os scripts o mais seguroPOSSÍVEL

Valide em mais de um browser!



DOM SUCKS+


DOM SUCKS+


originaram

jQuery

jQueryCore

jQueryCore

Ajax

jQueryCore

Attributes

Ajax

jQueryCore

Manipulation

Attributes

Ajax

jQueryCore Effects

Manipulation

Attributes

Ajax

jQueryCore

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

Selectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

CSS

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

Internals

CSS

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

Utilities

Internals

CSS

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

jQuery UI

Utilities

Internals

CSS

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

Plugins

jQuery UI

Utilities

Internals

CSS

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

Lets Begin

jQuery === $

((typeof jQuery) == "function")

((typeof $) == "function")

jQuery === Jaspion

Jaspion = $.noConflict()

((typeof $) == "undefined")

window.onload = function() { // ...}

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

$(function() { // ...});

OU

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")

$("ul li:first,ul li:last")

$("ul li:not(li.active)")

$("li:contains(Home)")

$("li.active ~ li")

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

bodySELETORES

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")




$("li.active ~ li")

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

bodySELETORES

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")




$("li.active ~ li")

bodySELETORES

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")




$("li.active ~ li")

bodySELETORES

var el = getElementById("myId");$("li", el);

var el = $("#myId");$("li", el);

$("#myId li");

$("li", "#myId");

CONTEXTO

ATRIBUTOS

$(...)

ATRIBUTOS

$(...) .addClass("css-class").removeClass("css-class").toggleClass("css-class")

ATRIBUTOS

$(...)

.html()

.html("innerHTML")

.addClass("css-class")

.removeClass("css-class")

.toggleClass("css-class")

ATRIBUTOS

$(...)

.text()

.text("text")

.html()

.html("innerHTML")




ATRIBUTOS

$(...)

.attr("id")

.attr("id", "new-id")

.text()

.text("text")

.html()

.html("innerHTML")




ATRIBUTOS

$(...)

.val()

.val("input value");

.attr("id")

.attr("id", "new-id")

.text()

.text("text")

.html()

.html("innerHTML")




$(...)

.children()

ATRAVESSAR

$(...)

.children()

.eq(0)

ATRAVESSAR

$(...)

.children()

.eq(0).next()

ATRAVESSAR

$(...)

.children()

.eq(0)

.next() .prev()

ATRAVESSAR

$(...)

.children()

.eq(0)

.next()

.prev().find(...)

ATRAVESSAR

$(...)

.children()

.eq(0)

.next()

.prev()

.find(...)

.end()

ATRAVESSAR

MANIPULAR

.prepend()

.append()

$(...)

MANIPULAR

.after()

$(...)

.before()

$(...)

MANIPULAR

$(...)

.wrap(...)

$(...)

$(...)$(...) .clone(...) $(...)

.clone() cria elementossoltos do documento

EVENTOS

.click(function(event) { // ...});

.dblclick(function(event) { // ...});

.blur(function(event) { // ...});

.keypress(function(event) { // ...});

EVENTOS

.hover(function(event) { // mouseenter},function(event) { // mouseleave});

EVENTOS

.bind('click', function(event) { // ...});

.trigger('click');

.triggerHandler('click');

EVENTOS

.bind('myEv', function(event) { // ...});

.trigger('myEv');

.bind('click', function(event) { // ...});

.trigger('click');

.triggerHandler('click');

EFEITOS

.show()

.hide()

.fadeIn()

.fadeOut()

.slideDown()

.slideUp()

http://[email protected]

@gustavotkg

La pregunta?

JQuery do dia-a-dia Gustavo Dutra

Documents

Transcript of JQuery do dia-a-dia Gustavo Dutra