.png)
JQUERY SIMPLES
Introdução
Olá pessoal blz? hoje estarei postando algo muito simples sobre jquery, vou colocar a tag a tag básicona da jquery para vocês aprender como utilizar. Acho que esse vai ser o menor post do blog, vamos ver o que vai dar rsrrs.
O começo
Pra que serve? jquery é uma biblioteca java script que serve para web, com o intuito de criar animações (se bem que da pra criar animações com css...) mas vamos lá, graças a jquery também são criados os games que você encontra por ai, então essa biblioteca é muito importante para um maior profissionalismo no seu site e até também nem profissionalismo mas sim para facilitar sua vida em algum pepinos pra resolver na programação.
Baixando
Para você colocar a biblioteca jquery no seu site você precisa baixar ela. que é de uma forma bem simples, acesse o site jquery.com e clique em download
lá irá aparecer alguns linques, tem até a do google, eu escolho sempre a primeira, então faça isso, a diferença entre elas é que a do google é usada para coisas do google plugins entre outros (mas funciona normal em qualquer site) as outras é so a jquery com um código simplificado, ou organizado, ou seja tanto faz pra quem ta começando ok? Quando você clicar no link ele vai abrir uma página cheia de código javascript, copie tudo e cole no bloco de notas do computador e salve como jquery.js feito isso esta pronto para você usar essa belezinha!!!! Aêêêêee...
Abrindo o html
Novamente vamos abrir o html e agora vamos colocar o link para puxar a biblioteca jquery para seu site, esse link lembrando vamos colocar dentro da head pois é la que fica a inteligência do site ok?e também vamos criar um script para a gente manipular essa jquery dentro da head também.
<head>
<script src="jquery.js"></script>
<script>
</script>
</head>
O Código em Si.
Agora vamos digitar o código da jquery para a manipulação é muito simples mas qualquer erro pode não funcionar ok?
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
//aqui dentro você vai colocar os códigos para manipular imagens paginas entre outros.
})
</script>
</head>
Aplicação.
Vamos usar em uma div id teste, ela vai aparecer lentamente na tela, esse será o efeito que iremos colocar. Vamos usar um pouco de css então prepare os dedos.
<div id="teste"></div> essa é a div que ficará dentro da body.
div criada certo? então vamos chamar uma css interno para colorir essa div que criamos agora, lembrando que essa css ficará dentro da head na tag style que iremos criar.
<style>
#teste{width:968px;
height:150px;
background:red;
margin:0 auto;}
</style>
Fiz o básico, pintei coloquei largura e altura, e centralizei com a css, agora vamos para a jquery que também está na head.
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('#teste').hide();
$('#teste').show(5000);
})
</script>
Aqui eu puxei a div através do $('#teste') e coloquei um parâmetro hide que é para ele sumir.. abaixo coloquei um parâmetro show para ele aparecer e coloquei para ele aparecer demorado com o valor de 5000 ficando todo o código dessa forma.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title do documento</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('#teste').hide();
$('#teste').show(5000);
})
</script>
<style>
#teste{width:968px;
height:150px;
background:red;
margin:0 auto;}
</style>
</head>
<body>
<div id="teste"></div>
</body>
</html>
Pronto está pronto seu primeiro código Jquery!! que beleza em??
0 comentários:
Olá amigo, tudo bem com você?