Willian Fernandes
willianfernandes.com.br
   twitter.com/willian
Use Dólar e seja feliz!


               $('#element-id')
               $('.element-class-name')
               $('tag-na...
Escreva menos
Adicione uma classe em mais de um elemento ao mesmo tempo



          // Prototype
          $$('.element')...
Escreva menos
                   Criar uma lista zebrada:
                             row1    row1     row1

            ...
Trabalhando com
     seletores

// Prototype
$('entries').select('div.entry').invoke('hide');



            // jQuery
   ...
Documento carregado?

 // Prototype
 document.observe('contentloaded', function() {});



                       // jQuery...
Iteração de Arrays

// Prototype
[el1, el2].each(function(el, i) { alert(el); });



// jQuery
$([el1, el2]).each(function...
Adicionando elementos
$('ul').html('<li><a href="/contact">Contato</a></li>');

$('ul').append('<li><a href="/logout">Sair...
Manipulando classes

         if ($('ul').is('menu')) {
             $('ul').removeClass('menu');
         } else {
      ...
Efeitos nativos
$('selector').animate({param1: value1, param2: value2}, speed);
$('selector').fadeIn('slow/400/fast'[, fun...
AJAX
$.ajax({
    url: "mydomain.com/url",
    type: "POST",
    dataType: "xml/html/script/json",
    data: $.param( $("E...
AJAX

$.post(
    '/path/to/file.cgi',
    { param1: "value1", param2: "value2" },
    function() {
        //stuff to do ...
AJAX

$.get(
    '/test/ajax-test.xml',
    function(xml) {
        alert(("title",xml).text()); //optional stuff to do af...
AJAX

$.getJSON(
    '/path/to/file.cgi',
    { param1: "value1", param2: "value2" },
    function(json) {
        //stuff...
AJAX

$('selector').load(
    '/path/to/file.htm',
    { param1: "value1", param2: "value2" },
    function(){
        // ...
Criando Plugins
(function($){
    // disable submit buttons after they were clicked
    $.disableSubmit = function(text) {...
Rails



                    Iniciar Teste




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



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



Willian Fernandes | willianfernandes.com.br | twitter.com/willian
Upcoming SlideShare
Loading in …5
×

jQuery

1,267 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,267
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide



















  • jQuery

    1. 1. Willian Fernandes willianfernandes.com.br twitter.com/willian
    2. 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. 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. 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. 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. 6. Documento carregado? // Prototype document.observe('contentloaded', function() {}); // jQuery $(function() {}); Willian Fernandes | willianfernandes.com.br | twitter.com/willian
    7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. Rails Iniciar Teste Willian Fernandes | willianfernandes.com.br | twitter.com/willian
    18. 18. Dúvidas? Willian Fernandes | willianfernandes.com.br | twitter.com/willian
    19. 19. Obrigado! Willian Fernandes | willianfernandes.com.br | twitter.com/willian

    ×