O que é Framework ? O que é jQuery ?

definição:

Framework de um modo geral é uma ferramenta que te ajuda a fazer um determinado trabalho.

Generalizando:

Todo programador php tem seus códigos e classes separadinhas e bem guardadas para o seu uso.
Vai dizer que você não tem aquela determinao método/Classe que pega os dados $_GET e faz uma garimpada no Conteúdo?
Podemos dizer que Isso é um “Framework” que você criou para sí mesmo!
Como estamos falando de JavaScript, é a mesma coisa, mas com objetivo um pouco diferente.

Vai dizer que ao desenvolver em js, você nunca teve o problema de só funcionar no IE ou no Firefox(vice-versa) ?

Acho que todo mundo né?
Então, é aí que o jQuery entra!
Ele é uma ferramenta que te ajudará a desenvolver o seu código.

ok! mais o que ele pode fazer por mim ?

Hoje em dia a maioria das grandes empresas e agências web trabalhaham com o jQuery.

alguns exemplos( google, Mozilla , WordPress, DELL, DRUPAL.. etc, etc).

Porque eles trabalham com o jquery ? É pelo simples fato de produzir 5x mais rapido do que com o Javascript puro, além de não ter problemas com browsers, e milhares de plugins nas mais variadas categorias  e a vantagem que é FREE.

Faça uma pergunta a sí mesmo:

- eu desejo fazer aplicações .js mais rapidas e eficiêntes ?

- Quem essas empresas contratariam ? alguem que faria o desenvolvimento em 5 meses ou em 1 mês !

Como usá-lo ?

Já ouvir dizer coisas do tipo: “Como posso usar esse Programa ?”, “Aonde eu baixo este aplicativo?”  … rsrs*
Não pessoal, ele não é um programa. Ele é um arquivo .js de 30kb (simples)  que você adiciona em sua página.

Exemplo:

<script src="jquery.js" language="javascript"></script>
<script>
$(document).ready(function(){ //para executar só quando o Javascript estiver pronto!onload!

alert(‘um abraço pra todos !’); // irá mostrar o alert!
});
</script>

Vantagens:

