Jump to content

POWERED BY:

Archived

This topic is now archived and is closed to further replies.

Fabyo

JQuery

By Fabyo, in Javascript

Recommended Posts

Fabyo    66

Fabyo
Posted

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:

<script type="text/javascript" src="jquery.js"></script>

 

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:

Site Oficial

Documentação Oficial

Documentação II

Plug-ins

API-Browser

 

alguns exemplos:

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

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

http://motherrussia.polyester.se/docs/tablesorter/

http://makoomba.altervista.org/grid/

http://kawika.org/jquery/checkbox/

http://acko.net/dev/farbtastic

http://kelvinluck.com/assets/jquery/datePicker/

http://dev.iceburg.net/jquery/jqDnR/

http://projects.sevir.org/storage/jpanview/index.html

http://www.texotela.co.uk/code/jquery/numeric/

http://jquery.bassistance.de/tooltip/

http://sorgalla.com/projects/jcarousel/exa...2carousels.html

http://medienfreunde.com/lab/innerfade/

http://users.tpg.com.au/j_birch/plugins/superfish/

http://code.google.com/p/jqwebext/wiki/ZebraTableExtension

http://www.appelsiini.net/~tuupola/jquery/...basic_usage.php

http://joshhundley.com/teditable/index.html

http://www.consulenza-web.com/jquery_plugins/validation.html

http://jquery.bassistance.de/validate/demo-test/

http://www.pixeline.be/experiments/jqUploader/test.html

http://www.learningjquery.com/

http://codylindley.com/blogstuff/js/jquery/#

http://www.malsup.com/jquery/corner/

http://www.reindel.com/blog/src/jquery_slider_v1.1/

http://steintafel.ch/jquery/1/demo2.html

http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html

http://medienfreunde.com/lab/innerfade/

http://www.reach1to1.com/sandbox/jquery/jqchart/

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

http://interface.eyecon.ro/demos/windows.html

http://33rockers.com/jquery/iframe-demo/

http://www.willjessup.com/sandbox/jquery/r...or/rotator.html

http://www.kelvinluck.com/assets/jquery/styleswitch/

http://www.texotela.co.uk/code/jquery/tooltipdemo/

http://www.ajax-master.com/Ajax/JQuery/

 

 

 

outros artigos sobre JQUERY:

http://www.vitorprado.com/

http://www.vitorprado.com/jquery_brasil/

http://simplesideias.com.br/redescobrindo-...ipt-com-jquery/

http://www.tuliofaria.net/categoria/jquery/

 

espero que gostem, se der eu posto mais exemplos praticos com JQUERY

Share this post

Link to post
Share on other sites

Fabyo    66

Fabyo
Posted

mais uma curiosidade com JQUERY

 

http://jquery.com/blog/2006/10/18/zebra-table-showdown/

 

nesse exemplo o cara mostrou como zebrar linhas de uma tabela usando as principais frameworks da WEB

exemplo, Yahoo, Dojo, Prototype, Mochikit, mootools, etc..

veja que a JQUERY faz tudo isso em 1 linha apenas

 

Sou fã do JQUERY cada vez mais = )

Share this post

Link to post
Share on other sites

Fabyo    66

Fabyo
Posted

Pessoal pra quem curte o jquery e seus plugins sabe que temos inumeros plugins para facilitar nossa vida exemplo de alguns:

 

jquery.tablesorter.js

jcheckbox.js

jquery.editable.js

jquery.validate.js

jquery-enter2tab.js

jqwebext.js

jquery.cookie.js

jquery.dom.js

jquery.array.js

jquery-require.js

etc...

sem contar os inumeros js de utilidade que o interface usa

 

entao para facilitar mais ainda a vida e evitar que inclua inumeros js que as vezes você nem vai usar, eu criei uma função para incluir o js de acordo com sua necessidade, utilizei da mesma ideia do .NET, e do Framework Prado para utilização de funções ou no php quando você quer usar uma função propria você inclui um arquivo, no meu exemplo só chamar a função e passar o nome do plugin que você quer usar na hora exe: using("tablesorter");

 

