Aprenda a aplicar funções a elementos como se fossem nativas

Bom sei que muita gente sofre pra tentar fazer isso, eu mesmo demorei mais de um mês, mas tudo se resolveu quando comecei a estudar programação orientada a objeto. As bibliotecas hoje fazem isso tranquilo, mas porque não aprender a fazer isso com seus próprios dedos?

Chega de papo e vamos lá.

Primeiro não colocarei um código aqui que seleciona uma div com id tal que tenha dentro uma class tal,mostrarei apenas ao básico, ou seja a raiz do problema.

Suponhamos que queremos pegar uma div com id ‘box’ e mudar seu transparência para 60%, faríamos isso

document.getElementById(id).style.opacity='0.6';//FF
Mas deixando o codigo mais limpo e bonito podemos fazer algo assim

$(‘box’).Alpha(60);
Muito mais bonito não, e ainda mais pratico, agora vamos a explicação de como isso é possivel

Criamos uma função basica que retorna o elemento com o id passado (essa todo mundo conhece)

var dom=function(id){
	return document.getElementById(id);
}

Em seguida criamos uma função que quando chamada ira atribuir a variavel id o elemento com o id passado em seu parametro

var elemento=function(id){
	this.id=dom(id);
}

this.id, isso é programação orientada a objetos. Aqui é o seguinte, chamaremos essa função dentro de uma variavel, entao o id será acessado da seguinte maneira variavel.id

explicarei isso mais adiante.

agora a famosa função $ que faz a magica acontecer

var $=function(id){
	var dom=new elemento(id);
	return dom;
}

Isso ai em cima foi o que me deu mais trabalho para desenvolver, vamos a explicação por linha

1 - Iniciamos a função $, esta função tem como parametro o id do elemento que selecionaremos

2 - Criamos uma variavel com o nome dom

Essa variavel tera como valor um novo elemento(), que é uma função que criamos acima

Repare que a função elemento() vai ter o id acessado por no nosso caso dom.id

3 - A função retorna a variavel dom que tera o elemento pronto para ser acessado

Agora um exemplo pratico de como fazer o efeito da transparencia usando o codigo acima

Na programação orientada a objeto (recomendo que estudem isso) podemos adicionar metodos, que são funções dentro da função principal (se eu estiver errado,postem ai),a qualquer momento e em qualquer lugar do codigo usando uma propriedade chamada prototype, vejamos entao como colocar a nossa função de transparencia

elemento.prototype.Alpha=function(opacity){
	this.id.style.opacity=opacity/100;
	this.id.style.filter='alpha(opacity='+opacity+');';
}

1 - Elemento é a função a que atribuiremos nossa função, isso porque ela possue o id do elemento que sera chamado mais em baixo

prototype é usado para adicionar o metodo que queremos a função, que no nosso caso o metodo Alpha

Alpha é o metodo que estamos adicionamos, que possue uma função a ser executada quando o mesmo for chamado

2 - this.id aqui é um pouco chato e complicado de explicar mas é o seguinte, na função $ chamamos a função elemento dentro da variavel dom, entao podemos dizer aqui estamos pegando o dom.id.Enato porque voce colocou this?

Nossa função elemento retornou o objeto criado, entao podemos acessa-lo livremente.

style.opacity e style.filter sao usados para colocar a transparencia no FF e IE respectivamente, enato nao explixarei isso.

Exemplo pratico

<div id="box" style="width:100px;height:100px;background:#333;"></div>
<a href="#" onClick="$('box').Alpha(60);">Alpha</a>

Espero ter ajudado pelo meno uma pessoa, e duvidas, sugestões, erro no codigo, sintam se a vontade para postarem