SELETORES JQUERY 2/3

Continuação do post anterior

- Seletores com filtros (cont.) -

* $(seletor:even) - Acessa os elementos pares em um conjunto de elementos indicados pelo seletor. Seletor exclusivo do framework;

* $(seletor:odd) - Acessa os elementos ímpares em um conjunto de elementos indicados pelo seletor.Seletor exclusivo do framework;

* $(seletor:eq(índice)) - Acessa o elemento da posição indicada pelo argumento 'indice' de um conjunto de elementos acessados pelo 'seletor'. Seletor exclusivo do framework;

* $(seletor:gt(índice)) - Acessa todos os elementos selecionados pelo seletor a partir do índice especificado, ou seja, acessa os elementos do conjunto selecionados pelo seletor com índices maiores do que o especificado. Seletor exclusivo do framework;

* $(seletor:lt(índice)) - acessa todos os elementos selecionados pelo seletor anteriores ao índice especificado, ou seja, acessa os elementos do conjunto selecionados pelo seletor com índices inferiores ao que o especificado. Seletor exclusivo do framework;

* $(":header") - acessa todas os elementos do tipo cabeçalho (h1, h2, ..., h6). Seletor exclusivo do framework;

* $(seletor:animated) - acessa os elementos que possuem eventos de animação, que estão no conjunto selecionado pelo seletor;

Aplicando os seletores:

Exemplo 04

Comentando o código

linha 4: Acessa as tags 'tr' pares da tabela e troca a cor de fundo para vermelho;
linha 5: Acessa as tags 'tr' ímpares da tabela e troca a cor de fundo para verde;
linha 6: Acessa a tag 'td' que está na posição 6 na tabela(l.24), lembrando que em javascript o índice começa com 0, e troca a cor de fundo por amarelo;
linha 7: Acessa as tags 'td' apartir da posição 12 da tabela (l.28) e troca a cor de fundo para azul;
linha 8: Acessa as tags 'td' anteriores da posição 1 da tabela (l.17) e troca a cor de fundo para cinza;
linha 9: Acessa as tags 'h3', 'h4' e 'h5' existente no documento(l.13) e troca a cor de fundo para vermelho;

- Seletores de texto -

$(seletor:contains(string)) - Procura pelo texto informado nos elementos selecionados pelo seletor. Este seletor é case sensitive, ou seja, o texto "Valor" é diferente de "valor". Seletor exclusivo do framework;

$(seletor:empty) - Acessa todos os elementos vazios acessados pelo seletor;

$(seletor1:has(seletor2)) - Acessa todos os elementos selecionado pelo seletor1 que possuem os elementos selecionado pelo seletor2. Seletor exclusivo do framework;

$(seletor:parent) - Acessa todos os elementos que tenham filhos, considerando que texto como um nó filho. Seletor exclusivo do framework.

Aplicando os seletores:

Exemplo 05

Comentando o código

linha: Acessa as tags 'div' e procura pelo texto 'framework'(linha tal) dentro delas e troca a cor de fundo por vermelha;
linha: Acessa as tags 'div' e procura por alguma que esteja vazia(linha tal) e troca a cor de funda para velho;
linha: Acessa as tags 'div' procurando por pelo menos uma ocorrência da tag 'span'(linha tal);

Referencias:

http://docs.jquery.com/Selectors

http://pt-br.html.net/tutorials/css/lesson1.asp

jQuery A Biblioteca do programador JavaScript, Maurício Samy Silva, novatec

------------------------------

Bom pessoal é isto ai!! jQuery é uma ferramenta de trabalho bastante ampla e muito útil no dia a dia de desenvolvedores web, ficarei devendo o restante dos seletores para vocês, um abraço e até o proximo post.

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

jQuery

Olha eu de novo !! Bom no meu segundo post vou falar sobre assunto que irei trabalhar bastante nestes próximos dias, e o culpado por eu ter que fazer isso é o prof° Jackson, ops !!! esqueci de apresentá-lo, Jackson é professor do CEULP/ULBRA ministra as maiorias das matérias de programação do curso de Sistemas de Informação, na qual eu sou aluno, e também é coordenador do projeto Fábrica de Software e chefe do Portal, na qual, sou membro e funcionário respectivamente. Portanto, nos lançou o desafio para aprender sobre um framework de JavaScript chamado jQuery, então vamos mostrar um pouco da lição de casa que o professor passou !!

