O que jQuery ?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

John Resig

jQuery sair disso

var tables = document.getElementsByTagName("table");for ( var t = 0; t < tables.length; t++ ) { var rows = tables[t].getElementsByTagName("tr"); for ( var i = 1; i < rows.length; i += 2 ) if ( !/(^|\s)odd(\s|$)/.test( rows[i].className ) ) rows[i].className += " odd";}

Para isso!

$(tr:nth-child(odd)).addClass(odd");

Vantagens do jQuery

$() Acesso direto a qualquer elemento da pgina

$() Uso dos seletores do CSS

$() Facilita a manipulao de contedos

$() Compatvel com todos os navegadores

$() Faz as mesmas coisas com menos cdigo

Estrutura do jQuery

$("conjuntoDeElementosASelecionar)

Item 1

Item 2

1. Item 3
2. Item 4

$(ul li")

Item 1

Item 2

1. Item 3
2. Item 4

Seletor

.acaoAplicadaNoConjuntoSelecionado();

Seletores (css) no jQuery

$(img)

$(#Id)

$(.classe)

$(li a)

$(li:has(a))

$(a:first)

$(p:even)

$(li:fist-child)

Seletores (filtros) personalizados do jQuery

$(:checkbox:checked)

$(:radio:checked)

$(:input:checkbox)

$(:input[name=radioGroup]:checked")

$(:input:not(:checkbox))

Gerenciando o conjunto de elementos selecionados

$().size();

$().get(index);

$().index(elemento);

Retorna: o nmero de elementos no conjunto selecionado

Retorna: um elemento ou um conjunto de elementos

Retorna: o ndice do elemento dentro do conjunto

Gerenciando o conjunto de elementos selecionadoscontinuao...

$().add(selector | element | html | array);

$(img[alt]")

$(li).add(p")

$(p).add("Um elemento span para o conjunto")

.add(img[title]")

.addClass(css1")

.addClass(css2");

Retorna: um conjunto de elementos

Gerenciando o conjunto de elementos selecionadoscontinuao...

$().filter(seletor | function)

item 1 item 2 item 3 item 4 item 5 item 6

item 1 item 3 item 5

$(li).filter(:even")

Retorna: um conjunto de elementos

.addClass(css1");

Gerenciando o conjunto de elementos selecionadoscontinuao...

$().slice(begin,end)

$(li").slice(0,2)

Retorna: um conjunto de elementos

item 1 item 2 item 3 item 4 item 5 item 6

$(l"').slice(2)

item 3 item 4 item 5 item 6

$(li")

item 1 item 2

Gerenciando o conjunto de elementos selecionadoscontinuao...

Ol, como vai voc ?

$("p").find("span").css('color','red');

Retorna: um conjunto de elementos

$().find(seletor);

Ol, como vai voc ?

Gerenciando o conjunto de elementos selecionadoscontinuao...

$("*").is('p');

Retorna: true se pelo menos um elemento coincidir; false se no coincidir

$().is(seletor);

True

False

Texto

$("*").is('li');

Gerenciando o conjunto de elementos selecionadoscontinuao...

$().end();

Retorna: o conjunto anterior

item 1

item 2

item 3

item 1

item 2

item 3

item 1

item 2

item 3

item 1

.find(.bolha")

.addClass(css1")

.end()

.find(.wende")

.addClass(css2");

$(ul.primeira")

item 1

item 2

item 3

item 2

item 1

item 2

item 3

item 1

item 2

item 3

Obrigado!