jQueryJavascript para quem não sabe Javascript
Nando Vieirasimplesideias.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
$(‘a’).click(function(){
//your code
});
Função anônima é a solução!
Iterando em elementos
$(‘element’).each(function(index){
//your code
});
Iterando em elementos
$(‘a[rel=external]’).each(function(index){
alert(this);
});
O objeto this sempre será o escopo do seletor,neste caso, a tag <a>.
Escopo
Iterando em elementos
ATENÇÃO: this é Javascript puro!
Use $(this) se precisar de qualquer funcionalidade do jQuery.
Escopo
Encadeamento de chamadas
$(‘div’)
.removeClass(‘hidden’)
.html(‘some markup’)
.fadeIn(‘normal’, function(){
alert(‘done’);
});
Quero ser web 2.0
Só carregar HTML? Sem problema!
$(‘div#content’).load(‘/some/html/content);
Requisições HTTP (AJAX???)
Quero ser web 2.0
$.get(‘/some/url’, function(content){
// do some processing
$(‘div’).html(content);
});
Requisições HTTP - GET
Quero ser web 2.0
$.post(‘/some/url’, function(content){
// do some processing
$(‘div’).html(content);
});
Requisições HTTP - POST
Quero ser web 2.0
$.getJSON(‘/some/url’, function(data){
// do some processing
alert(data.name);
});
Requisições HTTP - JSON
Quero ser web 2.0
$.ajax({
‘url’: ‘/some/url’,
‘params’: {arg1: value1, arg2: ‘value2’},
‘dataType’: ‘xml | json | html | jscript’,
‘success’: function(){},
‘type’: ‘[http verbs]’
});
Requisições HTTPMétodos e Retorno de Dados
Mais informações
• http://visualjquery.com
• http://docs.jquery.com
• http://simplesideias.com.br/tags/jquery
Dúvidas?