SlideShare uma empresa Scribd logo
1 de 23
Baixar para ler offline
Jquery
  Framework Javascript para
desenvolvimento web poderoso e
           dinâmico!
Realização



WebLovers
<%=  “Por  uma  Web  mais  apaixonante”  %>
http://www.grupoweblovers.co.cc
Quem Somos

Allyson Barros - @allysonbarros
Graduando em Análise e Desenvolvimento de Sistemas - IFRN
Empreendedor e Desenvolvedor Rails da Actual Solutions
Idealizador do Grupo WebLovers - http://
grupoweblovers.co.cc
allysonbarrosrn@gmail.com - allyson_barros_irm@hotmail.com
Quem Somos

Daniele Montenegro - @lelybarros
Bacharel em Ciências Sociais pela UFRN
Graduanda em Análise e Desenvolvimento de Sistemas - IFRN
Idealizadora do Grupo WebLovers - http://grupoweblovers.co.cc
monte.daniele@gmail.com - danie_monte@hotmail.com
Quem Somos

Elionai Moura - @eli_embits
Graduando em Análise e Desenvolvimento de Sistemas - IFRN
Empreendedor e Desenvolvedor PHP da EmBits
Idealizador do Grupo WebLovers - http://grupoweblovers.co.cc
nicklegal@gmail.com - eli_ml@hotmail.com
Quem Somos


Giancarlo Lima - @giancarlozero
Graduando em Análise e Desenvolvimento de Sistemas - IFRN
Idealizador do Grupo WebLovers - http://grupoweblovers.co.cc
giancarlozero@gmail.com - giancarlozero@yahoo.com.br
O que é?

jQuery é um framework para ajudar os
desenvolvedores a se concentrarem na lógica
dos sistemas da web e não nos problemas de
incompatibilidade dos navegadores atuais.
É uma poderosa biblioteca JavaScript criada
para simplificar a criação de efeitos visuais e
de interatividade em web sites.
Seu lema é: "Escrever menos e fazer mais".
Principais Vantagens
Compatibilidade 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 facilmente com AJAX e DOM.

