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?