Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 7 – Introdução à Biblioteca jQuery Universidade Federal de Uberlândia Faculdade de Computação.

Apresentação em tema: "Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 7 – Introdução à Biblioteca jQuery Universidade Federal de Uberlândia Faculdade de Computação."— Transcrição da apresentação:

1 Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 7 – Introdução à Biblioteca jQuery Universidade Federal de Uberlândia Faculdade de Computação

2  jQuery é uma biblioteca JavaScript;  Com jQuery, muitas tarefas podem ser realizadas de maneira mais simples (quando comparado ao JavaScript puro);  Um dos fundamentos é: fazer mais, codificando menos;  A biblioteca é largamente utilizada no desenvolvimento de websites;  Executada basicamente da mesma forma pelos principais navegadores, como Google Chrome, Firefox, IE, etc. Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools 2

3  Para utilizar jQuery no website, há duas opções principais: 1.Baixar o arquivo da biblioteca no site jquery.com e incluir uma referência para o mesmo; ou 2.Incluir uma referência diretamente de uma rede CDN (Content Delivery Network), como do Google ou da Microsoft;  Na primeira opção, é possível baixar a versão compactada da biblioteca (ideal para o website já em funcionamento), ou a versão de desenvolvimento, que possui o código legível e é ideal para eventuais testes; Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools 3

4  Utilizando o arquivo da biblioteca baixada em jquery.com:  Utilizando a biblioteca de um servidor do Google: Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools 4

5  Usar a biblioteca jQuery envolve: 1.Selecionar um elemento HTML 2.Executar uma ação sobre o elemento  Sintaxe básica:  $(seletor).acao()  Exemplos:  $(this).hide() – oculta o elemento corrente;  $("p").hide() – oculta todos os elementos p;  $(".teste").hide() – oculta todos os elementos com class="teste".  $("#teste").hide() – oculta o elemento com id="teste". Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools 5

6  Os métodos em jQuery são comumente associados ao evento ready do objeto document;  Dessa forma, garantimos que as operações serão executadas apenas quando o documento HTML tiver sido complemente carregado; Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools 6 $(document).ready(function(){ // métodos jQuery... }); $(document).ready(function(){ // métodos jQuery... });

7  Os métodos em jQuery são comumente associados ao evento  script1.js Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools 7 $(document).ready(function(){ $('h1').hide(); }); $(document).ready(function(){ $('h1').hide(); }); Primeiro Parágrafo do texto Título 1 Título 2 Título 3 Primeiro Parágrafo do texto Título 1 Título 2 Título 3

8  hide()  show()  toggle()  fadeIn()  fadeOut()  fadeToggle()  fadeTo(transparencia)  slideDown()  slideUp()  slideToggle() Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools 8 $(document).ready(function(){... $("p").click(function(){ $('h1').slideDown(); }... }); $(document).ready(function(){... $("p").click(function(){ $('h1').slideDown(); }... });

9  www.w3schools.com/jquery Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools 9