SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
Minicurso jQuery
Instrutor: Wilker Iceri
O que é jQuery?
• É uma biblioteca JavaScript, que tem a seguinte filosofia: “Write less, do
more”.
• jQuery simplifica muitas tarefas comuns como:
• Manipulação do DOM
• Manipulação CSS
• Eventos
• Efeitos e animações
• Ajax
• e muito mais...
• É cross-browser, funciona igual em todos os navegadores (até no IE 6 o.O).
• É muito utilizado pelos desenvolvedores, e por muitas empresas de nome
como:
• Google
• Microsoft
• IBM
• Wikipédia
Instalação
• Existem duas foram de incluir a biblioteca jQuery no seu projeto:
• Baixar do próprio site da jQuery: http://jquery.com/
• Usar um repositório online como o da Google.
Acessar o exemplo
Sintaxe
• Com jQuery você seleciona um elemento HTML e algumas ações nesses
elementos.
• Sintaxe: $(seletor).action();
• $ - define o acesso ao jQuery.
• seletor – seletor utilizado para encontrar os elementos HTML (o jQuery usa os seletores CSS)
• action – método do elemento.
Acessar o exemplo
Sintaxe
Acessar o exemplo
Eventos
• A jQuery pode responder a vários tipos de eventos, como focus, blur,
mouseenter, mouseleave, etc.
Acessar o exemplo
Manipulação do DOM
• Com jQuery podemos manipular os elementos HTML muito facilmente.
• Principais métodos:
• text() – Define ou retorna o conteúdo do elemento.
• html() – Define ou retorna o conteúdo do elemento (incluindo a marcação HTML).
• val() – Define ou retorna o valor de campos de formulário.
• attr() – Define ou retorna valores para atributos HTML.
Acessar o exemplo
Manipulação do DOM
Acessar o exemplo
Manipulação de Classes
• Métodos para manipulação de classes:
• addClass() – adiciona uma ou mais classes ao elemento selecionado.
• removeClass() – remove uma ou mais classes do elemento selecionado.
• toggleClass() – Alterna entre add/remove.
Acessar o exemplo
Manipulação de Classes
Acessar o exemplo
Manipulação do CSS
• Com o método css() é possível adicionar um ou mais estilos a um elemento.
Acessar o exemplo
Manipulação do CSS
Acessar o exemplo
Métodos de navegação no DOM
Acessar o exemplo
• A biblioteca jQuery disponibiliza métodos para você poder buscar elementos
pai, filhos, irmãos, etc.
• Alguns deles:
• closest() – retorna o primeiro elemento pai encontrado.
• find() – retorna todos os elementos filhos encontrados.
jQuery Plugins
• Está tentando construir algo com jQuery que requer funcionalidades que não
existem na biblioteca?.
• Hoje em dia existem milhares de plugins que você pode adicionar facilmente
na sua aplicação.
• Exemplos de Plugins: Slider de imagens, menu dropdown, mascaras,
validações, autocompletes, etc.
• Tente pesquisar no google por: jquery plugins.
jQuery Mask Plugin
• Site do plugin: http://igorescobar.github.io/jQuery-Mask-Plugin/.
Acessar o exemplo
Criação de Plugin
• Não achou o plugin que você queria? Que tal fazer um?
Acessar o exemplo
Criação de Plugin
Acessar o exemplo
FIM...

Contenu connexe

Similaire à Minicurso jQuery

Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxHelder da Rocha
 
Jquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaJquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaTeles Maciel
 
MSTechday - Técnicas e recursos para desenvolvimento web em cenários de grand...
MSTechday - Técnicas e recursos para desenvolvimento web em cenários de grand...MSTechday - Técnicas e recursos para desenvolvimento web em cenários de grand...
MSTechday - Técnicas e recursos para desenvolvimento web em cenários de grand...Cleber Dantas
 
jQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - MinicursojQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - MinicursoCloves Moreira Junior
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHPRangel Javier
 
Aula05 android persistencia
Aula05 android persistenciaAula05 android persistencia
Aula05 android persistenciaRoberson Alves
 
Design Patterns on Rails
Design Patterns on RailsDesign Patterns on Rails
Design Patterns on Railstchandy
 
Web dev tools google - agilizando suas aplicações web
Web dev tools google - agilizando suas aplicações webWeb dev tools google - agilizando suas aplicações web
Web dev tools google - agilizando suas aplicações webThiago Alvernaz
 
Aprendendo Na Prática: Aplicativos Web Com Asp.Net MVC em C# e Entity Framewo...
Aprendendo Na Prática: Aplicativos Web Com Asp.Net MVC em C# e Entity Framewo...Aprendendo Na Prática: Aplicativos Web Com Asp.Net MVC em C# e Entity Framewo...
Aprendendo Na Prática: Aplicativos Web Com Asp.Net MVC em C# e Entity Framewo...Daniel Makiyama
 
Aula 5 java script
Aula 5   java scriptAula 5   java script
Aula 5 java scriptandreluizlc
 
Desevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQueryDesevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQueryGuilherme
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java scriptandreluizlc
 