- CrossBrowser : Funciona na maioria dos Navegadores (até no meu MozillaFirebird de 1998 )
- Facilita seu código: que tal trocar de document.getElementId(“minhadiv”) por $(“#minhadiv”) !

Vamos ver um simples exemplo …

Conheça o jQuery navMenu – Criando um menu DropDown

jquery navMenu.

4kbites de código que te proporciona um lindo menu dropdown podendo ser customizável com pouquíssimas  linhas. E mais … voce pode colocar quantos  submenus e subitens quiser …

Este plugin está na versão 0.1 e vale a pena conferir !!!

Clique aqui para a demostração <<

Download Plugin  e demonstração <<

Simulando uma tag TITLE com FOTO, igual a do site: sxc.hu !!

Salve galera!
tudo bom com vocês ?
Só dando uma observação aqui..
É.. quem leu o artigo anterior sobre EVENTOSConseguirá entender tranqüilamente o desenvolver! coloquei esse POST mas para vocês exercitarem o artigo anterior ..

Está AQUI a DEMONSTRAÇÃO on-line do exercício, e todo seu código explicado abaixo do exemplo.

Resumindo tudo
Como foi falado anteriormente, usamos os EVENTOS. Em questão disso quis mostrar como usar de forma um pouco “criativa”. que dá pra fazer algo bom, com coisas simples! “minha idéia é sempre essa ..”
dúvido que você nunca se perguntou … “Pow! é uma boa idéia, por que niguem nunca pensou nisso antes!”.  Pois é .. não fui eu que tive essa idéia de “TAG TITLE COM FOTO” rsrs*. mas achei bem legal e ví que dava pra fazer, e que era somente EVENTOS, acho que isso fica bem legal por poucas linhas de código.
Sei que existe outras formas de fazer .. Mas está aí nosso EXERCÍCIO de Eventos.
se caso desejar colocar o código em seu site, pode ficar avontade ! ;P

Esclarecendo:

* O que teve de “novo” no código foi o:
.children(“img”) -> que serve para selecionar o filho ex: “<div id=pai> <img src=”imagem.jpg” id=filho></div>”
.attr(“src”) -> retorna o conteudo de src=”imagem.jpg“  | .attr(“id”) -> retorna o id | .attr(‘class’) -> estilo! etc etc ..
*O script ainda não pega as imagens em AJAX .. Mas fico devendo um POST só sobre isso, Prometo que quando eu chegar na aula de AJAX com vocês estarei mostrando ..

O LINK do EXEMPLO on-line

O que me motiva a fazer esses exemplos são os comentários .. ^^
Até o próximo Post !

Eventos

Olá pessoal, estou aqui de novo para postar mais um aula pra vocês!

A aula de hoje é Eventos!

O que é evento ?
é simplesmente uma determinada ação …

no Javascript puro aplicamos assim :

<div id=links>
<a href=javascript:; onclick="minhafuncao()"> clique aqui</a>
</div>

Ao você clicar ele realizará a função de nome “minhafuncao”. essa função mostra a <div id=divdafuncao>.

Beleza! Mas iremos mostrar é no jquery. como que se faz ?
primeiro passo é tomar uma referência de onde você está (vamos supor que só tenha esse link na <div id=links>) então faremos assim:

<script>
$(document).ready(function(){
$('#links a').click(function(){ // aqui selecionamos a tag "a" dentro da div id=links e quando clicarmos realizará a função..
$('#divdafuncao').show('slow'); // mostrando a id=divdafuncao !
});
});
</script>

Então qual é a vantagem ?
a vantagem é que seu código ficará muito mais organizado e você não vai mais precisar encher seu HTML de comandos javascript, que deixa a pagina mais pessada e esse códigos atrapalha muito na hora da programação dinâmica. Pois como vimos no código, nós selecionamos pelo jQuery que suporta o “Xpath do CSS”  quase que por inteiro (*Ainda terá um artigo só sobre isso)!

Evento .hover – Se lembra do onMouseOver e onMouseOut ?

então vamos ver direto no exemplo para facilitar:

<script>
$(document).ready(function(){
$("#links a").hover(function(){ //primeira function -> onMouseOver
$('#divdafuncao').show('slow'); // mostrando a id=divdafuncao !
},function(){ // segunda function -> onMouseOut
$('#divdafuncao').hide('slow'); // escondendo a id=divdafuncao !
});
});
</script>

Evento .toggle
É idêntico ao .hover só difere pois o toggle utiliza o click para mudar para a segunda function.

<script>
$(document).ready(function(){
$("#links a").toogle(function(){ // Primeiro click
$('#divdafuncao').show('slow'); // mostrando a id=divdafuncao !
},function(){ // segundo Click
$('#divdafuncao').hide('slow'); // escondendo a id=divdafuncao !
});
});
</script>

E para outros eventos utilizamos o .bind

$('#links a').bind("mousemove", function(){ // quando mover o mouse
$('#divdafuncao').show('slow');
});

Todos ou eventos com o .bind:
blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

é pessoal, por hoje é só !

Vou deixar uma demontração on-line para vocês tirarem suas dúvidas. aqui:
>> DEMONSTRAÇÃO AQUI!<<
Outro bom link para consulta:
http://docs.jquery.com/Events

Apresentação

Aí pessoal,  não sou nenhum jQueryman, mas estou aqui para compartilhar alguns conhecimentos  que adquiri.
os exemplos serão feitos em: PHP.

Vou deixar alguns links  úteis para o inciar o blog :

www.jquerybrasil.com

www.alexandremagno.net/

http://docs.jquery.com/Main_Page

http://docs.jquery.com/Downloading_jQuery
Fiquem na paz,  mãos na obra ! …