Ano: 2022

UFCD 0154 – Stilos em CSS

Formador: Liliana Oliveira

Ficha de trabalho nº 13

Acedam a https://www.w3schools.com/jquery/default.asp e respondam, no documento word às

seguintes questõs.

Depois de efetuarem o trabalho associem o ficheiro obtido à tarefa no TEAMS.

1. O que é o JQUERY?

O JQuery é um grande arquivo .js que possui muitos métodos e objetos pré-construídos que
simplificam nosso fluxo de trabalho.

2. Como podemos associar o JQUERY às nossas páginas HTML?

Primeiro é necessário importar os arquivos , depois realizar o seguinte comando:

$(document).ready(function() {
alert("Você está executando a versão do jQuery: " + jQuery.fn.jquery);
});

3. Qual a Sintaxe base do JQuey?

$ (selector).action()

4. O que é o “Document Ready Event”?

$(document).ready() é um evento em jQuery que é disparado apenas quando todo o DOM está
totalmente carregado e pronto para ser manipulado por jQuery. Este evento document.ready é para
evitar que qualquer código jQuery seja executado antes que o documento seja concluído de carregar
(está pronto). Este é o ponto seguro mais antigo do processo de carregamento de página onde
podemos manipular nossos elementos DOM. Isso permite que você escreva seu código jQuery (ou
JavaScript) antes da tag body.

5. Os Seletores JQUERY são uma das partes mais importantes da biblioteca. Identifica-os.

1
 6. $(.class)
7. $(.id)
8. $(“p”)
9. $("*"), Selects all elements, Try it
10. $(this), Selects the current HTML element,
11. $("p.intro"), Selects all <p> elements with class="intro",
12. $("p:first"), Selects the first <p> element,
13. $("ul li:first"), Selects the first <li> element of the first <ul>,
14. $("ul li:first-child"), Selects the first <li> element of every <ul>,
15. $("[href]"), Selects all elements with an href attribute,
16. $("a[target='_blank']"), Selects all <a> elements with a target attribute value equal to
"_blank", $("a[target!='_blank']"), Selects all <a> elements with a target attribute value NOT
equal to "_blank", $(":button"), Selects all <button> elements and <input> elements of
type="button",
17. $("tr:even"), Selects all even <tr> elements,
18. $("tr:odd"), Selects all odd <tr> elements,

19. Quais são os Métodos utilizados pelo JQUERY para reagir a eventos?

$(elemento).click(function()

20. Identifica e dá exemplos de código associados aos eventos JQUERY:

• jQuery Hide/Show

Esconder ou mostrar elementos HTML:

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

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

• jQuery Fade

Esvanecer um elemento:

$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

• jQuery Slide

Criar um elemento que por efeito rolar ou baixar:

2
$("#flip").click(function(){
$("#panel").slideDown();
});

• jQuery Animate

Cria uma animação customizada de um elemento CSS

$( "#clickme" ).click(function() {

$( "#book" ).animate({

opacity: 0.25,

left: "+=50",

height: "toggle"

}, 5000, function() {

// Animation complete.

});

});

• jQuery stop()

Parar animação:

$(document).ready(function(){
$(".b1").click(function(){
var div = $("div");
div.animate({height: 150}, "slow");
div.animate({right: "+=200",left: "+=100" }, "slow");
div.queue(function(){
div.dequeue();
});
div.animate({height: 50}, "slow");
div.animate({right: "100", left: "100" }, "slow");
$(".b2").click(function(){
$("div").stop();
});
});
});

• jQuery Callback

FunçãO Callback é paa retornar a função após uma animação.

$("button").click(function(){
$("p").hide("slow", function(){

3
 alert("The paragraph is now hidden");
});
});

• jQuery Chaining

Realiza múltiplas operações em um elemento em uma única instrução:

let gfg = {

geek: function(){

alert('called geek method');

return gfg;

},

write: function(){

alert('called write method');

return gfg;

},

destroy: function(){

alert('called destroy method');

return gfg;

21. Através de métodos o JQUERY consegue facilmente manipular o HTML Caracteriza cada um
dos métodos seguintes e inclui nessa caracterização exemplos de utilização.
• jQuery Get

Busca dados do servidor do HTTP:

$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});

• jQuery Set

Cria um parametro para o conteudo do HTML:

4
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});

