PROF. DANIELA PIRES. Aplicações para Web. Aplicações para Web - FMU Prof. Daniela Pires

Tamanho: px

Começar a partir da página:

Download "PROF. DANIELA PIRES. Aplicações para Web. Aplicações para Web - FMU - 2012 - Prof. Daniela Pires"

Mirella Aires Gonçalves
8 Há anos
Visualizações:

1 PROF. DANIELA PIRES Aplicações para Web 1

2 *Oficialmente: *Uma biblioteca escrita em Javascript *Uma definição melhor: *jquery é uma Biblioteca JavaScript que simplifica a manipulação de um documento HTML de maneira rápida e concisa, serve para tratamento de eventos, movimentações, animações e interação Ajax 2

3 *jquery é designado para mudar a maneira pela qual escrevemos Javascript *Produtividade é o lema *Write less, do more. *Uma única sintaxe para os mais diversos browsers 3

4 jquery Dojo Scriptaculous Prototype 4

5 *jquerynão passa de um arquivo js *Basta baixa-lo de * Jquery.com *Inclua a biblioteca em qualquer página html * através da tag script Ex: * <script language= javascript src= <caminho do arquivo jquery> /> 5

6 *Programação tradicional window.onload= function(){ alert( bem vindo"); } *Problemas com esta codificação *O código js não executa enquanto todas as imagens não sejam carregadas, incluindo banners, etc... *Pode ser que o objeto document ainda não esteja instanciado quando o js iniciar sua execução 6

7 *Jquery padroniza o início de execução de código js através do evento ready. $(document).ready(function(){ // Escreva aqui seu código }); 7

8 *Todo código jquery está atrelado a um objeto da página. *Para escolher quais objetos serão utilizados, é preciso utilizar o seletor $ 8

9 *1º Exemplo: Selecionando todas as tags"p" de um documento e aplicando uma propriedade CSS $(document).ready(function(){ $("p").css("background", "#FFF"); }); 9

10 *2º Exemplo: Selecionando todos os elementos filho de um elemento paicom o script abaixo, selecionamos todos os elementos filho (<li>) de uma lista que esteja de esteja dentro da div #exemplo2, e aplicamos à elas uma propriedade CSS. $(document).ready(function(){ $("#exemplo2 > ulli").css("font-weight", "bold"); }); 10

11 *#id Pega os elementos pelo id. *Elemento Pega os elementos diretamente pelo nome da tag. *.class Pega os elementos pela classe que lhes foi definida. ** Pega todos os elementos da página incluindo o head, o body. *Seletor Múltiplo Pega diversos elementos, por classe, id, objeto ou como quiser. 11

12 *Pegando elemento com id idteste e inserindo algum conteudo $( #idteste ).html( Inserindo meu texto ); *Pegando os elementos inputs e inserindo value0 neles $( input ).val( 0 ); *Pega os elementos com a classe minhaclass e coloca uma borda colorida neles $(.minhaclass ).css( border, 1px solid#4d4d4d ); 12

13 *Pegar todos os elementos e deixá-los com a cor da fonte preta: $( * ).css( color, #000 ); *Pega todos os elementos div, e elementos input com a class inputclasse e coloca uma borda vermelha: $( div,input#inputclasse ).css( border, 1px solidred ); 13

14 14

15 <htmlxmlns=" <head> <script language="javascript" src="jquery min.js"></script> <script language="javascript"> $("document").ready(function() { $("a").click(function(){ $("#mensagem").text("olá mundo com jquery!!!!"); }); }); </script> </head> <body> <a href="#">clique Aqui para escrever a mensagem</a> <br><br> <div id="mensagem"></div> </body> </html> 15

16 *Use o plugin validate *As regras são *Required * *Minlenght *e muitas outras.. *É possível implementar as suas próprias rotinas de validação 16

17 *Use o plugin mask edinput *Adicione as máscaras de acordo com sua necessidade *Ex:Telefone: (99) *CEP: *CPF:

18 *UI: *Biblioteca jquery responsável por sofisticações visuais *Principais recursos *Iterações *Widgets *efeitos 18

19 *Utilizar o widget datepicker *Utilizar a iteração animate 19

20 *Parâmetros *type: *cache: *url: *data: *success: *error: 20

Documentos relacionados

jquery André Tavares da Silva andre.silva@udesc.br

jquery André Tavares da Silva andre.silva@udesc.br jquery jquery é uma biblioteca em JavaScript; Seu objetivo é simplificar a programação em JavaScript; jquery foi desenvolvida para ser de aprendizado