Javascript + jQuery

Desenvolvimento Web:
do básico ao deploy
Módulo II - Javascript e jQuery

Um slide de história

1995

vbscript mocha
internet explorer netscape

JAVASCRIPT
https://developer.mozilla.org/en/JavaScript/Reference

Criar variáveis.

var instrutor = “Harry”;
var nota_aluno = 9.0;
var odeia_windows = true;
var idade = 22;

Ponto e Vírgula no final !!!

Funções Globais

alert(“Oi Sebastian!”);

var answer = confirm(“Ta na FATEC ?”);

var age = prompt(“Sua idade:”);

Arrays

var x = [“zero”,“um”,“dois”];

x[2]; // dois

x.length; // 3

x.reverse();

Funções

function nome (var1, var2) {};

function soma (num1, num2) {
return num1 + num2;
};

Carregando jQuery na sua página

Por arquivo

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

Google CDN

<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/
jquery/1.6.3/jquery.min.js"> </script>

http://docs.jquery.com/Downloading_jQuery

DOM
Document Object Model

<html>
<head>
<title>Javascript Rules</title>
</head>
<body>
<h1>Javascript é muito D+ !</h1>
<p class=‘souracker’>
Eu gosto de Javascript por que é hype!
</p>
<p id=‘noob’>
Eu gosto de Javascript por causa do JAVA no nome.
</p>
</body>
</html>

Seletores do jQuery

Por nome de elemento

$(“h1”); <h1>Javascript é muito D+ !</h1>

$(“p”); Eu gosto de Javascript por que é hype!
</p>

<p id=‘noob’>
Eu gosto de Javascript por causa do JAVA no nome.
</p>

Seletores do jQuery

Por classe

$(“p.souracker”); Eu gosto de Javascript por que é hype!
</p>

CSS !!!!
Elemento + . + nome da classe

Seletores do jQuery

Por ID

<p id=‘noob’>
$(“p#noob”); Eu gosto de Javascript por causa do JAVA no nome.
</p>

CSS !!!!

Elemento + # + nome do ID

Seletores do jQuery

Espaço

$(“p#noob”); é diferente de $(“p #noob”);

$(“p#noob”);
Seleciona o elemento p com ID “noob”
$(“p #noob”);
Seleciona qualquer elemento com ID
“noob” dentro de p

Seletores do jQuery

Múltiplos elementos

$(“p#noob, p.souracker”);

Manipulando CSS

$(“p”).css(“font-size”,“24px”);

$(“p”).hasClass(“plan”);

$(“p:first”).addClass(“bigger”);

$(“p:first”).removeClass(“bigger”);

$(“p:first”).toggleClass(“bigger”);

Visibilidade

$(“p:first”).hide();

$(“p:first”).show();

$(“p:first”).toggle();

$(“p:first”).hide(“slow”);
com animação!
$(“p:first”).show(“fast”);

$(“p:first”).toggle(“slow”);

Eventos

$(“p”).click();

$(“p”).hover();

$(“p”).keypress();

Funções anônimas

function(){
alert(“Não tenho nome!”);
}

Animações

$(“p”).slideDown();

$(“p”).slideUp();

$(“p”).slideToggle();

$(“p”).fadeIn();

$(“p”).fadeOut();

$(“p”).fadeToggle();

Javascript + jQuery

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (9)

Semelhante a Javascript + jQuery

Semelhante a Javascript + jQuery (20)

Javascript + jQuery

Notas do Editor