Publicado em 9 de abr.

JQuery

Ola pessoal resolvi postar esse tutorial. Porque eu me senti muito confortável em desenvolver em javascript depois que eu descobri a excelente lib. JQUERY, eu já gostava muito de javascript, mas por não ter muito conhecimento e por não conseguir um material de estudo completo e detalhado eu fazia o que eu sabia fazer sem saber se tava certo ou se tinha um jeito melhor, diferente de programar em PHP que eu tenho um domínio bem maior e sempre to estudando e pesquisando para evoluir e aprender fazer as mesmas coisas de uma forma mais pratica e eficiente, eu tentei fazer a mesma coisa com javascript, mas não obtive sucesso porque como já falei eu acho javascript muito fácil de aprender, mas não tem uma documentação boa, por exemplo deve existir um monte de tags ou funções em javascript que eu desconheço eu ate gostaria de conhecer tudo mas ainda não consegui.

Dai descobrindo o JQUERY a coisa mudou, pois ela faz exatamente o que eu gosto de fazer, que é praticidade e poucas linhas de código, em php eu consigo fazer muitas funções simplificadas e em uma linha ou poucas linhas

E usando JQUERY eu consegui fazer muitas funções que antes eu usava umas 50 linhas ficar em poucas linhas coisa que eu vou mostrar logo abaixo.

Pra você que não conhece nada de javascript você poder começar aprender com JQUERY que você vai conseguir fazer muita coisa senão tudo que precisa fazer sem precisar ficar copiando códigos prontos de outros.

E para aqueles que conhecem javascript e não conhecem o JQUERY vai perceber que ela veio para facilitar a vida e é muito melhor usar ela, basta baixala do site oficial e inclui-la na sua pagina exemplo:

Bom chega de papo e vamos ao que interessa.

Começando do inicio que é ao carregar uma pagina completamente para depois fazer alguma coisa com ela

Famoso "Hello World" quando abrimos uma pagina:

de qualquer jeito:

<script type="text/javascript">
alert('Ola Mundo');
</script>

Modo tradicional:

<script type="text/javascript">
window.onload = function() {
alert('Ola Mundo');
}
</script>

Testando esses exemplos ira aparecer uma caixa de dialogo com a frase "Ola Mundo"

Só que dependendo do que você quer fazer na pagina não é recomendado você usar "window.onload", porque ele executa e não espera a pagina terminar de carregar.

Então pode ser que você esteja querendo interagir com algum objeto da pagina e ele nem existe ainda, causando um erro.

Dai existe uma solução para isso criada por Scott Andrew-LePara:

<script type="text/javascript">
function Alerta() {
 alert('Ola Mundo');
}

function addEvent(obj, evType, fn) {
 if (typeof obj == "string") {

if (null == (obj = document.getElementById(obj))) {

 throw new Error("Cannot add event listener: HTML Element not found.");
}
 }
 if (obj.attachEvent) {
return obj.attachEvent(("on" + evType), fn);
 } else if (obj.addEventListener) {
return obj.addEventListener(evType, fn, true);
 } else {
throw new Error("Your browser doesn't support event listeners.");
 }
}

addEvent(window, "load", Alerta);
</script>

Apesar de o código ficar bem maior que o 1º exemplo, ele é muito recomendado e funcional como já explicado.

Agora usando JQUERY :

> <script type="text/javascript">$(document).ready(function() {

 alert('Ola Mundo');

});

</script>

O exemplo acima é o mesmo que o 2º exemplo ele também espera a pagina ser toda carregada só que muito mais pratico pra ser usado no dia dia.

apartir de agora em qualquer função javascript iremos começar com esse ultimo exemplo.

agora outro exemplo simples clicando em algum botao e mostrar a mensagem "Ola Mundo"

muitos usando javascript obstrusivo, que é usar os eventos nas proprias tags html, com JQUERY usaremos "javascript não obstrusivo", ou seja nao escrevemos nada nas tags html deixando o codigo super limpo e valido no W3C

<input type="button" name="botao" id="botao" value="Clique Aqui" onclick="java script: alert('Ola Mundo');" />

clicando no botao ira aparecer a mensagem "Ola Mundo"

usando onclick é o que eu falei acima javascript não obstrusivo é nao ter que escrever nada nas tags html exemplo onclick, onblur, onkeypress, etc.

um exemplo disso:

<script type="text/javascript">
window.onload = function() {
var botao = document.getElementById("botao");
botao.onclick = function() {
	alert('Ola Mundo');
}
}
</script>

<input type="button" name="botao" id="botao" value="Clique Aqui" />

como você pode ver nao escrevi nada no botao e sim usei uma função separada pra isso

agora usando JQUERY:

<script type="text/javascript">
$(document).ready(function() {
$("#botao").click(function(){
	alert('Ola Mundo');
});
});
</script>

<input type="button" name="botao" id="botao" value="Clique Aqui" />

por enquanto nao é nada "fantastico", mas com outros exemplos voce vai ver a facilitade do JQUERY

agora ate para evitar que o tutorial fique muito grande irei mostrar só exemplos usando JQUERY.

exemplo bem pratico:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[@type=checkbox]").click(function(){
	alert('Voce clicou no checkbox' + this.name);
});
});
</script>

<input type="checkbox" name="check1" id="check1" value="1" /><br />
<input type="checkbox" name="check2" id="check2" value="1" /><br />
<input type="checkbox" name="check3" id="check3" value="1" /><br />
<input type="checkbox" name="check4" id="check4" value="1" /><br />
<input type="checkbox" name="check5" id="check5" value="1" /><br />
<input type="checkbox" name="check6" id="check6" value="1" />

como pode ver com apenas 1 linha eu tenho o controle de todas as checkbox, assim eu sei qual o usuario clicou

como voce pode ver $("input[@type=checkbox]") eu posso pegar qualquer campo do formulario

exemplos diversos:

$("input[@type=text]")

$("input[@type=select]")

$("select[@name=campo]")

$("input[@type=checkbox]").bind("click", function(){

 

});

$("input[@type=radio][@checked]")

$("p:first").css("fontWeight","bold");

$("p").addClass("nome_da_classe")

$("p").removeClass("nome_da_classe")

etc.

e para pegar qualquer elemento vai uns exemplos:

$("#campo") usando # eu pego os elemento id do campo ou objeto

$(".campo") usando . eu pego os elemento "class" do campo ou objeto

posso misturar tambem por exemplo:

$("table thead th").each(function() {

 

});

outro exemplo com checkbox (selecionar todas):

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("p").toggle(function(){
	$("input[@type=checkbox]").each(function(){this.checked = true;});
},function(){
	$("input[@type=checkbox]").each(function(){this.checked = false;});
});
});
</script>
<style>

p {

cursor:pointer;
text-decoration: underline;
}
</style>
<p>Seleciona Todas</p>
<input type="checkbox" name="check1" id="check1" value="1" /><br />
<input type="checkbox" name="check2" id="check2" value="1" /><br />
<input type="checkbox" name="check3" id="check3" value="1" /><br />
<input type="checkbox" name="check4" id="check4" value="1" /><br />
<input type="checkbox" name="check5" id="check5" value="1" /><br />
<input type="checkbox" name="check6" id="check6" value="1" />

mais uma dica para saber se um checkbox esta selecionado:

$("#nome_check:checked") ou

$("#nome_check").is(":checked")

links:

alguns exemplos:

http://jquery.com/demo/thickbox/

http://www.stilbuero.de/jquery/tabs/