jQuery - Visão Geral

Visão Geral
Kaio Valente
Cobra Tecnologia

Vantagens
• Acesso direto a qualquer componente do DOM

• Simplicidade, poucas linhas de código

• Cross-browser

• Efeitos e animações

• Ajax

Vantagens
• Mais fácil escrever jQuery do que em JavaScript puro.

Esconder todas as divs com JavaScript puro:

divs = document.getElementByTagName('div');

for (i=0; i<divs.length; i++) {
div[i].style.display = 'none';
}

Esconder todas as divs com jQuery:

$("div").hide();

Filosofia jQuery

#1. Procurar algum elemento HTML

#2. Fazer algo com ele

Filosofia jQuery

Procurar Ação
$(“div”) .hide();

Seletores

$("#foo") $("li:first")
$(".foo")
$("tr:odd")
$(“table")
$("a[target=_blank]")

$("form[id^=step]")

Seletores
$('input:disabled');
$('div:empty');
$('input:checked');
$('option:selected');
$('option:even');
$(„tr[class=word]');
$('li:last');

Criando Funções
<script type="text/javascript"
src=“/projeto/js/jquery-1.7.2.min.js">
</script>

$(document).ready(function(){
console.log(“Pronto!");
});

$(function(){
});

jQuery(function(){
});

Métodos jQuery
• Elementos de Movimentação:
append(), before(), after()

• Atributos:
css(), attr(), html(), val(), addClass()

• Eventos:
bind(), trigger(), unbind(), live(), click()

• Efeitos:
show(), fafeOut(), toggle(), animate()

• Elementos de busca:
find(), is(), prevAll(), next(), hasClass()

• Ajax
get(), getJSON(), post(), ajax(), load()

Métodos jQuery

Chain Methods
$("div").addClass(".foo").fadeIn();

Movimentação
Inserir um conteúdo HTML na div foo
$(“#foo”).append("<p>teste</p>");

<html>
<body>
<div>jQuery</div>
<div id="foo">exemplo<p>teste</p></div>
id="foo">exemplo</div>
</body>
</html>

Atributos
Get Set
.attr('id') .attr(„id‟,‟foo‟)

.html() .html(„<p>Cobra</p>‟)

.val() .val(„valor‟)

.css(„top‟) .css(„top‟,‟80px‟)

.width() .width(60)

Atributos
Setando várias propriedades css
$('#foo').css({
"background": "yellow",
"height": "400px"
});

Alterando links
$('a').attr('href','http://google.com.br');

Marcando todos os checkbox
$(':checkbox').attr('checked', 'checked');

Eventos
Quando um botão for clicado, faça alguma coisa...
$('button').click(function(){
alert('onclick');
});

Criando um evento customizado...
$('button').bind('expandir',function(){
alert('expandir');
});
$('button:first').trigger('expandir');

Desfazendo evento customizado...
$('button').unbind('expandir');

Eventos

Criando elementos em tempo de execução...
$('button').live('click',function(){
alert(„click');
});

Efeitos
Tipos de Efeito

#1. Hide e Show

#2. FadeIn e FadeOut

#3. SlideUp e SlideDown

Efeitos
SlideUp/SlideDown a cada click na div foo
$('#foo').click(function(){
$(this).slideToggle();
});

Aumenta largura da div foo para 300px em 5 segundos
$('#foo').animate({'width':'300px'},500);

Diminui 30% da opacidade em 2 segundos ao perder o foco
$('#foo').fadeTo(200,0.3);

Busca
Pegar todas as colunas da tabela anteriores a #minhaColuna

$('#minhaColuna').prevAll() .andSelf();

<html>
<body>
<table><tr>
<td></td>
<td></td>
<td id="minhaColuna"></td>
</tr></table>
</body>
</html>

Busca
Pegar o parágrafo da div...

$(„table').next().find(„p‟);

<html>
<body>
<table></table>
<div>
<div>
<p>foo</p>
<p>foo</p>
<span>teste</span>
<span>teste</span>
</div>
</div>

</body>
</html>

Ajax
Requisição ajax usando get
$('button#Buscar').get('/projetos/buscar',
{'id':'1','nome':'catuai'});

Requisição ajax usando post e exibindo a resposta
$('button#Salvar').post('/projetos/salvar',{'id':'1',},
function(response){
alert(response);
});

Carregar resposta em uma div
function carregar(elemento,url) {
$('#'+elemento).load(url);
}

Plugins
Plugins Famosos
• jQuery UI
• jQuery Form
• jQuery Validate
• jQuery Tipsy
• jQuery jCarousel
• jQuery maskFinancial
• http://plugins.jquery.com

Concluindo...

http://www.google.com/trends/?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype+
javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1

Concluindo...

• Produtividade

• Comunidade forte

• Muito material, livros, internet

• Licença aberta e free

Concluindo...
• Forum oficial:
http://forum.jquery.com/

• Comunidade brasileira:
jquery-br@googlegroups.com

• jQuery API:
http://api.jquery.com/

Referência

jQuery Essentials by Marc Grabanski

http://www.slideshare.net/1Marc/jquery-essentials

jQuery - Visão Geral

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie jQuery - Visão Geral

Ähnlich wie jQuery - Visão Geral (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (6)

jQuery - Visão Geral