O jQuery é uma biblioteca Javascript, leve e cross-browser, suportada por vários tipos de navegadores, desktop ou de dispositivos móveis. Quando programamos.

Apresentação em tema: "O jQuery é uma biblioteca Javascript, leve e cross-browser, suportada por vários tipos de navegadores, desktop ou de dispositivos móveis. Quando programamos."— Transcrição da apresentação:

1

2 O jQuery é uma biblioteca Javascript, leve e cross-browser, suportada por vários tipos de navegadores, desktop ou de dispositivos móveis. Quando programamos utilizando Javascript, uma linguagem side-client, normalmente utilizamos um código grande. A proposta do jQuery é fazer mais e escrever menos, simplificando linhas de comando, fazendo com que o trabalho do programador diminua.

3 O jQuery possui código fonte aberto e utiliza duas licenças, a GNU e a MIT, permitindo seu uso em softwares livres e proprietários de forma gratuita. A biblioteca nasceu em 2006 no BarCamp (uma conferência em rede) em Nova Iorque. Com ele podemos criar animações, manipular eventos e objetos, e trabalhar com AJAX de maneira simples e descomplicada.

4 Várias empresas mantém o jQuery, dentre elas, a Microsoft, que utiliza a biblioteca no seu Visual Studio, para utilização com o.NET Nokia, Adobe, Mozilla, Palm

5 Além da escrita aprimorada de Javascript, o jQuery possui plugins, escrito por terceiros, que podem realizar diversas tarefas, dentre elas: –Animações, podemos criar banners animados tão bons quanto os criados em Flash –Interfaces, como Datepickers, Tabs dentre outros elementos. –Baseado em HTML 5 e CSS 3 –Acessibilidade

6 O que é necessário para se programar utilizando o jQuery? –Conhecimento de Javascript –Conhecimento em DOM (Modelo de Objeto de Documento) – alterar os objetos da página de forma dinâmica Como utilizar? –Faça o download da versão mais nova do jQuery em www.jquery.comwww.jquery.com

7 Ele possui um arquivo.js, escrito em linguagem Javascript, que será inserido no HEAD da página HTML que fará a utilização do mesmo. Se formos utilizar plugins, provavelmente teremos mais arquivos.js, arquivos.css e até imagens. http://ajax.googleapis.com/ajax/libs/jquery/ 1.10.1/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/ 1.10.1/jquery.min.js

8

9 O jQuery pode ler e manipular os Objetos DOM da página Deve funcionar somente quando o DOM estiver pronto

10

11 Adicionar uma função no clique de um botão. O $ nada mais é que o apelido para o objeto jQuery

12 Documentação jQuery: http://api.jquery.com http://api.jquery.com

13 Com o jQuery podemos construir animações utilizando os objetos da página

14

15

16

17

18 Plugin seria uma extensão ou uma função do jQuery, desenvolvida por um terceiro Os plugins normalmente são desenvolvidos para efetuar uma determinada tarefa Um exemplo de plugin muito utilizado é o lightBox para Ampliar imagens e o cycle para Banners animados Existem milhares de plugins de jQuery Normalmente existe uma página, com a documentação e o download do plugin

19 lightBox –http://leandrovieira.com/projects/jquery/lightbo xhttp://leandrovieira.com/projects/jquery/lightbo x Cycle –http://malsup.com/jquery/cycle/http://malsup.com/jquery/cycle/ –http://jquery.malsup.com/cycle2http://jquery.malsup.com/cycle2 Colorbox –http://www.jacklmoore.com/colorbox/http://www.jacklmoore.com/colorbox/ –http://code.alexweber.com.br/memorygame/http://code.alexweber.com.br/memorygame/

20 Datepicker –http://keith-wood.name/datepick.htmlhttp://keith-wood.name/datepick.html Easing –http://gsgd.co.uk/sandbox/jquery/easing/http://gsgd.co.uk/sandbox/jquery/easing/ EasyTip –https://code.google.com/p/jquery-easytip/https://code.google.com/p/jquery-easytip/ jWysiwyg –http://jwysiwyg.github.io/jwysiwyg/http://jwysiwyg.github.io/jwysiwyg/

21 prettyPhoto –http://www.no-margin-for- errors.com/projects/prettyPhoto-jquery-lightbox- clone/http://www.no-margin-for- errors.com/projects/prettyPhoto-jquery-lightbox- clone/ superFish (menus) –http://users.tpg.com.au/j_birch/plugins/superfish/http://users.tpg.com.au/j_birch/plugins/superfish/ Animelt –http://grsabreu.github.io/Animelt-Plugin/http://grsabreu.github.io/Animelt-Plugin/ jQuery Validation –http://jqueryvalidation.org/http://jqueryvalidation.org/

22 jQuery AddressPicker –http://xilinus.com/jquery- addresspicker/demos/index.htmlhttp://xilinus.com/jquery- addresspicker/demos/index.html Autocomplete –http://jquery.bassistance.de/autocomplete/de mohttp://jquery.bassistance.de/autocomplete/de mo Fancybox –http://fancybox.net/http://fancybox.net/ Parallax –http://stephband.info/jparallax/http://stephband.info/jparallax/