SELETORES JQUERY

Olá amigos! Hoje vou sair um pouco do desenvolvimento com ZEND FRAMEWORK para outro assunto muito importante que é o desenvolvimento FRONT END, mais propriamente vou ensinar a utilizar a maior biblioteca js(javascript) do mundo o JQUERY e para começar bem com ele vou explicar em diversas postagens vários metodos do JQUERY.

(LOGO JQUERY COM SLOGAN 'ESCREVA MENOS, FAÇA MAIS)

Mas o que é de fato o JQUERY?

 Bem jQuery é uma Biblioteca JavaScript que simplifica percorrer documentos HTML, manipulação de eventos, animação e interações Ajax para desenvolvimento web rápido. jQuery é projetado para mudar a maneira que você escreve JavaScript.  

(Site: http://jquery.com/)

Caso vc tenha dúvida acesse o site para entender melhor! Para entender bem esses posts vc precisa entender um pouco sobre HTML e JAVASCRIPT.

MÃOS A OBRA

Hoje vou explicar basicamente como percorrer nosso elemento DOM a fim de selecionar um elemento para posteriormente fazer algo com ele...

Antes de tentar fazer qualquer coisa com o jquery vc precisa primeiro baixar a biblioteca, no nosso caso vamos apenas chamar direto do google, antes do head faça:

(TIRE OS ESPAÇOS)



< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">< / script >

Imaginemos um html escrito dessa maneira(não vou escrever a página inteira mas apenas oq eu vou explicar):

< ul >
 < li > ITEM 1 < / li>
 < li > ITEM 2 < / li>
< / ul >

Eu quero selecionar apenar o item 2 e ocultar ele como eu faria? Preciso percorrer o HTML


< scrip >
  $('li:eq(1)').hide();
< / script >

O que foi feito aqui em cima é bemm simples, apenas utilizamos o seletor personalizado de índice que é o :eq() ... entramos com o jquery $() depois falamos que queremos um li e nele usamos o eq posição 1 (o jquery percorre o DOM como um array e ja que começa do zero estamos selecionando o segundo li 'ITEM 2' e depois disso utilizando o metodo .hide(); ou seja quando vc abrir essa página a lista 2 some. Pode parecer totalmente simples (e é) mas o intuito aqui é vc entender a possibilidade desses seletores, com isso vc faz muita coisa como por exemplo "a partir do evento clique eu oculto parte do menu ou aquela opção..." isso ja depende da sua necessidade mesmo!

Espero ter ajudado...