TechTalk sobre jQuery, mostrando algumas diferenças em relação ao Prototype e o que é possível fazer com esse super framework

1. Willian Fernandes
willianfernandes.com.br
twitter.com/willian

2. Use Dólar e seja feliz!
$('#element-id')
$('.element-class-name')
$('tag-name')
$('any css/xpath syntax')
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

3. Escreva menos
Adicione uma classe em mais de um elemento ao mesmo tempo
// Prototype
$$('.element').each(function(node) {
Element.addClassName(node, 'className');
});
// jQuery
$('.element').addClass('className');
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

4. Escreva menos
Criar uma lista zebrada:
row1 row1 row1
row2 row2 row2
row3 row3 row3
row4 row4 row4
row5 row5 row5
// Prototype
$$("table").each(function(table){
Selector.findChildElements(table, ["tr"])
.findAll(function(row,i){ return i % 2 == 1; })
.invoke("addClassName", "odd");
});
// jQuery
$("table tr:nth-child(odd)").addClass("odd");
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

5. Trabalhando com
seletores
// Prototype
$('entries').select('div.entry').invoke('hide');
// jQuery
$('#entries div.entry').hide();
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

6. Documento carregado?
// Prototype
document.observe('contentloaded', function() {});
// jQuery
$(function() {});
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

7. Iteração de Arrays
// Prototype
[el1, el2].each(function(el, i) { alert(el); });
// jQuery
$([el1, el2]).each(function(i) { alert(this); });
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

8. Adicionando elementos
$('ul').html('<li><a href="/contact">Contato</a></li>');
$('ul').append('<li><a href="/logout">Sair</a></li>');
$('ul').prepend('<li><a href="/">Home</a></li>');
$('ul').before('<h1><a href="/">Home</a></h1>');
$('ul').after('<p>Willian Fernandes</p>');
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

9. Manipulando classes
if ($('ul').is('menu')) {
$('ul').removeClass('menu');
} else {
$('ul').addClass('menu');
}
// ou simplesmente
$('ul').toggleClass('menu');
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

10. Efeitos nativos
$('selector').animate({param1: value1, param2: value2}, speed);
$('selector').fadeIn('slow/400/fast'[, function() {}]);
$('selector').fadeOut('slow/400/fast'[, function() {}]);
$('selector').fadeTo('slow/400/fast', 0.5[, function() {}]);
$('selector').hide('slow/400/fast'[, function() {}]);
$('selector').show('slow/400/fast'[, function() {}]);
$('selector').slideDown('slow/400/fast'[, function() {}]);
$('selector').slideUp('slow/400/fast'[, function() {}]);
$('selector').slideToggle('slow/400/fast');
$('selector').toggle('slow/400/fast');
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

11. AJAX
$.ajax({
url: "mydomain.com/url",
type: "POST",
dataType: "xml/html/script/json",
data: $.param( $("Element or Expression") ),
complete: function() {
//called when complete
},
success: function() {
//called when successful
},
error: function() {
//called when there is an error
}
});
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

12. AJAX
$.post(
'/path/to/file.cgi',
{ param1: "value1", param2: "value2" },
function() {
//stuff to do *after* page is loaded;
}
);
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

13. AJAX
$.get(
'/test/ajax-test.xml',
function(xml) {
alert(("title",xml).text()); //optional stuff to do after get;
}
);
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

14. AJAX
$.getJSON(
'/path/to/file.cgi',
{ param1: "value1", param2: "value2" },
function(json) {
//stuff to do after event occurs;
}
);
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

15. AJAX
$('selector').load(
'/path/to/file.htm',
{ param1: "value1", param2: "value2" },
function(){
// Stuff to do after the page is loaded
}
);
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

16. Criando Plugins
(function($){
// disable submit buttons after they were clicked
$.disableSubmit = function(text) {
$(':submit, input.submit')
.not('.skip')
.each(function() {
if (this.title) {
this.value = this.title;
$(this).removeAttr('title');
}
})
.click(function() {
$(':submit, input.submit').each(function() {
this.disabled = true;
this.value = text || "Please wait...";
});
this.form.submit();
});
};
})(jQuery);
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

17. Rails
Iniciar Teste
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

18. Dúvidas?
Willian Fernandes | willianfernandes.com.br | twitter.com/willian

19. Obrigado!
Willian Fernandes | willianfernandes.com.br | twitter.com/willian