SELETORES JQUERY - 1/3

Olá pessoal !! No post passado fiz uma pequena introdução sobre jQuery, falei um pouco de cada coisa, neste reduzei um pouco mais o foco, continuarei falando sobre o jQuery, entretanto, falarei especificamente sobre seletores jQuery, foi uma sugestão do prof° Jackson, isso mesmo, o professor culpado pelo post anterior é o mesmo culpado por este, e não para por ai, o desafio é bem maior, começarei a partir deste uma série de post falando sobre cada tema específicos de jQuery, bom então vamos lá que o conteúdo é muito.

Bom é importante esclarecer algumas coisas antes de começar a mostrar código e falar sobre eles. E para que o conteúdo seja bem entendido por todos é importante saber o que são seletores jQuery? Para que eles servem?

Para responder estas perguntas irei falar um pouco sobre CSS. Cascading Style Sheets (CSS) traduzindo folha de estilos em cascata, sua principal utilização é para definir layout de documentos HTML, que através de sua linguagem de estilos, controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Para aplicar/manipular estes itens de estilos é preciso identifica as tag do documento HTML onde serão aplicadas, para isso a CSS usa uma técnica chamada de seletores, que são famosos por sua rapidez no acesso as tags.

John Resing sabendo desta rapidez de acesso, resolveu utilizar os poderosos seletores da CSS 3 na sua biblioteca(jQuery), por este e outros motivos jQuery é considerada uma das mais rápidas biblioteca JavaScript.

Com que estas informações já somos capazes de responder as perguntas feitas antes:
O que são seletores jQuery ? R: São técnicas que a biblioteca jQuery utiliza para identificar/acessar tags no documento HTML;
Para que eles servem? R: Servem para acessar as tags que se quer manipular/inserir eventos estilos, estilos, animações e outras infinidades de coisas que jQuery permite.

- Seletores simples -

* Seletor de id - $(“#id”) : Acessa o elemento exato que possui o valor do atributo 'id' informado no argumento. Este seletor acessa um único elemento, ou seja, se você tiver mais de um elemento com 'id' igual, ele acessará o primeiro elemento.

* Seletor de classe - $(“.class”): Acessa todos os elementos que possuem o valor do atributo 'class' informado no argumento.

* Seletor de elemento - $(“elemento”): Acessa todos os elementos que seja igual ao informado no argumento;

* Grupo de seletores - $(seletor1, seletor2, ..., seletorN): Acessa a combinação de resultados de todos os seletores informados como argumento;

Aplicando os seletores:

Exemplo 01

Comentando o código

linha 6: Acessa a tag 'button'(l.13) através do seletor de elemento e passa um evento para seu atributo onclick;
linha 7: Acessa a tag 'h1'(l.14) através de seu id utilizando o seletor de id e modificando o fundo para a cor vermelha;
linha 8: Acessa as tags 'div'(l.15e16) através do nome da classe utilizando o seletor de classe e modificando o fundo para a cor verde;

Percebam que nestes seletores as sintaxes são bem associativos com suas funcionalidades, não tem mistério, bem longe da nossa antiga realidade "document.getElementById(id).style.background = "red";"(uuhr! bate na madeira).

- Seletores compostos -

Apartir destes seletores já se exige um pouco mais de atenção, quanto as suas funcionalidades

* Seletor descendente - $(ancestral descendente): Acessa toda ocorrência do elemento descendente do ancestral especificado;

* Seletor de elemento filho direto - $(pai > filho): Acessa os elementos filhos imediatos do elemento pai, desconsiderando eventuais descendentes com nível mais baixo de parentesco;

* Seletor próximo - $(anterior + próximo): Acessa a primeira ocorrência do elemento próximo, logo após a identificação do elemento anterior;

* Seletor de irmãos - $(anterior ~ irmãos): Acessa os elementos irmãos(no mesmo nível) logo após o elemento especificado;

Aplicando os seletores:

Exemplo 02

Comentando o código

linha 4: Acessa a tag 'label'(l.14) que possui como pai uma tag 'p'(l.13);
linha 5: Acessa a tag 'span'(l.15,17) que são descendentes da tag 'div';
linha : Acessa a 1° ocorrência tag 'p'(l.20) que após a tag 'div'(l.19);
linha: Acessa a todas ocorrência da tag 'p' no mesmo nível e após a ocorrência da tag 'span': p(l.23) e span(l.22);

Obs: Nos seletores compostos pode ser utilizado qualquer tipo de seletor, não apenas o de elemento, utilizou-se apenas este seletor para melhorar no entendimento e facilitar na explicação dos exemplos. Portanto, como diria uma professora minha “você é livre” para escolher o seletor.

- Seletores com filtros -

São do tipo pseudo-seletores que filtram uma condição particular de um seletor simples ou composto.

* $(seletor:first) - Acessa o primeiro elemento do conjunto de elementos selecionados pelo seletor;

* $(seletor:last) - Acessa o ultimo elemento do conjunto de elementos selecionados pelo seletor;

* $(seletor1:not(seletor2)) - Acessa um conjunto de elementos de acordo com o seletor1, porém são retirados o(s) elemento(s) acessados pelo seletor2;

Aplicando os seletores:

Exemplo 03

Comentando o código

linha: Acessa o primeiro elemento da lista (linha tal);
linha: Acessa o ultimo elemento da lista (linha tal);
linha: Acessa todos os elementos da lista, menos o ultimo elemento;

Calma pessoal ainda não acabou, continua no próximo post