foi desenvolvida... para criar animações, manipular eventos e desenvolver aplicações AJAX

Tamanho: px

Começar a partir da página:

Download "foi desenvolvida... para criar animações, manipular eventos e desenvolver aplicações AJAX"

Kevin Macedo de Sequeira
8 Há anos
Visualizações:

2 foi desenvolvida... para criar animações, manipular eventos e desenvolver aplicações AJAX é uma biblioteca Java Script crossbrowser desenvolvida para simplificar os scripts que interagem com a linguagem HTML; é usada por mais de 55% dos sites mais visitados do mundo!

3 Jquery funcionalidades resolução da incompatibilidade entre os navegadores; redução de código; reutilização do código através de plugins. utilização de uma vasta quantidade de plugins criados por outros desenvolvedores. trabalha com AJAX e DOM; implementação segura de recursos do CSS1, CSS2 e CSS

4 as marcas HTML são desenhadas usando um esquema que é conhecido como boxmodel que específica 3 componentes externos ao elemento que a marca representa: margin, border e padding. a propriedade margin representa o espaço entre a moldura do elemento e o elemento seguinte. a propriedade border representa a moldura do elemento. a propriedade padding representa o espaço interno entre a moldura do elemento e o elemento propriamente dito. estas propriedades pode ser alteradas apenas para um dos lados do elemento se acrescentarmos à propriedade os termos: -top, -bottom, -left e -right. as 3 propriedades aceitam como valor um tamanho; no caso da propriedade border é ainda possível indicar o estilo e a cor da moldura. os estilos são: solid, dotted, dashed, double, groove, ridge, inset and outset; nem todos estes estilos são interpretados da mesma forma pelos diferentes browsers. Cascading Style Sheet Folhas de Estilo em Cascata CSS

5 margin border padding TOP LEFT conteúdos.. width height RIGHT BOTTOM diagrama do box model. modelo de formatação visual BoX MoDeL

6 HTML... <div></div> <p>texto contido parágrafo. Lorem...</p> </div>... CSS body {margin: 0; padding: 0; font-size:20px;} div { width: 440px; background: #999; margin: 45px 40px 5px 50px; padding: 15px 30px 10px 0; } P { text-align: justify; background: #ccc; margin: 20px 20px 20px 40px; padding: 15px 30px 10px 0; } a área da margin é sempre transparente! BoX MoDeL

7 what you see is what you get... WySiWYg

8 sites são criados com o uso de editores (X)HTML... um editor de texto simples... um editor de imagens de rastreio... um programa para visualizar sites na internet... ferramentas... WeBSitEs

9 extensible Hyper Text Markup Language recomendação tradução das recomendações w3c (X)HTML para estruturar e CSS para apresentar W3C

10 regra CSS seletor { propriedade: valor } declaração seletor é o alvo da regra CSS; é a TAG do elemento da marcação que define com precisão em qual lugar da marcação será aplicada a regra CSS. declaração determina os parâmetros de estilização. propriedade define qual será a característica do elemento a ser estilizada. valor é a quantificação ou qualificação da propriedade. Cascading Style Sheet Folhas de Estilo em Cascata CSS

11 p { color: #000; background-color: #ff0; font-style: italic; text-aligh: right; } ou p { color: #000; background-color: #ff0; font-style:italic; text-aligh: right} o ; é facultativo no caso de propriedade única ou após a declaração da última propriedade no caso de mais de uma! CSS

12 com... CSS

13 sem... CSS

14 exercício 1 CSS

15 exercício 2 CSS

16 Jquery código código em Javascript puro para atribuir a uma id o valor "5 document.getelementbyid( 'Teste' ).value = 5; o mesmo código em jquery $( '#Teste' ).val( 5 );

17 seletores Jquery escondendo <p> <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); </head> <body> <h2>this is a heading</h2> <p>this is a paragraph.</p> <p>this is another paragraph.</p> <button>click me</button> </body> </html>

18 seletores Jquery escondendo id= test <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); </head> <body> <h2>this is a heading</h2> <p>this is a paragraph.</p> <p id="test">this is another paragraph.</p> <button>click me</button> </body> </html>

19 seletores Jquery escondendo um elemento HTML <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $(this).hide(); </head> <body> <h2>this is a heading</h2> <p>this is a paragraph.</p> <p>this is another paragraph.</p> <button>click me</button> </body> </html>

20 eventos Jquery demostrando um evento com clique <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); </head> <body> <p>if you click on me, I will disappear.</p> <p>click me away!</p> <p>click me too!</p> </body> </html>

21 eventos Jquery demostrando um evento com mouse over <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script> $(document).ready(function(){ $("#p1").hover(function(){ alert("you entered p1!"); }, function(){ alert("bye! You now leave p1!"); </head> <body> <p id="p1">this is a paragraph.</p> </body> </html

22 Jquery hide/show <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); $("#show").click(function(){ $("p").show(); </head> <body> <p>if you click on the "Hide" button, I will disappear.</p> <button id="hide">hide</button> <button id="show">show</button> </body> </html>

23 Jquery fadeout fadein fade Toggle <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeout(); $("#div2").fadeout("slow"); $("#div3").fadeout(3000); </head> <body> <p>demonstrate fadeout() with different parameters.</p> <button>click to fade out boxes</button> <br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> </html>

24 Jquery fadeto <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeto("slow",0.15); $("#div2").fadeto("slow",0.4); $("#div3").fadeto("slow",0.7); </head> <body> <p>demonstrate fadeto() with different parameters.</p> <button>click to fade boxes</button> <br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> </html>

25 Jquery slidedown slideup slidetoggle <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slidedown("slow"); <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <div id="flip">click to slide down panel</div> <div id="panel">hello world!</div> </body> </html>

26 obrigada!

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