Todo mundo que programa em javascript se cansa de ter que digitar "document.getElementById" ou "document.getElementsByTagName" (ufa, cansei) toooooooda vez que quer selecionar determinado elemento ou grupo de elementos. É ou não é?
Então, após 3 digitadas destes métodos, agente vai lá e programa uma funçãozinha pra simplificar isso. É ou não é?
Na net existem infindáveis funções pra substituir o 1 ou o 2 (não vou digitar tudo denovo não heahe). Todo mundo tem sua velha função $() ou gE() ou gEid(). É ou não é?
Mas as funções que fazem isso "mais mió de bão" estão dentro de frameworks. O que é uma pena pra quem não usa frameworks.
No meu pouco conhecimento, a melhor atualmente é a do jquery que guenta seletores CSS como parâmetro e outros seletores mó bizarros.
Se você não sabe as facilidades dos seletores CSS, dê uma estudada.
O objetivo deste post do mico é mostrar uma ótima solução pra você que não usar frameworks ou cujo framework ou função não suporte fazer a seleção usando seletores CSS:
"getElementsByTagName? Pah!"
É assim que o ultra-top-master de javascript começa a explicação (mico paga pau).
Sintaxe:
elements = cssQuery(selector [, from]);
Exemplos:
// retorna todos os parágrafos que são filhos diretos de body var tags = cssQuery("body > p"); // retorna todos os elementos que tenham o atributo 'href' var tags = cssQuery("[href]"); // retorna os elementos que o atributo 'href' é igual a '#' var tags = cssQuery("a[href='#']"); // procura todas as imagens dentro dos links retornados acima var images = cssQuery("img", tags); // pega todas as listas var tags = cssQuery("dl,ol,ul"); // até em xml externos var tags = cssQuery("my|:root>my|link", myXMLDoc); // você entende isso? var complex = "p>a:first-child+input[type=text]~span"; var tags = cssQuery(complex);
Seletores suportados:
* E E F E > F E + F E ~ F E.warning E#myid E:link E:first-child E:last-child E:nth-child(n) E:nth-last-child(n) E:only-child E:root E:lang(fr) E:target E:enabled E:disabled E:checked E:contains("foo") E:not(s) E[foo] E[foo="bar"] E[foo~="bar"] E[foo^="bar"] E[foo$="bar"] E[foo*="bar"] E[foo|="bar"]
Guentado no IE, FF, OP, Netscape e Safari.
E aí? Vai trocar suas velhas $() ??
//Há uma lenda aí dizendo que o próximo Firefox vai suportar o velho $() . Será? Procurei um link e não achei. More informations please.
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.
Nenhum comentário:
Postar um comentário