• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery
 

jQuery

on

  • 1,524 views

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

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

Statistics

Views

Total Views
1,524
Views on SlideShare
1,485
Embed Views
39

Actions

Likes
0
Downloads
23
Comments
0

6 Embeds 39

http://ciberdix.net 25
http://www.linkedin.com 8
http://coderwall.com 3
http://www.lmodules.com 1
http://www.slideshare.net 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

jQuery jQuery Presentation Transcript

  • Willian Fernandes willianfernandes.com.br twitter.com/willian
  • 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
  • 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
  • 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
  • Trabalhando com seletores // Prototype $('entries').select('div.entry').invoke('hide'); // jQuery $('#entries div.entry').hide(); Willian Fernandes | willianfernandes.com.br | twitter.com/willian
  • Documento carregado? // Prototype document.observe('contentloaded', function() {}); // jQuery $(function() {}); Willian Fernandes | willianfernandes.com.br | twitter.com/willian
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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