apresentação jquery 1
Post on 16-Apr-2017
984 Views
Preview:
TRANSCRIPT
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
- Item 3
- Item 4
$(ul li")
- Item 1
- Item 2
- Item 3
- 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!
top related