• jQuery Add

Adiciona elemento no conjunto do SET:

$(selector).add(element,context)

• jQuery Remove

Remove elementos e conteúdo:

$("#div1").remove();

• jQuery CSS Classes

Manipular classes CSS :

$(document).ready(function(){ $("button").click(function(){ $("h1").removeClass("page-

header"); $("p").removeClass("hint highlight"); }); });

• jQuery css()

Retorna um ou mais estilos de CSS:

$("p").css("background-color", "yellow");

• jQuery Dimensions

Trabalha com as dimensões de elementos e janelas de brownser:

$(document).ready(function() {

$("button").click(function() {

var txt = "";

txt += "Width of div: " + $(".geeks").width() + "</br>";

txt += "Height of div: " + $(".geeks").height();

$(".geeks").html(txt);

});

});

5
 22. O Jquery permite-nos mover ao longo dos nossos elementos HTML, através de propriedade
“Traversing”. Em que consiste esta propriedade?

jQuery Traversing, que significa "mover-se", são usados para "encontrar" (ou selecionar) elementos
HTML com base em sua relação com outros elementos.

23. Relativamente ao conceito anterior existem outros conceitos associados como ascendentes,
descendentes. Desenvolve os seguintes conceitos e apresenta simultaneamente exemplos.
• jQuery Traversing

$('selector expression').each(callback function);

• jQuery Ancestors
• $(document).ready(function(){
$("li").parents().addClass("frame"); });
• jQuery Descendants
• $(document).ready(function(){
$("ul").children().addClass("highlight"); });
• jQuery Siblings
• $(document).ready(function(){
$("li.start").siblings().css({"color": "red", "border": "2px
solid red"});
});
• jQuery Filtering

$(document).ready(function(){
$("div").first();
});

24. O JavaScript AJAX é a arte de trocar dados com um servidor, e atualizar partes de uma
página web - sem recarregar toda a página. Responde às seguintes questões.

• O que é o JQUERY AJAX?

Ele é um conjunto de técnicas de desenvolvimento voltado para a web que permite que
aplicações trabalhem de modo assíncrono, processando qualquer requisição ao servidor em
segundo plano.

• Quais são os métodos associados ao JQuery Ajax (ver Jquery Load, Jquery Get/Post).

6
 O jQuery.Load possibilita receber um container, que é uma espécie de âncora onde iremos
informar qual dos containers desejamos que apareça no quadrante. Isso possibilita que
geremos containers dentro de uma única página que queremos carregar no jQuery.Load.

<script>
$(function () {
$("#div1").load('devMediaIframe.html', sucessCallBack);
});
function sucessCallBack(a) { }
</script>

25. Acede a https://www.w3schools.com/jquery/jquery_ref_selectors.asp e faz um breve

resumo dos Seletores JQuery.

jQuery seletores permitem selecionar e manipular elemento (s) HTML.

26. Acede a https://www.w3schools.com/jquery/jquery_ref_events.asp e faz um br4eve resumo

dos métodos apresentados.

Os métodos de evento acionam ou anexam uma função a um manipulador de eventos para os

elementos selecionados.

27. Acede a https://www.w3schools.com/jquery/jquery_ref_effects.asp e faz um breve resumo

dos métodos aí apresentados.

Criação de animação

7
 28. Acede a https://www.w3schools.com/jquery/jquery_ref_html.asp e faz um breve resumo
dos métodos aí apresentados.

O método jQuery html () é usado para definir o conteúdo ou devolver o conteúdo dos elementos
selecionados.

29. Acede a https://www.w3schools.com/jquery/jquery_ref_traversing.asp e faz um breve

resumo dos métodos aí apresentados.

jQuery Traversing, que significa "mover-se", são usados para "encontrar" (ou selecionar) elementos
HTML com base em sua relação com outros elementos.

8
30. Acede a https://www.w3schools.com/jquery/jquery_ref_misc.asp e faz um breve resumo
dos métodos aí apresentados.

31. Acede a https://www.w3schools.com/jquery/jquery_ref_misc.asp e faz um breve resumo

dos métodos aí apresentados.

9
32. Acede a https://www.w3schools.com/jquery/jquery_ref_prop.asp e faz um breve resumo
dos métodos aí apresentados.

10