J query javascript para seres humanos

JavaScript para seres humanos

Everson Santos
Araujo
everson@vuse.com.br
http://everson.com.br http://vuse.com.br

JavaScript

• Linguagem de alto nível criada para ser executada pelo
navegador de internet e oferecer interatividade à
documentos HTML

• Hoje existe em aplicações desktop, móveis e servidores

2

jQuery

• Biblioteca JavaScript rápida, pequena e com vastos recursos

• Possui uma interface fácil de usar e que funciona igualmente
na grande maioria dos navegadores

• CDN Google

• //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

4

HTML - DOM

<html>
<head>
<title>Título</title>
</head>
<body>
<h1>Teste</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>

5

HTML - DOM
document

html

head title Título
<html>
<head>
<title>Título</title> body h1 Teste
</head>
<body> ul li Item 1
<h1>Teste</h1>
<ul>
<li>Item 1</li> li Item 2
<li>Item 2</li>
</ul>
</body>
</html>

6

HTML - DOM
document

html

head title Título

body h1 Teste

ul li Item 1

li Item 2

$('ul').append('<li>Item 3</li>'); li Item 3

7

HTML - DOM
document

html

head title Título

body h1 Teste

ul li Item 1

li Item 2

$('h1').remove(); li Item 3

8

Antes de continuar...
Não serão apresentadas todas as
funções disponíveis na biblioteca

As funções iniciadas com $ são
chamadas diretamente sem
precisar ser direcionada com um
seletor obrigatório
recomendado
A utilização de parâmetros será
identificada com cores opcional

9

Seletores

$('#id').append('Ola!'); $('div .aqui').append('!');

$('.clas').append('Mundo'); $('li:last').append('X');

$('input[name=nome]').val('A'); $('.c1, .c2').append('?');

10

Exemplo
<html>
<head>
$('h1').hover(function() {
<style type="text/css">
$(this).toggleClass('red');
.red {
}).click(function() {
background: red;
$(this).append('<u>!!</u>');
}
});
</style>
$('input').keypress(function(e) {
</head>
console.log(e.charCode);
<body>
}).dblclick(function() {
<h1>Teste</h1>
$(this).addClass('red')
<form>
});
<input id="texto">
$('form').submit(function(e) {
<input type="submit"
e.preventDefault();
value="Enviar">
console.log('Enviar');
</form>
});
</body>
</html>
13

Efeitos

ms - tempo em milissegundo
14

Exemplo
$('#mo').click(function() {
$('div').show();
});
$('#es').click(function() {
<button id="mo">show</button> $('div').hide();
<button id="es">hide</button> });
<button id="fi">fadeIn</button> $('#fi').click(function() {
<button id="fo">fadeOut</button> $('div').fadeIn(2000);
<button id="sd">slideDo</button> });
<button id="su">slideUp</button> $('#fo').click(function() {
<div> $('div').fadeOut(2000);
<p>Lorem ipsum</p> });
<p>Lorem ipsum</p> $('#sd').click(function() {
</div> $('div').slideDown(2000);
});
$('#su').click(function() {
$('div').slideUp(2000);
});
15

Exemplo
ex.html
<button id="lo">load</button>
<button id="po">$.post</button> <h1>Exemplo</h1>
<div id="re"></div> <p>Lorem</p>

ex.php
$('#lo').click(function() {
$('#re').load('ex.html');
}); <?php
$('#po').click(function() { if (count($_POST)) {
$.post('ex.php', { echo "<h1>Dados
teste: 'Oi' recebidos</h1><ul>";
}, foreach ($_POST as $k=>$v) {
function(r) { echo "<li>" . $k . " = " . $v . "</li>";
$('#re').html(r); }
}); echo "</ul>";
}); }

17

J query javascript para seres humanos

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a J query javascript para seres humanos

J query javascript para seres humanos