Sítios Web II [SW2]

jQuery

ProfºEduardo Pezutti

http://maverick.td.utfpr.edu.br/slides/sw2 link

jQuery

Tudo o que aprendemos até agora de JavaScript continua valendo, porém, vamos poder fazer "coisas" que só com JS ia ser complicado.

  • jQuery é uma biblioteca JS
  • jQuery é simples de aprender
  • jQuery simplifica a programação em JS
Exemplo do poder de jQuery

▼

O que é o jQuery?

jQuery é uma biblioteca JavaScript leve. O objetivo do jQuery é torná-lo mais fácil de usar JavaScript em seu site. Com o slogan: "escrever menos, fazer mais"

jQuery também simplifica muito as coisas complicadas de JavaScript, como chamadas AJAX e manipulação DOM.

O que o jQuery faz?

A biblioteca jQuery contém as seguintes características:

  • HTML / DOM manipulação
  • Manipulação CSS
  • Métodos de eventos HTML
  • Efeitos e animações
  • AJAX

Dica: Além disso, jQuery tem muitos plugins

Por que jQuery?

Existem muitos outros frameworks JavaScript lá fora, mas jQuery parece ser o mais popular, e também o mais extensível.
Muitas das maiores empresas sobre o uso jQuery Web, tais como:

  • Google
  • Microsoft
  • IBM
  • Netflix

A equipe que manter o jQuery, se preocupa que ele funcione em TODOS os navegadores, deste o IE 6* até hoje. (Isto para a versão 1.x, NÃO a 2.x)

Começando com o jQuery

Para prepara-lo para ser usado, tem duas formas, ou pegando o código js ou via CDN (Content delivery network) 

<head>
<script src="jquery-1.11.1.min.js"></script>
</head>

Incluindo apartir de um CDN 

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js""></script>
</head>

Muitos usuários já baixaram jQuery do Google ou da Microsoft ao visitar outro site. Como resultado, ele será carregado a partir do cache, quando eles visitam seu site, o que leva a tempo de carregamento mais rápido.

Como escrever jQuery

Sintaxe básica é: $( selector ).ação()

  • O $ assinar para definir / acessar jQuery
  • O ( selector ) para "query (ou encontrar)" elementos HTML
  • Uma ação() a ser executada com o elemento (s)

Achando os elementos

jQuery usa a mesma forma de achar (seletores) que o CSS 


$("p") // Seleciona todos as marcações <p>
$("#test") // Seleciona o elemento com id = test
$(".test") // Seleciona os elementos que tem a class = test
Teste 1, Teste 2 e Teste 3

Os eventos

Todas as ações do visitante em um site são chamados de eventos.
Exemplos:

  • mover o mouse sobre um elemento
  • selecionando um botão de rádio
  • clicar em um elemento

.click()


$("p").click(function(){
$(this).hide();
});
Teste

.dblclick()


$("p").dblclick(function(){
$(this).hide();
});
Teste

.mouseenter()


$("#p1").mouseenter(function(){
alert("You entered p1!");
});
Teste

.mouseleave()


$("#p1").mouseleave(function(){
alert("Mouse down over p1!");
});
Teste

.mouseup()


$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
Teste

.hover()


$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
Teste

.focus()


$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
Teste

.blur()


$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
Teste

ProfºEduardo Pezutti

epsantos@utfpr.edu.br link