Implementação segura de recursos do CSS1,
CSS2 e CSS3.
It`s ShowTime! Ou melhor,
        CodeTime!




       http://www.liquisdesign.com/blog/wp-content/uploads/2010/04/
                          web_coding_collage.jpg
Os primeiros passos!
Os primeiros passos!
window.onload = function(){
  alert("welcome");
}


Antes - Javascript Puro - Boring!


$(document).ready(function(){
       // Your code here
});


Depois - Jquery - Cool!
Seletores de Elementos
 Outras Referências: http://api.jquery.com/category/selectors/



 $(document)

 $(“*”)

 $(“#idElemento”)

 $(“.classeElemento”)

 $(“element”) Ex.: $(“a”), $(“div”), $(“ul li”)

 $(“parent > child”) Ex.: $("ul.topnav > li")
Seletores de Elementos
       Outras Referências: http://api.jquery.com/category/selectors/


var element = document.getElementById("lista-ordenada");
element.setAttribute("class", "sem-estilo");


Antes - Javascript Puro - Boring!


var element = $("#lista-ordenada");
element.addClass("sem-estilo");

                                   ou
$("#lista-ordenada").addClass("sem-estilo");


Depois - Jquery - Cool!
Manipuladores de Eventos
  Outras Referências: http://api.jquery.com/category/events/



 .blur()                  .focusout()               .ready()

 .change()                .hover()                  .resize()

 .click()                 .keydown()                .scroll()

 .dblclick()              .keypress()               .select()

 .focus()                 .keyup()                  .submit()

 .focusin()               .load()
Manipuladores de Eventos
          Outras Referências: http://api.jquery.com/category/events/


 function displayDate() {
   alert(new Date());
 }

 <button type="button" onclick="displayDate()">Display Date</button>




Antes - Javascript Puro - Boring!


 $("button").click(displayDate());

Depois - Jquery - Cool!
Manipuladores de Atributos
 Outras Referências: http://api.jquery.com/category/attributes/




 .addClass()                            .attr()
 .hasClass()                            .removeAttr()
 .removeClass()                         .html()
 .toggleClass()                         .val()
Manipuladores de Elementos
    Outras Referências: http://api.jquery.com/category/manipulation/


.addClass()                  .detach()                     .prepend()

.after()                     .empty()                      .remove()

.append()                    .height()                     .replaceAll()

.attr()                      .html()                       .text()

.before()                    .insertAfter()                .val()

.clone()                     .insertBefore()               .width()

.css()                       .position()                   .wrap()
Manipuladores de Efeitos
     Outras Referências: http://api.jquery.com/category/effects/



.animate()                 .fadeOut()                     .slideToggle()

.clearQueue()              fadeToggle()                   slideUp()

.delay()                   .hide()                        .stop()

.dequeue()                 .queue()                       .toggle()

.fadeIn()                  .show()

.fadeOut()                 .slideDown()
Perguntas?
Agradecimentos!
Confira o código completo dos
       exemplos em:


 www.github.com/
 grupoweblovers
Não deixem de se cadastrarem no
    nosso grupo de estudos!

 www.grupoweblovers.co.cc
Obrigado!

Mais conteúdo relacionado

Mais procurados

JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersHarlley Oliveira
 
Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0Saulo Vallory
 
JQuery para Iniciantes
JQuery para IniciantesJQuery para Iniciantes
JQuery para IniciantesRenato Asterio
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o JavascriptMichel Ribeiro
 
ZF Básico - 6. Autenticação
ZF Básico - 6. AutenticaçãoZF Básico - 6. Autenticação
ZF Básico - 6. AutenticaçãoMarcos Bezerra
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanosnobios
 
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...MIRA - Um framework Javascript para construção de interfaces adaptativas em a...
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...Ezequiel Bertti
 
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webHenrique Gogó
 
jQuery básico (parte 2)
jQuery básico (parte 2)jQuery básico (parte 2)
jQuery básico (parte 2)Luís Cobucci
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jqueryYuri Costa
 
JavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamentoJavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamentoRicardo Valeriano
 
Javascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksJavascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksBruno Abrantes
 

Mais procurados (20)

JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
jQuery na Prática!
jQuery na Prática!jQuery na Prática!
jQuery na Prática!
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
 
Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0
 
Introdução a jQuery
Introdução a jQueryIntrodução a jQuery
Introdução a jQuery
 
Aprenda jQuery 1.3
Aprenda jQuery 1.3Aprenda jQuery 1.3
Aprenda jQuery 1.3
 
JQuery para Iniciantes
JQuery para IniciantesJQuery para Iniciantes
JQuery para Iniciantes
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
ZF Básico - 6. Autenticação
ZF Básico - 6. AutenticaçãoZF Básico - 6. Autenticação
ZF Básico - 6. Autenticação
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
 
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...MIRA - Um framework Javascript para construção de interfaces adaptativas em a...
MIRA - Um framework Javascript para construção de interfaces adaptativas em a...
 
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações web
 
jQuery básico (parte 2)
jQuery básico (parte 2)jQuery básico (parte 2)
jQuery básico (parte 2)
 
Introdução à JQuery
Introdução à JQueryIntrodução à JQuery
Introdução à JQuery
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
 
Escrevendo plugins JQuery
Escrevendo plugins JQueryEscrevendo plugins JQuery
Escrevendo plugins JQuery
 
JavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamentoJavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamento
 
Jquery a technical overview
Jquery a technical overviewJquery a technical overview
Jquery a technical overview
 
Javascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksJavascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworks
 

Semelhante a Palestra - Iniciando no Jquery

Jquery - Dicas e Truques
Jquery - Dicas e TruquesJquery - Dicas e Truques
Jquery - Dicas e TruquesLambda 3
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.jsGiovanni Bassi
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com JqueryDanilo Sousa
 
Mini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeMini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeVictor Cavalcante
 
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Evandro Klimpel Balmant
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o JavascripMiquéias Amaro
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryMarketing Digital ODIG
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontMichel Ribeiro
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfGabrielaMota46
 
Tutorial sobre Jquery
Tutorial sobre JqueryTutorial sobre Jquery
Tutorial sobre JqueryIvo Calado
 
Rafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em açãoRafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em açãoRafael Garcia
 
Sigle Page Application - A nova Web
Sigle Page Application - A nova WebSigle Page Application - A nova Web
Sigle Page Application - A nova WebVictor Cavalcante
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajoliCaue Fajoli
 

Semelhante a Palestra - Iniciando no Jquery (20)

Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
 
Jquery - Dicas e Truques
Jquery - Dicas e TruquesJquery - Dicas e Truques
Jquery - Dicas e Truques
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com Jquery
 
Mini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeMini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/Globalcode
 
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
 
Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
 
Introdução ao JQuery e AJAX
Introdução ao JQuery e AJAXIntrodução ao JQuery e AJAX
Introdução ao JQuery e AJAX
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
 
Tutorial sobre Jquery
Tutorial sobre JqueryTutorial sobre Jquery
Tutorial sobre Jquery
 
Rafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em açãoRafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em ação
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 
Sigle Page Application - A nova Web
Sigle Page Application - A nova WebSigle Page Application - A nova Web
Sigle Page Application - A nova Web
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
 

Palestra - Iniciando no Jquery

  • 1. Jquery Framework Javascript para desenvolvimento web poderoso e dinâmico!
  • 2. Realização WebLovers <%=  “Por  uma  Web  mais  apaixonante”  %> http://www.grupoweblovers.co.cc
  • 3. Quem Somos Allyson Barros - @allysonbarros Graduando em Análise e Desenvolvimento de Sistemas - IFRN Empreendedor e Desenvolvedor Rails da Actual Solutions Idealizador do Grupo WebLovers - http:// grupoweblovers.co.cc allysonbarrosrn@gmail.com - allyson_barros_irm@hotmail.com
  • 4. Quem Somos Daniele Montenegro - @lelybarros Bacharel em Ciências Sociais pela UFRN Graduanda em Análise e Desenvolvimento de Sistemas - IFRN Idealizadora do Grupo WebLovers - http://grupoweblovers.co.cc monte.daniele@gmail.com - danie_monte@hotmail.com
  • 5. Quem Somos Elionai Moura - @eli_embits Graduando em Análise e Desenvolvimento de Sistemas - IFRN Empreendedor e Desenvolvedor PHP da EmBits Idealizador do Grupo WebLovers - http://grupoweblovers.co.cc nicklegal@gmail.com - eli_ml@hotmail.com
  • 6. Quem Somos Giancarlo Lima - @giancarlozero Graduando em Análise e Desenvolvimento de Sistemas - IFRN Idealizador do Grupo WebLovers - http://grupoweblovers.co.cc giancarlozero@gmail.com - giancarlozero@yahoo.com.br
  • 7. O que é? jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais. É uma poderosa biblioteca JavaScript criada para simplificar a criação de efeitos visuais e de interatividade em web sites. Seu lema é: "Escrever menos e fazer mais".
  • 8. Principais Vantagens Compatibilidade 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 facilmente com AJAX e DOM. Implementação segura de recursos do CSS1, CSS2 e CSS3.
  • 9. It`s ShowTime! Ou melhor, CodeTime! http://www.liquisdesign.com/blog/wp-content/uploads/2010/04/ web_coding_collage.jpg
  • 11. Os primeiros passos! window.onload = function(){ alert("welcome"); } Antes - Javascript Puro - Boring! $(document).ready(function(){ // Your code here }); Depois - Jquery - Cool!
  • 12. Seletores de Elementos Outras Referências: http://api.jquery.com/category/selectors/ $(document) $(“*”) $(“#idElemento”) $(“.classeElemento”) $(“element”) Ex.: $(“a”), $(“div”), $(“ul li”) $(“parent > child”) Ex.: $("ul.topnav > li")
  • 13. Seletores de Elementos Outras Referências: http://api.jquery.com/category/selectors/ var element = document.getElementById("lista-ordenada"); element.setAttribute("class", "sem-estilo"); Antes - Javascript Puro - Boring! var element = $("#lista-ordenada"); element.addClass("sem-estilo"); ou $("#lista-ordenada").addClass("sem-estilo"); Depois - Jquery - Cool!
  • 14. Manipuladores de Eventos Outras Referências: http://api.jquery.com/category/events/ .blur() .focusout() .ready() .change() .hover() .resize() .click() .keydown() .scroll() .dblclick() .keypress() .select() .focus() .keyup() .submit() .focusin() .load()
  • 15. Manipuladores de Eventos Outras Referências: http://api.jquery.com/category/events/ function displayDate() { alert(new Date()); } <button type="button" onclick="displayDate()">Display Date</button> Antes - Javascript Puro - Boring! $("button").click(displayDate()); Depois - Jquery - Cool!
  • 16. Manipuladores de Atributos Outras Referências: http://api.jquery.com/category/attributes/ .addClass() .attr() .hasClass() .removeAttr() .removeClass() .html() .toggleClass() .val()
  • 17. Manipuladores de Elementos Outras Referências: http://api.jquery.com/category/manipulation/ .addClass() .detach() .prepend() .after() .empty() .remove() .append() .height() .replaceAll() .attr() .html() .text() .before() .insertAfter() .val() .clone() .insertBefore() .width() .css() .position() .wrap()
  • 18. Manipuladores de Efeitos Outras Referências: http://api.jquery.com/category/effects/ .animate() .fadeOut() .slideToggle() .clearQueue() fadeToggle() slideUp() .delay() .hide() .stop() .dequeue() .queue() .toggle() .fadeIn() .show() .fadeOut() .slideDown()
  • 21. Confira o código completo dos exemplos em: www.github.com/ grupoweblovers
  • 22. Não deixem de se cadastrarem no nosso grupo de estudos! www.grupoweblovers.co.cc