Similaire à Minicurso jQuery (20)

jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
Introdução jQuery UI
Introdução jQuery UIIntrodução jQuery UI
Introdução jQuery UI
 
Curso JavaScript - Aula jQuery
Curso JavaScript - Aula jQueryCurso JavaScript - Aula jQuery
Curso JavaScript - Aula jQuery
 
Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao Ajax
 
Apresentação Jquery
Apresentação JqueryApresentação Jquery
Apresentação Jquery
 
Jquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaJquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação prática
 
MSTechday - Técnicas e recursos para desenvolvimento web em cenários de grand...
MSTechday - Técnicas e recursos para desenvolvimento web em cenários de grand...MSTechday - Técnicas e recursos para desenvolvimento web em cenários de grand...
MSTechday - Técnicas e recursos para desenvolvimento web em cenários de grand...
 
jQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - MinicursojQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - Minicurso
 
Jquery ui
Jquery uiJquery ui
Jquery ui
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
 
Aula05 android persistencia
Aula05 android persistenciaAula05 android persistencia
Aula05 android persistencia
 
JQuery
JQueryJQuery
JQuery
 
Design Patterns on Rails
Design Patterns on RailsDesign Patterns on Rails
Design Patterns on Rails
 
Web dev tools google - agilizando suas aplicações web
Web dev tools google - agilizando suas aplicações webWeb dev tools google - agilizando suas aplicações web
Web dev tools google - agilizando suas aplicações web
 
Aprendendo Na Prática: Aplicativos Web Com Asp.Net MVC em C# e Entity Framewo...
Aprendendo Na Prática: Aplicativos Web Com Asp.Net MVC em C# e Entity Framewo...Aprendendo Na Prática: Aplicativos Web Com Asp.Net MVC em C# e Entity Framewo...
Aprendendo Na Prática: Aplicativos Web Com Asp.Net MVC em C# e Entity Framewo...
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Aula 5 java script
Aula 5   java scriptAula 5   java script
Aula 5 java script
 
Desevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQueryDesevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQuery
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java script
 

Minicurso jQuery

  • 2. O que é jQuery? • É uma biblioteca JavaScript, que tem a seguinte filosofia: “Write less, do more”. • jQuery simplifica muitas tarefas comuns como: • Manipulação do DOM • Manipulação CSS • Eventos • Efeitos e animações • Ajax • e muito mais... • É cross-browser, funciona igual em todos os navegadores (até no IE 6 o.O). • É muito utilizado pelos desenvolvedores, e por muitas empresas de nome como: • Google • Microsoft • IBM • Wikipédia
  • 3. Instalação • Existem duas foram de incluir a biblioteca jQuery no seu projeto: • Baixar do próprio site da jQuery: http://jquery.com/ • Usar um repositório online como o da Google. Acessar o exemplo
  • 4. Sintaxe • Com jQuery você seleciona um elemento HTML e algumas ações nesses elementos. • Sintaxe: $(seletor).action(); • $ - define o acesso ao jQuery. • seletor – seletor utilizado para encontrar os elementos HTML (o jQuery usa os seletores CSS) • action – método do elemento. Acessar o exemplo
  • 6. Eventos • A jQuery pode responder a vários tipos de eventos, como focus, blur, mouseenter, mouseleave, etc. Acessar o exemplo
  • 7. Manipulação do DOM • Com jQuery podemos manipular os elementos HTML muito facilmente. • Principais métodos: • text() – Define ou retorna o conteúdo do elemento. • html() – Define ou retorna o conteúdo do elemento (incluindo a marcação HTML). • val() – Define ou retorna o valor de campos de formulário. • attr() – Define ou retorna valores para atributos HTML. Acessar o exemplo
  • 9. Manipulação de Classes • Métodos para manipulação de classes: • addClass() – adiciona uma ou mais classes ao elemento selecionado. • removeClass() – remove uma ou mais classes do elemento selecionado. • toggleClass() – Alterna entre add/remove. Acessar o exemplo
  • 11. Manipulação do CSS • Com o método css() é possível adicionar um ou mais estilos a um elemento. Acessar o exemplo
  • 13. Métodos de navegação no DOM Acessar o exemplo • A biblioteca jQuery disponibiliza métodos para você poder buscar elementos pai, filhos, irmãos, etc. • Alguns deles: • closest() – retorna o primeiro elemento pai encontrado. • find() – retorna todos os elementos filhos encontrados.
  • 14. jQuery Plugins • Está tentando construir algo com jQuery que requer funcionalidades que não existem na biblioteca?. • Hoje em dia existem milhares de plugins que você pode adicionar facilmente na sua aplicação. • Exemplos de Plugins: Slider de imagens, menu dropdown, mascaras, validações, autocompletes, etc. • Tente pesquisar no google por: jquery plugins.
  • 15. jQuery Mask Plugin • Site do plugin: http://igorescobar.github.io/jQuery-Mask-Plugin/. Acessar o exemplo
  • 16. Criação de Plugin • Não achou o plugin que você queria? Que tal fazer um? Acessar o exemplo