HowTo: jQuery

Sumário
1.	Introdução
2.	Como instalar
3.	Como começar
4.	Como simular uma acção (sinal)
5.	Métodos definidos
6.	Documentação e Links Úteis

Início

---

1. Introdução

jQuery é uma biblioteca de funções escritas em JavaScript que interage com o HTML. Tem por objectivo simplificar a escrita de scripts de JavaScript. Foi criada por John Resig em 2006.

A acção sobre os objectos da página é feita usando os tipos de objectos, as classes ou os ids respectivos e a elas são associados diversos métodos.

Muitos dos exemplos apresentados foram tirados da documentação apresentada, em especial de "www.w3schools.com".

Início

---

2. Como instalar

Pode fazer-se o download do ficheiro "jquery-____.min.js", em que os "____" dizem respeito à versão ou então pode usar-se algum link. Exemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Início

---

3. Como começar

Por regra deve esperar-se pelo completo download da página antes actual sobre ela. Assim, a acções devem ficar dependentes do ponto de partida que é "ready":

<script>
$(document).ready(function(){
    ___ O que se quiser aqui pôr ___
});
</script>

A sintaxe básica é feita do mesmo modo que nos CSS e é feita do seguinte modo:

$ (selector) .action ()

em que o "$" indica tratar-se de jQuery. "selector" é o objecto da acção, pode ser um objecto html, uma classe ou um identificador, é ainda possível usar "this" como auto-referência. "action" é a acção a ser executada. Exemplos:

• $(this).hide(): torna invisível o elemento actual.
• $("p").hide(): torna invisíveis todos os elementos "<p>".
• $(".test").hide(): torna invisíveis todos elementos com 'class="test"'.
• $("#test").hide(): torna invisível o elemento actual com 'id="test"'.

Ver mais exemplos em:

• Selectors: https://www.w3schools.com/jquery/jquery_selectors.asp
• Events: https://www.w3schools.com/jquery/jquery_events.asp

Início

---

4. Como simular uma acção (sinal)

Dada a declaração de uma certa acção com 'id' 'accaoId', para dar a ordem de execução, pode fazer-se o seguinte:

$('#accaoId').click(function(){
     alert("teste");
});
$('#accaoId').trigger('click');

Início

---

5. Métodos definidos

• click: Associa uma acção ao evento click sobre um objecto. Exemplo:

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

  Torna invisível o parágrafo em que se fez o click.
• focus: Evento que corresponde a focar-se num elemento.
  Em geral usa-se associada ao evento 'blur'. Exemplo:

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

• blur: Evento que corresponde a retirar o foco de um elemento.
  Em geral usa-se associada ao evento 'focus'. Exemplo:

  $("#c1").focus($("input").blur(function(){$(this).css("background-color", "Red")});

• hide: Torna o objecto em que questão invisível. Exemplo:

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

  Torna invisível o parágrafo em que se fez o click.
• hover: Evento que corresponde basicamente a declarar 'mouseenter' e 'mouseleave'.
  Tem dois argumentos: a acção a executar quando entra e a acção a executar quando sai. Exemplo:

  $("#c1").hover(function(){$(this).css("color", "Red")}, function(){$(this).css("color", "Black")})

• mousedown: Evento que corresponde carregar no botão do rato sobre elemento em causa. Exemplo:

  $("#c1").mousedown(function(){alert("Mouse down over c1!");});

• mouseenter: Evento que corresponde ao rato passar sobre elemento em causa. Exemplo:

  $("c1").mouseenter(function(){alert("Passou por um elemento da class "c1"!");});

• mouseleave: Evento que corresponde ao rato sair de cima do elemento em causa. Exemplo:

  $("#c1").mouseleave(function(){alert("Bye! You now leave c1!");});

• mouseup: Evento que corresponde largar o botão do rato quando está sobre elemento em causa. Exemplo:

  $("#c1").mousedown(function(){alert("Mouse down over c1!");});

• on: Este método permite associar um ou mais eventos (e respectivas acções) a um elemento. Exemplo:

  $("p").on({
      mouseenter: function(){$(this).css("background-color", "lightgray");},
      mouseleave: function(){$(this).css("background-color", "lightblue");}
  });
  

• show: Torna o objecto em que questão visível. Exemplo:

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

  Torna visível o parágrafo em que se fez o click.
• toggle: É equivalente a fazer 'hide' e 'show'. Exemplo:

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

  Torna visível o parágrafo em que se fez o click.

Início

---

6. Documentação e Links Úteis

• jQuery (main Page)
• jQuery (w3schools)

Início

---