JQuery do dia-a-dia 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; C
}
bogosort(size, array);
} Adaptado de
http://pt.wikipedia.org/wiki/Bogosort#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 de
http://pt.wikipedia.org/wiki/Bogosort#Python

Python

DOM - Data Object Model
Define um padrão para acessar documentos

DOM Core Qualquer documento

DOM XML XML

DOM HTML HTML

Padrão do quê?

OBJETOS MÉTODOS PROPRIEDADES

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

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

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

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

HTML DOM SUCKS!

<input type="text" name="start_date"
onchange="validDate(this);" />

<input type="text" name="end_date"



E se o JavaScript não estiver habilitado?

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

E se for adicionado mais parâmetros?



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!

<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!



Valide em mais de um browser!

Mantenha os scripts o mais seguro
POSSÍVEL

DOM SUCKS
+

DOM SUCKS
+
originaram

jQuery

Attributes
jQuery
Core

Ajax

Manipulation

Attributes
jQuery
Core

Ajax

Manipulation

Attributes
jQuery
Core Effects

Ajax

Manipulation

Attributes
jQuery
Core Effects

Ajax
Traversing

Manipulation

Attributes
jQuery
Core Effects
Selectors

Ajax
Traversing

Manipulation

Attributes
jQuery
Core Effects
Selectors
Events
Ajax
Traversing

Manipulation

Attributes CSS
jQuery
Core Effects
Selectors
Events
Ajax
Traversing

Manipulation

Attributes CSS
jQuery
Core Effects
Selectors
Internals
Events
Ajax
Traversing

Manipulation

Attributes CSS
jQuery
Utilities
Core Effects
Selectors
Internals
Events
Ajax
Traversing

Manipulation

Attributes CSS
jQuery UI
jQuery
Utilities
Core Effects
Selectors
Internals
Events
Ajax
Traversing

Manipulation
Plugins
Attributes CSS
jQuery UI
jQuery
Utilities
Core Effects
Selectors
Internals
Events
Ajax
Traversing

((typeof jQuery) == "function")

((typeof $) == "function")

jQuery === $

Jaspion = $.noConflict()

((typeof $) == "undefined")

jQuery === Jaspion

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

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

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

S $("div")
body
E $("#id")

L $(".class") ul div#id

E $("ul li")

$("ul li:not(li.active)") li div.class
T $("li.active ~ li")
O $("li:contains(Home)") li.active

R $("ul li:first,ul li:last")
E $("div#id > div") li

S

C $("#myId li");
O
var el = $("#myId");
N
$("li", el);
T
E $("li", "#myId");
X
T var el = getElementById("myId");
$("li", el);
O

A
$(...) .addClass("css-class")
T .removeClass("css-class")
R .toggleClass("css-class")
I
B
U
T
O
S

A
.html()
I .html("innerHTML")
B
U
T
O
S

A
.html()
B .text()
U .text("text")

T
O
S

A
.html()
B .text()
U .text("text")
.attr("id")
T .attr("id", "new-id")
O
S

A
.html()
B .text()
U .text("text")
.attr("id")
T .attr("id", "new-id")
O .val()
S .val("input value");

A $(...)
T
R
A
V
E
S
S .children()
A
R

A $(...)
T
R
A
V
E
S .children()
S .eq(0)
A
R

A $(...)
T
R
A
V
E
S .children()
.eq(0)
S .next()
A
R

A $(...)
T
R
A
V
E
S .children()
.eq(0)
S .next() .prev()
A
R

A $(...)
T
R
A
V
E
S .children()
.eq(0)
S .next() .find(...)
A .prev()
R

A $(...)
T
R
A
V
E
S .children()
.eq(0)
S .next() .end()
A .prev()
.find(...)
R

M
A
$(...)
N
I .prepend()
P
U .append()
L
A
R

M
A
N .before()
I
$(...)
P
U .after()
L
A
R

M .wrap(...)
A
$(...)
N
I
P $(...) .clone(...) $(...)
U
L
A .clone() cria elementos
soltos do documento
R

.click(function(event) {
// ...
E });
V .dblclick(function(event) {
// ...
E });
N .blur(function(event) {
T // ...
});
O
.keypress(function(event) {
S // ...
});

E
V .hover(function(event) {
E // mouseenter
N },function(event) {
T // mouseleave
O });
S

.bind('click', function(event) {
// ...
E });
V .trigger('click');
E .triggerHandler('click');
N
T
O
S

.bind('click', function(event) {
// ...
E });
V .trigger('click');
E .triggerHandler('click');
N
T .bind('myEv', function(event) {
// ...
O });
S .trigger('myEv');

.show()
E
F .fadeOut()
E .hide()
I
T .slideDown()
O .fadeIn()
S .slideUp()

La pregunta?

http://GustavoDutra.com
mechamo@gustavodutra.com
@gustavotkg

JQuery do dia-a-dia Gustavo Dutra

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to JQuery do dia-a-dia Gustavo Dutra

Similar to JQuery do dia-a-dia Gustavo Dutra (20)

More from Tchelinux

More from Tchelinux (20)

JQuery do dia-a-dia Gustavo Dutra