jQuery é uma biblioteca JavaScript lançada em janeiro de 2006 por Jon Resing, na qual usou como slogan do seu projeto "write less, do more" (escrever menos, fazer mais), Resing trabalha na Mozilla Corporation e é autor do livro Pro JavaScript Techniques.

Algumas características do framework

• DOM - acesso direto usando os poderosos seletores das CSS 2.1 e CSS 3, e alguns seletores criados da biblioteca;
  
• Manipuladores de conteúdo - sem limitações e com pouquíssimo código;
  
• Eventos - uma infinidade de efeitos e animações que vai deixar o seu site irreconhecível (pra melhor é claro);
• AJAX - É claro não podia faltar e bem mais fácil de utilizar
  
• Encadeamento – admite programação encadeada, ou seja, cada método retorna um objeto;
  
• Plug-ins - Por ser uma biblioteca de código aberto e extremante extensível, jQuery deixa aberta a porta para que qualquer um possa criar plug-ins, que utilizem e incrementem mais as suas funcionalidades. E a porta parece totalmente escancarada, pois atualmente existem vários plug-ins e a tendência é aumentar, visto que a cada dia, a biblioteca ganha mais admiradores (usuários).
  

jQuery veio com uma solução tanto para aqueles velhos probleminhas de compatibilidade entre browser, acessibilidades entre outros, como também aqueles utilitários que você sempre quis ter no seu site mais o script que você copiou de outro, não funciona no seu, ou seja, foi desenvolvido orientado a página (pra não dizer POG). Enfim é por estas e outras (muitas outras) coisas que jQuery vem ocupando espaço e merece, certamente a nossa atenção, para usufruir de tudo o que ele tem a nos oferecer.

Então, sem mais delongas, vamos aos exemplos: $(document).ready(function(){ … } – executa a função assim que a árvore do documento tenha sido carregado, quase equivalente a declaração do JavaScript window.onload, porém, mais otimizado, já que função do jQuery não espera a carregamento total da página.
Toggle(...) – Este evento permite executar duas ou mais, funções seguidas e alternadamente mediantes cliques sucessivos.
$(‘a’), $(‘#div’) – funções de seleção de objeto DOM que utiliza os famosos seletores da CSS.
Animate(...) – função que permite a manipulação das propriedades CSS dos elementos.
Neste exemplo assim que for clicado no tag a dispara o evento do toggle() que se encarrega de alternar as funções, que buscam pelo elemento com o id #div1 e insere/altera as propriedades CSS dele.
Exemplos utilizando plug-in: $('#tabela').tablesorter(); - inicia o documento com a tabela já ordenada de crescente de cima para baixo.

$('#tabela').tablesorter( {sortList: [[0,0], [1,0]]} ); - altera a ordenação de acordo com o coluna específica, define a ordem em que o as colunas serão ordenadas através do parâmetro [[columnIndex, sortDirection], ... ], onde columnIndex indica o qual é a coluna, e sortDirection define qual será a ordem ordenado, sendo 0 para crescente (ascendente) e 1 para decrescente (descendente). Perceba que foi utilizado as tags thead e tbody, é através delas que a plug-in separa o corpo e o cabeçalho da tabela.
Bom é isso ai jQuery realmente facilitou muito o nosso trabalho !! Até a próxima !!!

Referências :
http://tablesorter.com/docs/
http://docs.jquery.com/Main_Page
http://ejohn.org/
Amostra do Livro – jQuery A Biblioteca do programador JavaScript, Maurício Samy Silva, novatec

Hello World Blog !!!

Olá pessoal, sejam bem-vindos a este "barco", e já vou avisando para colocarem o cinto e se segurarem, porque que ele está sendo guiado para o infinito mundo da busca pelo conhecimento! E está sempre aberto para receber mais passageiros ou tripulantes, e nesse barco não têm classe econômica não, é tudo área vip, portanto, vai se acomodando e pegue o cardápio que está recheado de coisas boas !!!

Pois é, este é o meu primeiro blog e também o meu primeiro post, sei que por enquanto poucas pessoas lerão, mas a viagem é longa e daqui a pouco estará cheio de passageiros e tripulantes para discutirmos sobre variados assuntos, agradeço a presença (se puder deixe sempre seu comentário) e convido para sempre voltar, que prometo postar coisas novas e em curtos prazos de tempo. Então até mais, valeu !!! :D