08/07/2011

Uso dos métodos .parent(), .parents() ou .closest()

Bem 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?

Primeira opção – uso do parent()

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.

Segunda opção – uso do parents()

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)');

Por que utilizar o eq(0)?

Desta forma ele irá retornar o objeto da primeiro ul pai com a classe .level-1 que ele encontrar.

Terceira – uso do closest()

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.

E o que isso tem haver com flexibilidade no código?

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ê! :)

07/07/2011

jQueryBrasilCast 003 – Ajax, Ajaj, Ajas

Olá pessoal,

Apesar da demora, finalmente lançamos o nosso terceiro podcast. Aconteceram alguns problemas técnicos na gravação, mas o principal aconteceu. Está divulgado! :)

Desta vez, contamos com a participação especial do Wilker:

Você pode adicionar o podcast ao seu iTunes clicando aqui.

É isso aí. Comentem bastante! :)

Links

Participantes:

Espero que gostem! :)

Cya! :D

04/07/2011

Diferença entre window.load e document.ready

Olá, o jQuery prove três métodos para trabalhar com o carregamento da página. São eles:

Hoje irei explicar qual a diferença entre o $(window).load() e o $(document).ready().

Essa diferença é bem simples. O mais conhecido $(document).ready() é utilizado para verificarmos se o DOM esta completamente carregado, caso ele esteja, podemos trabalhar tranquilamente com seus elementos, nesse caso, uma imagem não precisa estar completamente carregada, apenas precisamos ter o elemento da imagem no DOM.

Já o $(window).load() é utilizado quando precisamos que TODOS os elementos estejam carregados, ou seja, ele vai esperar todas as imagens, css, javascript e elementos externos estarem carregados para ser executado.

Qual utilizar?

Vai depender apenas da sua necessidade, no próximo post, eu irei dar um exemplo de uso do $(window).load().

Demo

Veja aqui um exemplo da diferença entre window.load e document.ready.(existe diferenças de comportamento entre navegadores, essa diferença é notada entre o comportamento do Firefox e do Chrome).

, , , ,
30/06/2011

Lançado jQuery 1.6.2

Acaba de ser lançado a versão 1.6.2 do jQuery. Mais ou menos 15 dias após o lançamento do RC 1 Essa nova versão não trás novidades, apenas bugfix, muitos relacionados a compatibilidade entre navegadores.

Atualmente os engenheiros ;) do jQuery já estão trabalhando na versão 1.7 <especulação> que deverá vir com alguma alteração nos calbacks </especulação>.

Vale lembrar que qualquer bug pode ser reportado na página de bugs do jQuery.

Links do CDN do jQuery

A lista completa de mudanças pode ser vista no changlog.

15/06/2011

Lançado jQuery 1.6.2 RC1

Ontem foi o dia de lançamento do primeiro Release Candidate do jQuery 1.6.2. Pelo que verifiquei rapidamente, não existem grandes mudanças, além da correção de alguns bugs.

Link do CDN jQuery:

Changelog:

Ainda iremos fazer alguns testes, mas de acordo com o post oficial do jQuery, as mudanças foram mais evidentes na correção de bugs, principalmente no IE (blaaah!) como mencionado no post oficial do lançamento do jQuery 1.6.2 RC1.

Cya! :D

08/06/2011

jQueryBrasilCast 002 – jQuery vs Outras bibliotecas + noConflict()


Olá pessoal!

Está no ar o segundo podcast. Espero que gostem mais do que o primeiro e menos do que o próximo! :)

Comentem, curtam e falem de tudo o que vocês acharam.

Ao contrário do áudio do primeiro, este já está com um pouco mais de qualidade graças à todos os participantes! :)

Você pode adicionar o podcast ao seu iTunes clicando aqui.

É isso aí. Comentem bastante! :)

Links

Participantes:

Espero que gostem! :)

Cya! :D

, ,
06/06/2011

AJAX com jQuery – Método $.ajax()

Hoje falarei sobre a função $.ajax onde podemos requisitar informações via GET ou POST assíncronamente. Creio que o AJAX deva ser mundialmente conhecido, por isso não entrarei nos detalhes, apenas mostrarei as formas que podemos utilizá-lo.
(mais…)

,
02/06/2011

Manipulando Checkbox e Radio Button com jQuery

Muitas pessoas tem problemas em manipular checkbox e radio button. Irei mostrar como trabalhar com eles.

Os checkbox e os radio button são um pouco diferente dos outros elementos no html. Eles têm uma propriedade booleana chamada checked, mas diferente das outras propriedades ela pode ser declarada sem um valor (isso pode dar um erro na validação do seu html). Ex:
(mais…)

, , ,
27/05/2011

Início do processo de tradução da documentação do jQuery

Olá pessoal,

Como já informamos no nosso Twitter há alguns dias, estamos organizando o processo para a tradução da documentação do jQuery.

A explicação do processo para colaboração está todo detalhado no repositório da documentação no Github.

Caso você não tenha prática com o GitHub, ou prefira traduzir por fora, você pode baixar toda a documentação atualizada e nos enviar os arquivos .html da documentação (que fica dentro da pasta docs) que for traduzindo, de acordo com o os métodos que você desejar participar. Antes de traduzir qualquer método, procure saber se ele encontra-se disponível ou se ele não já está traduzido.

Como marcar um conteúdo para traduzir?

Envie um email para jquerybrasil@gmail.com informando qual ou quais métodos pretende traduzir e aguarde a resposta.

Para termos um controle maior dos métodos e dar a chance para participação de todos, estamos limitando a apenas 3 métodos em andamento por colaborador.

Você pode acompanhar o andamento das traduções, bem como as traduções restantes e os responsáveis, que está disponível neste documento.

Contamos com a colaboração de todos para ajudar a comunidade jQuery. Como explicado, todos os colaboradores terão seus créditos mantidos e divulgados na apresentação da versão final da documentação.

25/05/2011

jQueryBrasilCast 001 – Início do Portal

Olá pessoal!

É com graaaaaaaaande satisfação que anuncio o nosso primeiro podcast! Anunciamos no Twitter ontem que teríamos uma grande novidade, e esta é a surpresa! Esperamos que todos vocês gostem bastante, pois foi feito de coração s2 (lol).

Comentem, curtam, se expressem, falem de tudo o que vocês acharam. Sejam coisas boas ou ruins.

Aproveito para pedir desculpas pela edição do nosso primeiro podcast. Além da experiência inicial com podcast de todos ainda ser pequena, a edição no início ainda ficou a desejar.

Você pode adicionar o podcast ao seu iTunes clicando aqui.

É isso aí. Comentem bastante! :)

Participantes:

Ahhh, lembrando…

Camisa do Portal jQuery Brasil

Para ajudar a divulgação do nosso primeiro podcast, estamos sorteando uma camisa oficial do portal jQuery Brasil. Para concorrer, basta seguir o @jquerybr e twittar a seguinte frase:

“Escutei o primeiro jQueryBrasilCast e estou concorrendo a uma camisa do portal @jquerybr. http://kingo.to/D33″

Cya! :D

Resultado:

O vencedor da promoção foi @acvodark. Parabéns!

URL do sorteio: http://sorteie.me/1N4p33

Página 4 de 7« Primeira...23456...Última »