3 de julho de 2010Diferentes formas de se buscar elementos em jquery
Olá pessoal ! nada como um dia após o outro né? Ontem eu quase chorei com a eliminação do Brasil, na verdade, até agora não acredito nisso. Mas ao ver a Argentina tomando um chocolate hoje, meu humor tá bem melhor. shauishiauha.
Enfim, rs.. hoje vamos estudar um item que é muito útil e também legal, vamos falar sobre como buscar e aplicar filtros pro nosso construtor (por padrão do jquery “$”) recuperar dados do DOM.
Bom, um dos segredos do sucesso da biblioteca jquery é o seu foco na simplicidade e no seu método de oferecer uma forma não obstrutiva do seu código. Em razão disso, ele trabalha ótimamente com o DOM, fazendo amplamente o uso dos seletores CSS, buscando qualquer elemento da árvore do documento utilizando apenas o construtor “$”.
Vamos então conhecer uma série de formas para se chamar esses seletores:
Resgastar todos de um determinado elemento
Javascript
$("div").css("background-color","red");
Html
Thiago Félix Fasano22 anosRio de Janeiro
Dessa forma, resgatamos todos os divs do DOM, mesmo esses tendo ID ou Classes diferentes/iguais.
Resgastar elemento de um determinado ID
Javascript:
$("div#meu-nome").css("background-color","red");
Também podemos abrir mao da tag do elemento e especificar apenas o ID colocando sempre “#” antes. Veja:
$("#minha-idade").css("background-color","orange");
Html:
Thiago Félix Fasano22 anosRio de Janeiro
Com essa forma, estamos especificando uma determinada div, pois estamos dizendo pro jquery buscar somente o elemento cujo ID foi passado pra ele, no nosso exemplo a div id=”meu-nome” e div id=”minha-idade”.
Resgastar todos de uma determinada classe
Javascript:
$(".comclasse").css("background-color","red");
Html:
Thiago Félix Fasano22 anosRio de Janeiro
Dessa forma, vamos selecionar todos elementos cujos possuem o atributo classe do nome: comclasse.
Resgastar determinado filho
Javascript:
$("div strong").css("background-color","red");
Html:
Thiago Félix Fasano22 anosBrasil, Rio de Janeiro
Dessa forma, aplicamos o estilo especificamente ao filho strong da div.
Resgastar o primeiro e/ou último elemento de uma lista
Javascript:
$("ul li:first").css("background-color","red");
ou
$("ul li:last").css("background-color","red");
Html:
- Thiago Félix Fasano
- 22 anos
- Rio de Janeiro
Dessa forma, filtramos apenas o primeiro e/ou o último item de lista.
Resgastar elemento com exceção
Javascript:
$("ul li:not(.diferente)").css("background-color","red");
Html:
- Thiago Félix Fasano
- 22 anos
- Rio de Janeiro
Dessa forma, aplicamos nosso estilo a todos os li´s, Exceto o que possui a classe: diferente.
Resgastar elemento cujo seu tipo seja igual ao especificado
Javascript:
$("input[type='text']").css("background-color","red");
Html:
Dessa forma, resgatamos apenas o elemento input cujo tipo seja de “text” e aplicamos a regra css descrita.
Resgastar elemento cujo seu tipo seja diferente ao do especificado
Javascript:
$("input[type=!'text']").css("background-color","red");
Html:
Dessa forma, resgatamos apenas os elementos inputs cujo tipo seja diferente de “text” e aplicamos a regra css descrita.
Resgastar elemento cujo seu valor contém determinada palavra
Javascript:
$("input[value*='Thiago']").css("background-color","red");
Html:
Dessa forma, resgatamos apenas os elementos inputs cujo valor contém a palavra Thiago. Atenção pois jquery é case-sensitive: Thiago é diferente de thiago.
Resgastar elemento cujo seu valor termine com determinada palavra
Javascript:
$("input[value$='Fasano']").css("background-color","red");
Html:
Dessa forma, resgatamos apenas os elementos inputs cujo valor terminem com a palavra Fasano. Atenção pois jquery é case-sensitive: Fasano é diferente de fasano.
Bom pessoal, listei pra vocês 10 formas de se chamar seletores da árvore de documento. Com eles deu pra perceber o controle que temos de acessar elementos de forma tão simples e rápida né? 
um abraço.
Nenhum Comentário »
Nenhum comentário ainda.
Feed RSS dos comentários deste post URL de TrackBack
Deixe um comentário
ThiagoFasano - Portfólio versão 2.0