a função:

 

jquery.system.js

document.write('<script type="text/javascript" src="js/jquery.js"></script>');	

function using(js) {
if(typeof js == "undefined") return false;

if(typeof js == "string") {	
	if(js.search(",") != "-1") {
		var arr = js.split(",");
		for(var i = 0; i < arr.length; i++) {
			document.write('<script type="text/javascript" src="js/jquery.'+ $.trim(arr[i]) +'.js"></script>');	
		}
	} else {
		document.write('<script type="text/javascript" src="js/jquery.'+ $.trim(js) +'.js"></script>');	
	}		
}	
}

 

modo de usar:

 

<script type="text/javascript" src="js/jquery.system.js"></script>
<script type="text/javascript">
using("tablesorter");
$(document).ready(function() {		
try{			
	$("#tabela").tableSorter();			
} catch (e) {
	alert(e);
} 	
});
</script>

 

nesse exemplo eu to usando o plugin tablesorter

se precisar usar mais só usar assim:

using("tablesorter");
using("editable");
using("validate");

 

ou:

using("tablesorter,editable,validate");

 

o legal é que sua pagina nao precisa mais ficar incluido os plugins ficara sempre fixa assim:

 

<script type="text/javascript" src="js/jquery.system.js"></script>

 

 

pessoal quem quiser dar alguma sujestão ou critica só postar.

Share this post

Link to post
Share on other sites

Suissa    1

Suissa
Posted

Grandeee Fabyogrande ideia esse js vei, grande mao na roda aqui pq estou encontrando mtos plugins utilissimosvaleuuu!

Share this post

Link to post
Share on other sites

Svierzoski    0

Svierzoski
Posted

Olá Fabyo,

 

Estou usando o Tigra, e cai num probleminha.

 

Quando uso arquivo .php ele valida, mais quando estou usando FRAME ele nao acha o .js por acaso você consegue me dar uma luz

 

Valeu

Share this post

Link to post
Share on other sites

vixnu    0

vixnu
Posted

Olá preciso de uma ajuda. Tenho esse script que faz a soma dos campos e tenho que alterar para fazer  (1A*1B)+(2A+2B), multiplicar a quantidade de banheiros pela metragem de piso e somar com a quantidade de quartos multiplicada pela metragem dos quartos para saber quanto de pisos preciso no total.

 

<script src="jquery.js"></script>
 

<script>
$(document).ready(function() {
 
$(".soma").bind("blur change check", function() {
total = 0;
 
$("input[type='checkbox']:checked,input[type='radio']:checked").each(function() {
total+=parseFloat($(this).val());
});
 
$(".soma").each(function() {
if( $(this).attr('type')=='text' || $(this).is('select') ) {
total+=parseFloat($(this).val());
}
});
 
$("#input_resultado").val(total.toFixed(2));
$("#resultado").html(total.toFixed(2));
});
 
});
</script>

 

 

 

 

<html>

1A) Quantos Banheiros tem sua casa?

<select class="soma">
<option value="0">selecione</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

 

<br><br>

 

1B) E quantos m2 tem o piso dos seus banheiros?

<select class="soma">
<option value="0">selecione</option>

<option value="5">5m²</option>
<option value="4">4m²</option>
<option value="3">3m²</option>
</select>

 

<br><br>

 

2A) Quantos Quartos tem sua casa?

<select class="soma">
<option value="0">selecione</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

 

<br><br>

 

2B) E quantos m2 tem o piso dos seus quartos?

<select class="soma">
<option value="0">selecione</option>

<option value="5">5m²</option>
<option value="4">4m²</option>
<option value="3">3m²</option>
</select>

 

 

<br><br>
TOTAL de M² de piso de quartos e banheiros (1A*1B)+(2A+2B) <input type="text" id="input_resultado" name="" value="0,00">
</form>

 

 

Obrigado se alguém souber :)

 

Share this post

Link to post
Share on other sites
Go To Topic Listing Javascript
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept