And After - Design e Tecnologia por Sua Conta!
O desenvolvedor é um blog sobre desenvolvimento web, não tratando apenas de programação mas também compartilhando experiências, métodos, debates e tendências da internet.

O Desenvolvedor é um blog de www.andafter.org
Assinar o Feed RSS

Chris Benseler

[www]

Fotos sempre tiradas do lado direito do rosto. Que nem o Rei!
Viciado em web, trabalho com web. Javascript e (x)html são minha praia conhecida, e me arrisco com PHP e Java.
Na vida offline, futebol e música me distraem. E falar bobeiras com os amigos

Status
Karma: 16024
Opiniões: 30

Mais deste autor


Usando a prototype - passo 8 - seletores CSS

Usando a prototype - passo 8 - seletores CSS

Muito bomEste texto foi classificado como Muito bom
Em Internet, Programação
Por Chris Benseler
30 de Janeiro de 2009

Como usar a função $$ para usar seletores CSS na prototype - semelhante a jQuery

RSS Acompanhe O Desenvolvedor por Feeds!


Muito se fala da facilidade que a jQuery tem em usar a sintaxe de CSS para selecionar elementos do DOM, o que facilita a vida de quem tem forte conhecimento em CSS. Mas poucos sabem que a prototype desde a versão 1.5 (agora está na 1.6.0.3) possui algo semelhante.

Enquanto na jQuery se utiliza o $ para fazer qualquer tipo de seleção (retornando ou um objeto ou uma lista), na prototype se utiliza o $ para selecionar um objeto pelo id dele e a função $$ para selecionar pelas regras do CSS, retornando um objeto Array da prototype (que é um objeto que extende o Array do javascript).

Vamos a um exemplo prático. Tendo o seguinte html:

<div>
   <ul id="main-nav">
      <li>abc</li>
      <li>fgh</li>
   </ul>
   <ul id="nav">
      <li>abc</li>
      <li>fgh</li>
      <li>abc</li>
      <li>fgh</li>
   </ul>
</div>

usando a função $$, você pode tentar retornar os elementos da seguinte forma:

$$("div ul"); //retorna as duas listas
$$("div.container ul"); //não retorna
$$("div ul#main-nav"); //retorna as lista com id main-nav
$$("div ul#main-nav li"); //retorna os itens de lista da lista com id main-nav
$$("div ul#main-nav li:first-child"); //retorna o primeiro item de lista da lista com id main-nav

A versão 1.6 (atual) suporta seletores do CSS3. Veja na documentação oficial quais são eles.

Uma coisa importante é notar que essa implementação é totalmente crossbrowser e que não está ligada a capacidade do browser de interpretar o CSS (ou seja, um browser que não entende seletores do CSS3 consegue pela prototype usar a função $$ igualmente a um browser que interprete o CSS3).

Quer ver esse código funcionando? Veja nesse html.

O que você achou do texto?

  • Muito ruim
  • Ruim
  • Regular
  • Bom
  • Muito bom
Sua opinião é o que faz a comunidade funcionar, colabore para isso!

Tags: prototype, seletor-css, jquery

Enviar para um amigo
Você pode comentar, assinar o feed, conhecer mais sobre o autor e ajudar a divulgar este artigo em sua ferramenta favorita através dos botões abaixo.
  • Rec6
  • ueba
  • linkk
  • dihitt
  • linkloko
  • websapiens
  • linkto
  • Eu curti

Comentários

Guilherme Serrano

30/1/2009 14:21:00

Legal, é bem simples os seletores em Prototype...

Realmente as duas bibliotecas são bem parecidas, pelo menos na parte dos seletores :)

[Responder este comentário]

Chris Benseler

30/1/2009 14:44:00

A diferença é que a prototype não tem as mágicas e tal... haha!
Brincadeiras a parte, tenho usado a jQuery no trabalho aqui, tem coisas bacanas. Gosto de ambas, mas você sabe qual a minha opinião ainda... hehe

Bianca Brancaleone

30/1/2009 14:57:00

"JQuery é pra fazer *FIUMMMMMM*" por @rulico.

Eu já disse, bota tudo um flashzinho ali que dá na mesma *corre* Huiahuia!

* Por favor galera, não levem a sério, eu só estou brincando (vai que recebo ameaças depois disso) :D

Deixe seu comentário!

Nome (requerido)

E-mail (requerido - não será divulgado)

URL

Quanto é 7 + 2?




web tracker