Olá galera.
No dia 13/10 foi lançado o Beta 2 da versão 1.7 do jQuery que incorpora alguns bugfix e ganha um aumento de estabilidade.
Você já pode baixar da CDN.
http://code.jquery.com/jquery-1.7b2.js
Todas as mudanças podem ser vistas no Change Log do blog oficial.
E isso ai, só baixar, subir para seus projetos e sair testando, não preciso repetir que qualquer bug encontrado será bem visto no bugtraker =D.
jQuery 1.7Olá pessoas,
Se você não estava sabendo, a jQuery Conference 2011 irá acontecer em Boston no final desta semana. Assim como marcado antes, foi lançado hoje a versão 1.7 beta 1 do jQuery com alguns novos recursos, além da correção de vários bugs, como mencionaram no post oficial, que chega a mais de 50.
Você pode baixar a versão no CDN do jQuery:
http://code.jquery.com/jquery-1.7b1.js
Mais uma vez o team pede a colaboração para reportar qualquer bug que aconteça, tanto nas novas implementações como o não-funcionamento de algo antigo. Iremos explorar os novos recursos para adquirir mais prática nas novas implementações.
Vamos às mudanças…
Ao longo do tempo, o jQuery evoluiu três maneiras para anexar eventos aos elementos do DOM. São eles: bind(), live() e delegate(). Analisando o código das três APIs, consegue-se descobrir coisas engraçadas. Por exemplo, $(document).unbind('click') irá remover todos os eventos de click (live('click'), bind('click'), entre outros), uma vez que esses eventos estão ligados ao documento.
Para resolver algumas destas inconsistências, foi introduzido um novo par de métodos simples que pode fazer o papel de todos os três métodos utilizados anteriormente.
$(elems).on(events, selector, data, fn); $(elems).off(events, selector, fn);
Se um seletor é fornecido, é um evento de delegate. Caso contrário, ele é diretamente vinculado. Todos os recursos das APIs antigas estão lá, por exemplo, pode ser utilizado vários eventos separados por espaço em uma única string.
Antes da versão 1.7, se você paralisasse uma animação antes de completá-la, era criada uma situação onde o elemento que estava animando não poderia retornar ao tamanho original. As dimensões originais são armazenadas, antes que comece a animação, para que possa ser utilizada posteriormente. Isto elimina alguns problemas que existiam antes com accordion, por exemplo.
Se você já faz uso das novas tags HTML, poderá testar a nova versão que está preparada para criar e clonar elementos nestas tags.
Para a lista completa de novidades, veja o post oficial, alternativamente Anddy Osmani comenta novidades mais avançadas sobre a versão.
Olá, a algum tempo que eu não posto aqui, estou mais focado na tradução da documentação, mas para vocês não me esquecerem, vim dar um oi 
.
Recentemente comecei um job onde o cliente solicitou que o site tivesse algumas animações, não fosse paradão. Pensei comigo mesmo, acho que o cara quer uma apresentação no PowerPoint =).
Em busca dessa solução, pensei em fazer transições entre as páginas. Eis que veio na minha cabeça um efeito muito simples mas de impacto, simplesmente esmaecer a página.
Vamos ao código então. Precisamos ter nosso html bonitinho.
<div id="container">
<h1>Essa é a index </h1>
Aqui vamos ter um texto qualquer onde temos um <a class="transition" href="http://jsfiddle.net/ruanltbg/Ns97H/3/embedded/result/">link</a>. Esse link vai fazer a página esmaecer
</div>
<div id="container">
<h1>Essa é a segunda página </h1>
Ela vai aparecer e vai ter um <a class="transition" href="http://jsfiddle.net/ruanltbg/WvD7Q/1/embedded/result/">link</a> para a index.
</div>
Já temos o HTMl com os links para as páginas, decidi deixar os links com uma class transition para poder identificar quais os links irão ter o efeito (pois posso ter links internos que simplesmente não irão a lugar nenhum, como âncoras).
Para ficar com o efeito armênico, precisamos que quando a página for abrir ela apareça devagar, ou seja, vamos usar o método fadeIn() para fazer isso. E após, precisamos pegar todos os links, aplicar o efeito na página e então redirecionar para onde o site deveria ir.
Vale lembrar que tudo deve estar dentro do ready e o código é igual para ambas as páginas.
$("#container").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
link = this.href;
$("body").fadeOut(1000, function(){
window.location = link;
});
});
Simples assim, agora temos uma página que mais parece um PowerPoint =D.
*ignore o header do jsfiddle que aparece
efeitos, jquery, transitionsOlá pessoal,
Antes de tudo, peço desculpas pelo tempo em que passei um pouco afastado. Projetos pessoais, trabalho, mudanças, enfim, vamos dar início e perder menos tempo com xurumelas =P
Todos nós já sabemos que 99,9% dos browsers possuem suporte ao bom e velho Javascript. Mas o que custa trabalharmos um pouco melhor e ter um código bem feito e dando suporte a todos? Até porque o mundo mobile cresce cada vez mais e, infelizmente, ainda existem alguns aparelhos que não dão todo o suporte.
Outro motivo que precisamos nos preocupar é que se tiver algum erro de execução no seu Javascript, por um simples erro de sintaxe, o seu código pode não ser todo interpretado e, por exemplo, estourar um JSON sem CSS na tela do usuário não é nada agradável.
Imagine que você tem um form que vai ser enviado assíncronamente. Como poderíamos fazer da melhor forma?
Existe um método que não é tão conhecido chamado preventDefault(). Ele vai nos ajudar bastante nos nossos exemplos. Ele previne a execução padrão do evento. No caso de um formulário, ele não vai submetê-lo, nem levar o usuário para a action do form. Se fosse um link, ele não levaria o usuário para a página do link, e assim sucessivamente.
Vamos pôr a mão na massa!
<form action="/users/" method="post" id="newUser"> <input type="text" name="title" /> <input type="submit" value="Enviar" /> </form>
$('form#newUser').submit(function(event){
event.preventDefault(); //Este é o cara!
var actionUrl = $(this).attr('action'),
params = $(this).serializeArray();
$.post(
actionUrl,
params,
function(){
alert('Formulário enviado com sucesso!');
}
);
});
Algumas boas práticas podem ser vistas nesse código.
serialize(), ou seja, se incluir novos parâmetros no form, estes também serão enviados na requisição ajax;Para completar, tente desabilitar o javascript do browser e fazer um teste no seu formulário. 
Alguns desenvolvedores preferem utilizar o return false; no corpo do método. Pode ser utilizado também. A diferença é que o return false executa o preventDefault() e o stopPropagation(), não permitindo que nenhum outro manipulador seja notificado do evento.
Bom galera , é o primeiro post aqui 
e venho trazer a vocês uma forma de otimizar as páginas de cadastro com um formulário dinâmico através do jQuery.
A princípio a ideia é inserir o formulário de acordo com a demanda, não sobrecarregando a página com elementos que possivelmente não iram ser usados e identificar cada campo com o atributo name diferente para recuperá-los mais tarde. Bom, acho que consegui me expressar … então vamos botar a mão na massa!
Primeiramente precisamos de nosso formulário
<form method="get" action="processa.php">
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="item1" size="60" /></td>
<td><input type="text" name="quantidade1" size="10" /></td>
</tr>
</tbody>
</table>
<!--Irá armazenar a quantidade de linhas-->
<input type="hidden" value="1" name="quantidade_itens" />
</form>
Agora precisamos de dois elementos que posteriormente irão disparar o envio do formulário e a inserção de novos inputs.
<a href="#" id="enviar">Enviar lista de compras</a>
<a href="#" id="mais">Add Item</a>
Para enviar o formulário, iremos associar o seu método .submit() ao evento .click() de um dos elementos que criamos para este fim. Aqui utilizaremos o link com id enviar.
// JavaScript Document
$('#enviar').click(function(){
$('form').submit();
});
Dentro do evento .click() do link com id mais vamos:
name concatenada com o número da linha a ser inserida que armazenamos na variável next.:hidden que usamos para armazenar a quantidade de linhas.
$('#mais').click(function(){
//recuperando o próximo numero da linha
var next = $('#lista tbody').children('tr').length + 1;
//inserindo formulário
$('#lista tbody').append('<tr>' +
'<td><input type="text" name="item' + next + '" /></td>' +
'<td><input type="text" name="quantidade' + next + '" /></td>' +
'</tr>');
//armazenando a quantidade de linhas ou registros no elemento hidden
$(':hidden').val(next);
return false;
});
É simples, como criamos o formulário dinâmico, devemos informar à página que irá receber os dados qual a quantidade de registros que ela irá receber.
Pronto, o script já está funcionando. Mas para um melhor entendimento mostraremos como a página irá receber estes dados.
A pagina deverá conter uma variável para recuperar a quantidade de itens, (lembra aquela que comentamos ?) e um loop que terá como limite nossa variável.
Dentro dele basta recuperar os valores concatenando a propriedade name do campo com o número da repetição.
<?php
$quantidade_itens = $_GET['quantidade_itens'];
for ( $x = 1; $x <= $quantidade_itens ; $x++ ){
$item = $_GET["item$x"];
$quantidade = $_GET["quantidade$x"];
//aqui seu código com o uso dos valores capturados
}
?>
Veja a
Demo
Inserimos através do método .append() os inputs com o atributo name concatenado com a quantidade de linhas mais 1, que atribuímos à variável quantidade. Sendo assim somente o final da propriedade name irá mudar , facilitando a recepção dos dados por outra página. Implementando então uma inserção dinâmica onde todos os valores poderão ser capturados.
Obs:. É bom lembra que essa é “uma” das formas de se fazer … cada um pode implementar da maneira que quiser mas o conceito , como já mencionei, é sempre o mesmo.
Aqui não foi associado nenhum evento aos inputs, mas se necessário, é preciso utilizar o método .live() para que este evento se estenda a todos os inputs.
Um abraço e até o próximo post!
Olá galera, há um tempo o Luiz Tiago havia postado que começaríamos o processo de tradução da documentação do jQuery.
No entanto, percebemos que a procura para ajudar a traduzir não foi alta. Gostaria de ressaltar que este trabalho é um trabalho não remunerado, mas que será de grande ajuda para todos, principalmente para os iniciantes. E posso assim dizer que, não há remuneração melhor do que o agradecimento de outra pessoa por algo que você fez e foi útil.
Pense, se 288 pessoas pegarem uma página em 1 dia tudo estaria traduzido, ou agora 217.
Simples, no post do Tiago tem uma breve explicação de como proceder e mais detalhes no github do projeto.
Meu MUITO OBRIGADO para todos que já ajudaram e para os que ainda irão.
traduçãoOlá, na noite de ontem (12/09) foi lançada a nova versão do jQuery, a 1.6.4.
Foram corrigidos alguns bugs da versão 1.6.3. Como sempre disponibilizado em duas versões para download.
Olá galera, o jQuery 1.6.3 foi lançado no dia 01 de Setembro (desculpe a demora =’). Ele veio acompanhado de muitas correções de bugs.
Como sempre, o jQuery team pede para que reportem os bugs caso alguém encontre algo que não esta funcionando.
Como destaques temos:
data do HTML5A lista completa de mudanças pode ser vista no changelog.
Cya. +D
Após o nosso podcast sobre Ajax, surgiram algumas dúvidas de como fazer um arquivo de configuração para o Ajax.
Explico, não necessariamente seria um arquivo de configuração e sim códigos de configuração, os mesmos não precisariam estar em um arquivo separado, eu mesmo, quando utilizo, coloco no arquivo de jQuery (não sou de utilizar CDN, por mais que eu recomende o uso).
O jQuery nos provê de várias propriedades para configuração do Ajax, essas podem se repetir por várias requisições diferentes. Devido a essa repetição podemos utilizar a função jQuery.ajaxSetup() para que a mesma configuração seja usada por todas as requisições.
Então vamos criar uma configuração para que todas as requisições sejam para apenas uma url.
//pode ser $.ajaxSetup
jQuery.ajaxSetup({
url: 'uma_url_qualquer.php'
});
Quando usarmos $.get(), $.post(), entre outros, não precisamos mais passar a URL pois já temos na nossa configuração. Usamos dessa forma então:
$.ajax({
data: {'nome': 'Ruan'}
});
$.get({
data: {'nome-do-meio': 'Carlos'}
});
$.post({
data: {'sobrenome': 'Kovalczyk'}
});
//sei que Kovalczyk pode soar como um palavrão para muitos =)
Agora vamos setar configurações diferentes
jQuery.ajaxSetup({
global: false,
type: "POST",
cache: false,
//ate mesmo callbacks
error: function(error) {
alert(error);
}
});
Te vejo na próxima
ajax, ajaxSetupBem pessoal, nunca é demais falar de coisas simples, mas que ajudam muito a manutenção do código desenvolvido. Algumas vezes que acessei o código escrito por terceiros, me deparei com algumas coisas que são bastante utilizadas, porém não é nem de longe a melhor forma de trabalhar. Irei citar alguns exemplos agora:
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
Se você estiver com o objeto $('li.item-1') e quiser ir para a primeira ul da árvore, neste caso $('ul#one'), quais as formas que podemos chegar até ela se esse conteúdo não é estático e este id é flexível?
Essa é a opção que utiliza o método parent() infinitamente. Por incrível que pareça, é a que eu mais vejo.
var item1 = $('li.item-1'),
primeira_ul = item1.parent().parent().parent().parent();
O maior problema desta opção, além do código repetido que está meio óbvio, é que se o código html for modificado acrescentando ou removendo algum elemento, este javascript precisará ser alterado também.
Essa é a opção que utiliza o método parents(). É uma solução válida, porém o código não fica muito elegante.
var item1 = $('li.item-1'),
primeira_ul = item1.parents('ul.level-1:eq(0)');
Desta forma ele irá retornar o objeto da primeiro ul pai com a classe .level-1 que ele encontrar.
Essa é a opção que utiliza o método closest(). Na minha opinião é a opção mais elegante.
var item1 = $('li.item-1'),
primeira_ul = item1.closest('ul.level-1');
Esta forma é idêntica a segunda opção, porém acho que o código fica mais elegante.
Imagine que você precisa incluir outros elementos dentro desses nós, como um link ou um span. Da primeira forma você precisará dar manutenção no JS, acrescentando ou retirando a quantidade de métodos parent() que existir. Utilizando o parents() ou o closest(), não precisa se preocupar com isso. Ele se preocupa por você!
ASSINE NOSSO FEED:TODOS OS POSTS
SIGA-NOS NO TWITTER:@JQUERYBR
FIQUE LIGADO NOS PODCASTS:ITUNES
