SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Downloaden Sie, um offline zu lesen
jQuery
A biblioteca javascript




     Diogo Benicá
Escreva menos
  Faça mais
Encontrar   elementos em um HTML

 Alterar    conteúdo HTML

 Ouvir      ações do usuário

 Animar     conteúdo HTML

Conversar   com outras páginas/sistemas
Javascript!
   Mas antes...
DOM
                           html
<html>
  <head>                      head
    <title>
       Meu título                    title
    </title>
  </head>                              Meu título
  <body>
    <h1>Notícias</h1>         body
    <p>
       Primeira notícia              h1
    </p>                               Notícias
  </body>
</html>
                                      p
                                       Primeira notícia
Porém, os navegadores tem
pequenas diferenças no DOM
Exemplos
 Legenda
     Não!


     Evitar


     Yeah!
Encontrar     elementos em um HTML


                      html
<body>
 <a href=”#” id=”meu_link” class=”classe_do_link”>
</body>


                     jQuery

  $(“a”)                      $(“#meu_link”)

  $(“.classe_do_link”)        $(“a.classe_do_link”)
Alterar    conteúdo HTML

                  html
<body>
 <span id=”meu_texto”>Hello jQuery!</span>
</body>

                  jQuery

$(“#meu_texto”).html(“Hello!”)

$(“#meu_texto”).append(“Hello!”).width(170)

$(“#meu_input”).val(“jQuery”)
Ouvir      ações do usuário

                  html
      <a href=”#” id=”meu_link”>

                 jQuery

$(“#meu_link”).click( function(){
   $(“#login-box”).show();
   $(“#login-box > p”).html(“Bem-vindo!”);
});
Animar   conteúdo HTML

           html
 <div id=”minha_box”></div>

           jQuery

$(“#meu_link”).animate({
  opacity: 0.25,
  left: “+=50”,            Com plugin
  backgroundColor: “red”
});
Conversar      com outras páginas/sistemas

                      servidor
    GET        http://site.com/produtos      json


                       jQuery

$.getJSON(“http://site.com/produtos”, function(dados){
   //dados é o retorno
   $.each(dados, function(){
       // Loop para cada item que retornou no json
   });
);
$.getJSON(“http://site.com/produtos”, função)




                       atalho para




   $.ajax({
     dataType: “json”,
     url: “http://site.com/produtos”,
     success: função
   });
Fim

Weitere ähnliche Inhalte

Was ist angesagt?

Php 03 Sessoes Cookies Cabecalhos
Php 03 Sessoes Cookies CabecalhosPhp 03 Sessoes Cookies Cabecalhos
Php 03 Sessoes Cookies CabecalhosRegis Magalhães
 
IBM - Apresentando jQuery
IBM - Apresentando jQueryIBM - Apresentando jQuery
IBM - Apresentando jQueryAlberto Leal
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersHarlley Oliveira
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataDiego Eis
 
Aula 11 - Controle de sessão em PHP - Programação Web
Aula 11  - Controle de sessão em PHP - Programação WebAula 11  - Controle de sessão em PHP - Programação Web
Aula 11 - Controle de sessão em PHP - Programação WebDalton Martins
 
React e Ratchet, async e websockets com PHP, por Gabriel Couto
React e Ratchet, async e websockets com PHP, por Gabriel CoutoReact e Ratchet, async e websockets com PHP, por Gabriel Couto
React e Ratchet, async e websockets com PHP, por Gabriel CoutoiMasters
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webDiego Eis
 
Criando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.jsCriando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.jsHenrique Gogó
 

Was ist angesagt? (13)

Javascript + jQuery
Javascript + jQueryJavascript + jQuery
Javascript + jQuery
 
jQuery na Prática!
jQuery na Prática!jQuery na Prática!
jQuery na Prática!
 
Php 03 Sessoes Cookies Cabecalhos
Php 03 Sessoes Cookies CabecalhosPhp 03 Sessoes Cookies Cabecalhos
Php 03 Sessoes Cookies Cabecalhos
 
Bloco 5.3
Bloco 5.3Bloco 5.3
Bloco 5.3
 
IBM - Apresentando jQuery
IBM - Apresentando jQueryIBM - Apresentando jQuery
IBM - Apresentando jQuery
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
Aula 5 php
Aula 5 phpAula 5 php
Aula 5 php
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked Data
 
Aula 11 - Controle de sessão em PHP - Programação Web
Aula 11  - Controle de sessão em PHP - Programação WebAula 11  - Controle de sessão em PHP - Programação Web
Aula 11 - Controle de sessão em PHP - Programação Web
 
React e Ratchet, async e websockets com PHP, por Gabriel Couto
React e Ratchet, async e websockets com PHP, por Gabriel CoutoReact e Ratchet, async e websockets com PHP, por Gabriel Couto
React e Ratchet, async e websockets com PHP, por Gabriel Couto
 
XML - Parte 4
XML - Parte 4XML - Parte 4
XML - Parte 4
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
 
Criando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.jsCriando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.js
 

Andere mochten auch

Andere mochten auch (10)

Introdução Programação de Aplicações Web
Introdução Programação de Aplicações WebIntrodução Programação de Aplicações Web
Introdução Programação de Aplicações Web
 
Boston bombing from the New York Times
Boston bombing from the New York TimesBoston bombing from the New York Times
Boston bombing from the New York Times
 
Question 3
Question 3Question 3
Question 3
 
The human mannequin
The human mannequinThe human mannequin
The human mannequin
 
Multiplication 2
Multiplication   2Multiplication   2
Multiplication 2
 
Problems around greece
Problems around greeceProblems around greece
Problems around greece
 
Presentajuan
PresentajuanPresentajuan
Presentajuan
 
Blog q3
Blog q3Blog q3
Blog q3
 
Fractions
FractionsFractions
Fractions
 
Análise dos Modelos de Recuperação de Informação
Análise dos Modelos de Recuperação de InformaçãoAnálise dos Modelos de Recuperação de Informação
Análise dos Modelos de Recuperação de Informação
 

Ähnlich wie jQuery - A biblioteca javascript

Ähnlich wie jQuery - A biblioteca javascript (20)

Introdução a Desenvolvimento Web
Introdução a Desenvolvimento WebIntrodução a Desenvolvimento Web
Introdução a Desenvolvimento Web
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
HTML e CSS para pequenas gafanhotas
HTML e CSS para pequenas gafanhotasHTML e CSS para pequenas gafanhotas
HTML e CSS para pequenas gafanhotas
 
Php aula1
Php aula1Php aula1
Php aula1
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
 
Palestra / Efeitos Espetaculares Em Dhtml / SDD
Palestra / Efeitos Espetaculares Em Dhtml / SDDPalestra / Efeitos Espetaculares Em Dhtml / SDD
Palestra / Efeitos Espetaculares Em Dhtml / SDD
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
 
Introdução ao JQuery e AJAX
Introdução ao JQuery e AJAXIntrodução ao JQuery e AJAX
Introdução ao JQuery e AJAX
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 

jQuery - A biblioteca javascript

  • 2. Escreva menos Faça mais
  • 3. Encontrar elementos em um HTML Alterar conteúdo HTML Ouvir ações do usuário Animar conteúdo HTML Conversar com outras páginas/sistemas
  • 4. Javascript! Mas antes...
  • 5. DOM html <html> <head> head <title> Meu título title </title> </head> Meu título <body> <h1>Notícias</h1> body <p> Primeira notícia h1 </p> Notícias </body> </html> p Primeira notícia
  • 6. Porém, os navegadores tem pequenas diferenças no DOM
  • 7.
  • 8. Exemplos Legenda Não! Evitar Yeah!
  • 9. Encontrar elementos em um HTML html <body> <a href=”#” id=”meu_link” class=”classe_do_link”> </body> jQuery $(“a”) $(“#meu_link”) $(“.classe_do_link”) $(“a.classe_do_link”)
  • 10. Alterar conteúdo HTML html <body> <span id=”meu_texto”>Hello jQuery!</span> </body> jQuery $(“#meu_texto”).html(“Hello!”) $(“#meu_texto”).append(“Hello!”).width(170) $(“#meu_input”).val(“jQuery”)
  • 11. Ouvir ações do usuário html <a href=”#” id=”meu_link”> jQuery $(“#meu_link”).click( function(){ $(“#login-box”).show(); $(“#login-box > p”).html(“Bem-vindo!”); });
  • 12. Animar conteúdo HTML html <div id=”minha_box”></div> jQuery $(“#meu_link”).animate({ opacity: 0.25, left: “+=50”, Com plugin backgroundColor: “red” });
  • 13. Conversar com outras páginas/sistemas servidor GET http://site.com/produtos json jQuery $.getJSON(“http://site.com/produtos”, function(dados){ //dados é o retorno $.each(dados, function(){ // Loop para cada item que retornou no json }); );
  • 14. $.getJSON(“http://site.com/produtos”, função) atalho para $.ajax({ dataType: “json”, url: “http://site.com/produtos”, success: função });
  • 15. Fim