jQuery
Javascript para quem não sabe Javascript
Nando Vieira
simplesideias.com.br

A função mágica
$(‘<seletor>’) = CSS + Javascript

Seletores
• $(‘#id’)
• $(‘.class’)
• $(‘a[rel=external]’)
• $(‘ul > li:nth(5)’)
• $(‘li:first’, parent)
• ... e mais uma cacetada de seletores!

Modificando elementos
$(‘div’).css(‘width’, ‘100px’)
$(‘div’).addClass(‘hidden’)
$(‘div’).removeClass(‘hidden’)
$(‘img’).attr(‘src’, ‘/some/image’)

Modificando elementos
$(‘div’).html(‘some <strong>html</strong>’)
$(‘div’).append(‘more <strong>html</strong>’)
$(‘div’).prepend(‘even <strong>more</strong>’)
$(‘div’).before(‘<p>one line here...</p>’)
$(‘div’).after(‘<p>... one more line!</p>’)

Eventos
• $(document).ready ou $(callback)
• $(‘element’).click(callback)
• $(‘element’).bind(‘click’, callback)
A maioria dos métodos possui atalho:
click, mouseover, mouseout, blur, focus...

Callback
• function do_something(){}
• var do_something = function(){}
• ... mas já pensou no tanto de funções que
você terá que criar?

Callback
Função anônima é a solução!
$(‘a’).click(function(){
//your code
});

Iterando em elementos
$(‘element’).each(function(index){
//your code
});

Iterando em elementos
Escopo
$(‘a[rel=external]’).each(function(index){
alert(this);
});
O objeto this sempre será o escopo do seletor,
neste caso, a tag <a>.

Iterando em elementos
Escopo
ATENÇÃO: this é Javascript puro!
Use $(this) se precisar de qualquer
funcionalidade do jQuery.

Encadeamento de
chamadas
$(‘div’)
.removeClass(‘hidden’)
.html(‘some markup’)
.fadeIn(‘normal’, function(){
alert(‘done’);
});

Quero ser web 2.0
Requisições HTTP (AJAX???)
Só carregar HTML? Sem problema!
$(‘div#content’).load(‘/some/html/content);

Quero ser web 2.0
Requisições HTTP - GET
$.get(‘/some/url’, function(content){
// do some processing
$(‘div’).html(content);
});

Quero ser web 2.0
Requisições HTTP - POST
$.post(‘/some/url’, function(content){
// do some processing
$(‘div’).html(content);
});

Quero ser web 2.0
Requisições HTTP - JSON
$.getJSON(‘/some/url’, function(data){
// do some processing
alert(data.name);
});

Quero ser web 2.0
Requisições HTTP
Métodos e Retorno de Dados
$.ajax({
‘url’: ‘/some/url’,
‘params’: {arg1: value1, arg2: ‘value2’},
‘dataType’: ‘xml | json | html | jscript’,
‘success’: function(){},
‘type’: ‘[http verbs]’
});

Mais informações
• http://visualjquery.com
• http://docs.jquery.com
• http://simplesideias.com.br/tags/jquery

Dúvidas?