• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Jquery - Apresentação e aplicação prática
 

Jquery - Apresentação e aplicação prática

on

  • 2,237 views

 

Statistics

Views

Total Views
2,237
Views on SlideShare
2,237
Embed Views
0

Actions

Likes
0
Downloads
39
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Jquery - Apresentação e aplicação prática Jquery - Apresentação e aplicação prática Presentation Transcript

    • jQuery David R. Lopes J. Teles Maciel Jovan Ângelo Paulo A . França
    • Introdução  Framework Javascript;  Nasceu em 2005;  Licença: MIT ou GPL;  Não é o único framework javascript; Tema: Write Less, Do More
    • Para que serve: 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 CSS3. Texto integralmente retirado de http://pt.wikipedia.org/wiki/JQuery
    • Quanto "pesa" um framework?  O framework Jquery na sua versão 1.4 (minificado) pesa 24kb ! Para seu projeto você pode baixar o Jquery em : www.jquery.com ou importar a biblioteca diretamente do Google, deste modo: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    • O que você precisa saber pra começar?  Você tem que ter o DOM (carregado) pra usar jQuery;  XHTML e Javascript;  Seletores CSS2 e CSS3 (já são previstos no jQuery) podem te ajudar! jQuery é fácil: A biblioteca se baseia na chamada de apenas uma função e tem 24kb. Vamos por a mão na massa?
    • Esquentando com “Hello World” 1.Baixe a mais nova versão do JQuery, atualmente 1.4.2; 2.Crie um arquivo teste.html; 3.Coloque o jquery-1.4.2.js no mesmo diretório do teste.html e importe a biblioteca;
    • Esquentando com “Hello World”
    • Esquentando com “Hello World”
    • Explicando o código $("a") é um Selector do jQuery que seleciona elementos "a" O $ é como se assemelha a uma "classe" em jQuery $() portanto "instancia" um objeto jQuery .click() é invocado quando ocorre um click do mouse em um elemento selecionado; O código sem jQuery: Separação de JS e HTML! Eliminação de código redundante! <3 jQuery.
    • Agora cumpriremos uma missão em jQuery
    • Missão 1: Mudar o site da fatecsjc Baixamos o site fatecsjc.edu.br usando wget e iremos aplicar alterações nele via jQuery para que mais meninas se interessem por nossa faculdade: Eis o site baixado:
    • Missão 1: Mudar o site da fatecsjc + = ... alteracoes.js
    • Missão cumprida. Vamos ver o novo leiaute
    • Novo leiaute
    • Explicando o código.
    • Jquery é mais que manipulação do DOM Jquery tem diversas outras potencialidades:  Ajax simplificado:  Métodos $.ajax, $.getJSON, $.get e etc...  Garantia de funcionar nos mais diversos navegadores;  Documentação extensa e atualizada;  Comunidade forte e muitos entusiastas;  Utilizado em muitos sites famosos como Google Search, IBM.com, Mozzila.com, etc..;  Validação de formulários no cliente;  Muitos, muitos e muitos plugins.
    • Plugins ver jquerylist.com
    • Leitura recomendada  Melhore seu código jQuery (25 dicas) [EN] http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx  08 plugins jQuery que usam apis da Google(EN): http://www.reynoldsftw.com/2009/03/8-jquery-plugins-that-utilize-google-apis/  31 snippets de jQuery (EN): http://addyosmani.com/blog/31-jquery-snippets/  Anatomia de um plugin jQuery http://www.tableless.com.br/anatomia-de-um-plugin-jquery
    • Referências  [1]http://docs.jquery.com/Main_Page;  [2]http://docs.jquery.com/Sites_Using_jQuery  [3]http://jquerylist.com/  [4]http://www.tutorialspoint.com/jquery/jquery-quick-guide.htm