SlideShare uma empresa Scribd logo
jQuery
Simplificando o JavaScript


   Everaldo Wanderlei Uavniczak
     everaldouav@gmail.com
Sobre a apresentação

Nível:
- Iniciante

Indicada para:
- "Profissionais Web" (WebMaster, WebDesigners, WebDevelopers)
- Programadores
- Profissionais de Marketing Digital

Pré-requisitos:
- Nenhum, embora HTML, JavaScript e CSS ajudam

Objetivo:
Habilitar a quem nunca tenha programado em JavaScript o uso
de jQuery nos seus projetos [de aplicação] Web
WTF is jQuery?

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.


Seu lema é escrever menos e fazer mais


"O foco principal da biblioteca jQuery é a simplicidade. Por
que submeter os desenvolvedores ao martírio de escrever
longos e complexos códigos para criar simples efeitos?"
(John Resig - criador do jQuery)
Características

Leve (56kb jquery-1.3.2.min.js)


Rápido


Simples


Extensível (plugin)


Cross-browser
Compatibilidade

  Firefox 1.5+
  Internet Explorer 6+
  Safari 2.0.2+
  Opera 9+


Apresenta problemas com:
  FF 1.0.x
  IE 1-5.
  Safari 1.
  Safari 2.0
  Opera 1.0-8.5
  Konqueror
Quem usa jQuery?

Google              Salesforce
Dell                Newsgator
Digg                The Onion
MSNBC               Feedburner
Amazon              Vodafone
Intel               Linux.com
BBC                 Logitech
Newsweek            Mozilla
AOL                 Wordpress
Oracle              Drupal
Cisco Systems       Trac
Technorati          Joomla
Sourceforge         muitos outros...
Pra que serve?

Adicionar efeitos visuais e animação;
Acessar e Manipular o DOM (Document Object Model)
AJAX;
Prover interatividade;
Alterar Conteúdo;
Modificar apresentação e estilização;
Simplificar tarefas do JavaScript;
Muito mais...
O que jQuery permite

Utiliza seletores CSS para localizar elementos na estrutura
da marcação HTML na página;

Realizar interação implícita (permite percorrer a estrutura
dos elementos sem usar loop);

Utilizar programação encadeada (cada método retorna um
objeto);

Etc...
Obstrusivo X Não Obstrusivo

// OBSTRUSIVO:

<p onclick="alert('teste');">bla bla bla</p>


// NÃO OBSTRUSIVO:

// jquery
$('p.teste').onclick(function() {
     alert('teste');
});

// html
<p class="teste">bla bla bla</p>
Como instalar

  Baixe o arquivo no site em http://jquery.com/ e coloque o
  seguinte código entre as tags HEAD.


<html>
<head>
...

<script type="text/javascript" charset="utf-8"
src="arquivo_jquery.js"></script>
...
</head>
<body>
...
Workflow sugerido no
                  Desenvolvimento Web
               Vejam exemplos nos endereços abaixo

1) HTML (somente HTML)
http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_nocss_nojquery.html


2) HTML + CSS
http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_nojquery.html


3) HTML + CSS + jQuery
http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_jquery.html


4) HTML + CSS + jQuery + Firulas + Perfumarias + Etc
http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_jquery_firulas.html

Vejam também o "Menu do site do Maujor":
http://www.livrojquery.com.br/cap_14/arquivo-14.2a.html
Construtor jQuery




$()
Funcionamento do jQuery

          Encontre algo e faça alguma coisa
$('p').css('color', 'blue');
$('#teste').addClass('classe_para_teste');

ou

jQuery('p').css('color', 'blue');
jQuery('#teste').addClass('classe_para_teste');

Métodos encadeados:
$('p').children('b').css('color', blue').addClass('classe_bold').fadeOut();
O método ready()
Executa um código quando a página for carregada

                Com JavaScript
window.onload = function () { ... }

                    Com jQuery
Modo Descritivo
$(document).ready(function() { ... });

Modo Resumido
$().ready(function() { ... });

Modo Simplificado (Abreviado)
$(function() { ...}
Seletores jQuery


$(expressão [, contexto])
Sem especificar o contexto

$('div').css('color', 'blue');
$('div', $(document) ).css('color', 'blue');


Especificando o contexto

$('p', $('#teste')).css('color', 'blue');
Tipos de Seletores

Compreenda eles e compreenderá jQuery

Seletores Gerais
Seletores Simples
Seletores Compostos
Seletores Filtros
Seletores de Conteúdo
Seletores de Atributo
Filtro para Seletores-Filho
Seletores de Formulário *
Filtros para Formulários *
Seletores gerais

                   $(html) ou $(text)

Adicionam conteúdo HTML ou Texto na página

// adiciona conteúdo HTML no documento,
// no final da TAG HTML BODY

$('<p>teste peste</p>').prependTo('body');

$('teste peste').prependTo('body');
Seletores Simples
  Acessam elementos, classes, identificadores ou todos
                  eles combinados

   Elementos
$('p').css('color', 'blue');

   Classes (class)
$('.classe_teste').css('color', 'blue');

   Identificadores (id)
$('#teste_peste').css('color', 'blue');

   Combinações
$('p, li, #teste, li.classe, .xyz').css('color', 'blue');
Seletores Compostos (1)

                $(ancestral descendente)

// acessa o elemento B que tenha como
//ancestral um elemento DIV

$('div b').css('color', 'blue');

DIV
      B -> OK
      I
      B -> OK
/DIV
Seletores Compostos (2)
                    $(pai > filho)

// Acessa todos elementos P que tenham
// um elemento DIV como pai

$('div > p').css('color', 'blue');

DIV
      P     -> OK
      DIV
      P     -> OK
      P     -> OK
      H2
/DIV
Seletores Compostos (3)
                  $(anterior + posterior)


// Acessa o elemento P que segue
// o elemento DIV

$('div + p').css('color', 'blue');

DIV
      P   -> OK
      P
      P
      P
/DIV
Seletores Compostos (4)
                 $(anterior ~ irmãos)

// Acessa todos P que são irmãos
// e descendentes de H1

$('h1 ~ p').css('color', 'blue');

P
H1
     P   -> OK
     DIV
     P   -> OK
     P   -> OK
     DIV
Seletores Filtros (1)

           $(seletor:first), $(seletor:last)

$('li:first').css('color', 'blue');

$('li:last').css('color', 'blue');


UL
  LI -> OK (first)
  LI
  LI
  LI -> OK (last)
/UL
Seletores Filtros (2)

               $(seletor:not(seletor2))

$('li:not(li:first)').css('color', 'blue');


UL
  LI
  LI -> OK
  LI -> OK
  LI -> OK
/UL
Seletores Filtros (3)
               $(seletor:even), $(seletor:odd)

           Seletores não previsto nas CSS
$('tr:even').css('color', 'blue');
$('tr:odd').css('color', 'lime');

TABLE
    TR   ->   OK   even
    TR   ->   OK   odd
    TR   ->   OK   even
    TR   ->   OK   odd
    TR   ->   OK   even
/TABLE
Seletores Filtros (4)
                  $(seletor:eq(índice))

           Seletores não previsto nas CSS
             Contagem inicia em 0 (zero)
$('li:eq(1)').css('color', 'blue');

UL
      LI
      LI -> OK   // elemento de índice 1
      LI
      LI
/UL
Seletores Filtros (5)
           $(seletor:gt(índice)), $(seletor:lt(índice))

                Seletores não previsto nas CSS
                 Contagem inicia em 0 (zero)

$('li:gt(2)').css('color', 'blue');
$('li:gt(2)').css('color', 'blue');

UL
      LI   -> OK lt
      LI   -> OK lt
      LI
      LI   -> OK gt
      LI   -> OK gt
/UL
Seletores Filtros (6)
                      $(:header)

             Seletores não previsto nas CSS

$(':header').css('color', 'blue');


H1          ->   OK
  H2        ->   OK
     H3     ->   OK
  H2        ->   OK
  H2        ->   OK
     H3     ->   OK
       H4   ->   OK
Seletores de Conteúdo (1)
             $(seletor:contains(texto))

           Seletores não previsto nas CSS

$('p:contains(teste)').css('color', 'blue');



P (conteúdo do parágrafo) /P
DIV (conteúdo de teste) /DIV
P (conteúdo de teste 2) /P          -> OK
Seletores de Conteúdo (2)
                    $(seletor:empty)

                 Seletor previsto na CSS3

$('td:empty').css('color', 'blue');

TABLE
    TR
          TD   ()                           -> OK
          TD   (conteúdo da célula)
          TD   (outro conteúdo)
          TD   ()                           -> OK
          TD   (mais conteúdo)
    /TR
/TABLE
Seletores de Conteúdo (3)
              $(seletor1:has(seletor2))

             Seletor não previsto nas CSS


$('p:has(b)').css('color', 'blue');


P   B /B      /P    -> OK
P             /P
p   I /I B /B /P    -> OK
P   I U /U /I /P
Seletores de Conteúdo (3)
                  $(seletor:parent)

             Seletor não previsto nas CSS

// Acessa elementos que tenham
// elementos-filhos, ou text-nodes

$('p:parent').css('color', 'blue');


P (texto)   /P   -> OK
P           /P
P (teste)   /P   -> OK
Seletores de Atributo (1)
                $(seletor[atributo])

             Seletor previsto pela CSS3

 // Acessa quem possui um atributo não vazio

$('p[title]').css('color', 'blue');

P
DIV
P title='x'           -> OK
P title='x' class='x' -> OK
P
P id='x' class='x'
Seletores de Atributo (2)
              $(seletor[atributo = "valor"])

               Seletor previsto pela CSS3

// Acessa quem possui atributo = valor

$('p[lang = "en"]').css('color', 'blue');

P   lang="pt"
P   lang="pt-BR"
P   lang="en"    -> OK
P   lang="pt"
Seletores de Atributo (3)
             $(seletor[atributo != "valor"])

               Seletor previsto pela CSS3

// Acessa quem tem atributo com o valor
// diferente de "valor"

$('p[lang != "en"]').css('color', 'blue');

P                  -> OK // lang="" (vazio)
P   lang="pt"      -> OK
P   lang="pt-BR"   -> OK
P   lang="en"
P   lang="pt"      -> OK
Seletores de Atributo (4)
             $(seletor[atributo ^= "valor"])

               Seletor previsto pela CSS3

// Acessa quem tem atributo com o valor
// iniciando com "valor"

$('p[atributo ^= "pt"]').css('color', 'blue');

P
P   lang="pt"      -> OK
P   lang="en"
P   lang="pt"      -> OK
P   lang="pt-br"   -> OK
P   lang="pl"
Seletores de Atributo (5)
             $(seletor[atributo $= "valor"])

               Seletor previsto pela CSS3

// Acessa quem tem atributo com o valor
// iniciando por "valor"

$('p[atributo $= "t"]').css('color', 'blue');

P
P   lang="pt"      -> OK
P   lang="en"
P   lang="pt"      -> OK
P   lang="pt-br"
P   lang="xyzt"    -> OK
Seletores de Atributo (6)
             $(seletor[atributo *= "valor"])

               Seletor previsto pela CSS3

// Acessa quem tem atributo com o valor
// contendo o "valor"

$('p[title *= "teste"]').css('color', 'blue');


P   title="teste peste" -> OK
P   title="o teste"      -> OK
P   title="o teste bla " -> OK
P   title="bla bla bla "
Seletores de Atributo (7)
             $(seletor[filtro-1][filtro-2]...[filtro-n])

                  Seletor previsto pela CSS3

// Acessa quem contempla todas regras

$('p[lang^="pt"][id][class*="teste"]').css('color','blue');

P id class="teste"
P id class="ab teste ba" lang="pt-BR"                      -> OK
P id class="teste" lang="pt"                               -> OK
P
Filtro para seletores-filho (1)
          $(seletor:first-child), $(seletor:last-child)

                  Seletor previsto pela CSS3


$('ol li:first-child').css('color', 'blue');
$('ol li:last-child').css('color', 'blue');

OL
      LI -> OK   first-child
      LI
      LI
      LI -> OK   last-child
/OL
Filtro para seletores-filho (2)
                   $(seletor:only-child)

                 Seletor previsto pela CSS3

$('ol li:only-child').css('color', 'blue');

OL
      LI
      LI
      LI
/OL
OL
      LI -> OK
/OL
Filtro para seletores-filho (3)
$(seletor:nth-child(índice/even/odd/equação))

         Seletor previsto pela CSS3




Ih, agora F%#@#!!!!
$(function() {
  $('button').click(function () {
    $('li:nth-child(3n-2)').css('background', 'blue');
    $('li:nth-child(3n-1)' ).css('background', 'white');
    $('li:nth-child(3n)' ).css('background', 'black');
  });
});
<ul id="exercicio" style="background: white;">
  <li>Item # 1</li> - azul
  <li>Item # 2</li> - branco
  <li>Item # 3</li> - preto
  <li>Item # 4</li> - azul
  <li>Item # 5</li> - branco
  <li>Item # 6</li> - preto
  <li>Item # 7</li> - azul
  <li>Item # 8</li> - branco
  <li>Item # 9</li> - preto
</ul>
Manipulação de DOM

Permite alterar propriedades dos elementos


Maiores detalhes acesse:
   http://www.livrojquery.com.br/download.php
   http://localhost/work/jquery_workshop
Manipulação de atributos
     $().attr(nome_atributo) - retorna valor de um atributo
var classe = $('#teste').attr('class');

 $().attr({atributo:valor}) - seta valor(es) de atributos do elemento
 $('#teste').attr({
    title:"teste",
    class:"testepeste",
    lang:'pt-BR'
});

 $().attr(atributo, valor) - seta o valor de um atributo do elemento
$('#teste').attr('title', 'Big Teste Peste');

   $().removeAttr(atributo) - remove um atributo do elemento
$('#teste').removeAttr('title');
Manipulando o atributo class

      $().addClass('valor_classe') - adiciona uma classe
 $('p.testepeste').addClass('teste_classe');

                  $().hasClass('valor_classe'
          verifica se o elemento possui uma classe
 var existe = $('#testepeste').hasClass('teste');

       $().removeClass('valor_classe') - remove a classe
$('p.testepeste').removeClass('teste_classe');
              $().toggleClass('nome_da_classe')
        Adiciona uma classe se não existir e vice-versa
$('#testepeste').toggleClass('teste');
Eventos

Permitem interagir com o usuário.

Exemplos de eventos:
- blur
- change
- mouseover
- mouseout
- keypress
- submit
- etc...

Acessem:
http://qfdb.net/workshop/jquery_workshop/cap_5/eventos_auxiliares.html
//   head
$(function() {
    $('button').click(function () {
        $('ul li:lt(5)').css('color', 'green');
        $('ul li:gt(4)').css('color', 'red');
        $('ul li:odd').css('fontStyle', 'italic');
        $('ul li:odd').css('fontWeight', 'bolder');
        $('ul li:nth-child(3n-2)').css('background', 'blue');
        $('ul li:nth-child(3n)' ).css('background', 'black');
    });
});

//   body

<ul id="exercicio" style="background: white;">
  <li>Item # 1</li>
  <li>Item # 2</li>
  <li>Item # 3</li>
  <li>Item # 4</li>
  <li>Item # ...</li>
  <li>Item # 10</li>
</ul>

<button type="button" style="background: yellow;">Testar o script
</button>
Efeitos

Permitem colocar efeito e animações nas páginas, como
ocultar, controlando os seguintes aspectos:

   Visibilidade
   Efeito de Opacidade
   Efeito Corrediço
   Etc...


Acessem:
http://www.livrojquery.com.br/cap_06/arquivo-6.2a.html
http://www.livrojquery.com.br/cap_06/arquivo-6.4a.html
http://qfdb.net/workshop/jquery_workshop/cap_6/efeitos.html
Plugins

Permitem adicionar novas funcionalidades ao jQuery

Como adicionar um plugin???

Para adicionar um plugin basta adicionar o arquivo após o
arquivo do jQuery.


Por exemplo:
<script type="text/javascript" charset="utf-8" src="jquery.js"
></script>
<script type="text/javascript" charset="utf-8" src="jquery.corner.
js"></script>
Como usar um plugin?




Acessem o site do plugin "corner": http://www.malsup.com/jquery/corner/
Referências




http://www.livrojquery.com.br/
Referências

Português
  http://www.livrojquery.com.br/
  http://qfdb.net/workshop/jquery_workshop/




Inglês
  http://visualjquery.com/
  neilmiddleton.com/presentations/jQuery%20in%20a%20nutshell.pdf
  jquery.com
  docs.jquery.com
  jquery.com/plugins
  learningjquery.com
Perguntas

Mais conteúdo relacionado

Mais procurados

ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
Marketing Digital ODIG
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
Cristiano Pires Martins
 
Aprenda jQuery 1.3
Aprenda jQuery 1.3Aprenda jQuery 1.3
Aprenda jQuery 1.3
Helton Marinho
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
Michael Castillo Granados
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
André Willik Valenti
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
Cristiano Pires Martins
 
Jquery a technical overview
Jquery a technical overviewJquery a technical overview
Jquery a technical overview
Alexandre Marreiros
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQuery
Harlley Oliveira
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
Wesley Lemos
 
JQuery
JQuery JQuery
Java script aula 05 - funções
Java script   aula 05 - funçõesJava script   aula 05 - funções
Java script aula 05 - funções
Cristiano Pires Martins
 
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
Michel Ribeiro
 
Jquery 2
Jquery 2Jquery 2
Jquery 2
Eduardo Mendes
 
CSS & JQquery
CSS & JQqueryCSS & JQquery
CSS & JQquery
ScrumHalf Tool
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
Yuri Costa
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
nobios
 
Java script - funções
Java script - funçõesJava script - funções
Java script - funções
Cristiano Pires Martins
 
PHP robusto com Zend Framework
PHP robusto com Zend FrameworkPHP robusto com Zend Framework
PHP robusto com Zend Framework
Jaime Neto
 

Mais procurados (19)

ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
 
Aprenda jQuery 1.3
Aprenda jQuery 1.3Aprenda jQuery 1.3
Aprenda jQuery 1.3
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
Jquery a technical overview
Jquery a technical overviewJquery a technical overview
Jquery a technical overview
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQuery
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
 
JQuery
JQuery JQuery
JQuery
 
Java script aula 05 - funções
Java script   aula 05 - funçõesJava script   aula 05 - funções
Java script aula 05 - funções
 
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
 
Jquery 2
Jquery 2Jquery 2
Jquery 2
 
CSS & JQquery
CSS & JQqueryCSS & JQquery
CSS & JQquery
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
 
Java script - funções
Java script - funçõesJava script - funções
Java script - funções
 
PHP robusto com Zend Framework
PHP robusto com Zend FrameworkPHP robusto com Zend Framework
PHP robusto com Zend Framework
 

Destaque

Jquery fundamentals-book-pt-br
Jquery fundamentals-book-pt-brJquery fundamentals-book-pt-br
Jquery fundamentals-book-pt-br
TrioBlack Trioblack
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptável
Guto Xavier
 
Minicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTIMinicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTI
marcochella
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
Bruno Grange
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
Rodrigo Branas
 
JQUERY
JQUERY JQUERY
JQUERY
info_cimol
 

Destaque (7)

Jquery fundamentals-book-pt-br
Jquery fundamentals-book-pt-brJquery fundamentals-book-pt-br
Jquery fundamentals-book-pt-br
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptável
 
Minicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTIMinicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTI
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
JQUERY
JQUERY JQUERY
JQUERY
 

Semelhante a jQuery Simplificando o JavaScript

Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
Miquéias Amaro
 
MiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSisMiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSis
Thiago Miranda
 
Introdução à JQuery
Introdução à JQueryIntrodução à JQuery
Introdução à JQuery
André Faria Gomes
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
GabrielaMota46
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
Kaio Valente
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
Pedro Gaspar
 
Aula 12 Relatório - Tabelas
Aula 12   Relatório - TabelasAula 12   Relatório - Tabelas
Aula 12 Relatório - Tabelas
Dalton Martins
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
Fabrício Lopes Sanchez
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSS
Mauro Pereira
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
Talita Pagani
 
CSS
CSSCSS
PW00 - Programação Web html e estilo CSS.pdf
PW00 - Programação Web html e estilo CSS.pdfPW00 - Programação Web html e estilo CSS.pdf
PW00 - Programação Web html e estilo CSS.pdf
Silvano Oliveira
 
Jquery - Dicas e Truques
Jquery - Dicas e TruquesJquery - Dicas e Truques
Jquery - Dicas e Truques
Lambda 3
 
Seletores css
Seletores cssSeletores css
Seletores css
diogolevel3
 
PHP MySQL Aula 07
PHP MySQL Aula 07PHP MySQL Aula 07
PHP MySQL Aula 07
Carlos Santos
 
Mini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeMini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/Globalcode
Victor Cavalcante
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Resumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdfResumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdf
ssuser1a3a66
 
Palestra - Iniciando no Jquery
Palestra - Iniciando no JqueryPalestra - Iniciando no Jquery
Palestra - Iniciando no Jquery
grupoweblovers
 
J query
J queryJ query

Semelhante a jQuery Simplificando o JavaScript (20)

Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
 
MiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSisMiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSis
 
Introdução à JQuery
Introdução à JQueryIntrodução à JQuery
Introdução à JQuery
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Aula 12 Relatório - Tabelas
Aula 12   Relatório - TabelasAula 12   Relatório - Tabelas
Aula 12 Relatório - Tabelas
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSS
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
 
CSS
CSSCSS
CSS
 
PW00 - Programação Web html e estilo CSS.pdf
PW00 - Programação Web html e estilo CSS.pdfPW00 - Programação Web html e estilo CSS.pdf
PW00 - Programação Web html e estilo CSS.pdf
 
Jquery - Dicas e Truques
Jquery - Dicas e TruquesJquery - Dicas e Truques
Jquery - Dicas e Truques
 
Seletores css
Seletores cssSeletores css
Seletores css
 
PHP MySQL Aula 07
PHP MySQL Aula 07PHP MySQL Aula 07
PHP MySQL Aula 07
 
Mini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeMini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/Globalcode
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Resumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdfResumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdf
 
Palestra - Iniciando no Jquery
Palestra - Iniciando no JqueryPalestra - Iniciando no Jquery
Palestra - Iniciando no Jquery
 
J query
J queryJ query
J query
 

Último

TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Gabriel de Mattos Faustino
 

Último (8)

TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
 

jQuery Simplificando o JavaScript

  • 1. jQuery Simplificando o JavaScript Everaldo Wanderlei Uavniczak everaldouav@gmail.com
  • 2. Sobre a apresentação Nível: - Iniciante Indicada para: - "Profissionais Web" (WebMaster, WebDesigners, WebDevelopers) - Programadores - Profissionais de Marketing Digital Pré-requisitos: - Nenhum, embora HTML, JavaScript e CSS ajudam Objetivo: Habilitar a quem nunca tenha programado em JavaScript o uso de jQuery nos seus projetos [de aplicação] Web
  • 3. WTF is jQuery? 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. Seu lema é escrever menos e fazer mais "O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?" (John Resig - criador do jQuery)
  • 5. Compatibilidade Firefox 1.5+ Internet Explorer 6+ Safari 2.0.2+ Opera 9+ Apresenta problemas com: FF 1.0.x IE 1-5. Safari 1. Safari 2.0 Opera 1.0-8.5 Konqueror
  • 6. Quem usa jQuery? Google Salesforce Dell Newsgator Digg The Onion MSNBC Feedburner Amazon Vodafone Intel Linux.com BBC Logitech Newsweek Mozilla AOL Wordpress Oracle Drupal Cisco Systems Trac Technorati Joomla Sourceforge muitos outros...
  • 7. Pra que serve? Adicionar efeitos visuais e animação; Acessar e Manipular o DOM (Document Object Model) AJAX; Prover interatividade; Alterar Conteúdo; Modificar apresentação e estilização; Simplificar tarefas do JavaScript; Muito mais...
  • 8. O que jQuery permite Utiliza seletores CSS para localizar elementos na estrutura da marcação HTML na página; Realizar interação implícita (permite percorrer a estrutura dos elementos sem usar loop); Utilizar programação encadeada (cada método retorna um objeto); Etc...
  • 9. Obstrusivo X Não Obstrusivo // OBSTRUSIVO: <p onclick="alert('teste');">bla bla bla</p> // NÃO OBSTRUSIVO: // jquery $('p.teste').onclick(function() { alert('teste'); }); // html <p class="teste">bla bla bla</p>
  • 10. Como instalar Baixe o arquivo no site em http://jquery.com/ e coloque o seguinte código entre as tags HEAD. <html> <head> ... <script type="text/javascript" charset="utf-8" src="arquivo_jquery.js"></script> ... </head> <body> ...
  • 11. Workflow sugerido no Desenvolvimento Web Vejam exemplos nos endereços abaixo 1) HTML (somente HTML) http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_nocss_nojquery.html 2) HTML + CSS http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_nojquery.html 3) HTML + CSS + jQuery http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_jquery.html 4) HTML + CSS + jQuery + Firulas + Perfumarias + Etc http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_jquery_firulas.html Vejam também o "Menu do site do Maujor": http://www.livrojquery.com.br/cap_14/arquivo-14.2a.html
  • 13. Funcionamento do jQuery Encontre algo e faça alguma coisa $('p').css('color', 'blue'); $('#teste').addClass('classe_para_teste'); ou jQuery('p').css('color', 'blue'); jQuery('#teste').addClass('classe_para_teste'); Métodos encadeados: $('p').children('b').css('color', blue').addClass('classe_bold').fadeOut();
  • 14. O método ready() Executa um código quando a página for carregada Com JavaScript window.onload = function () { ... } Com jQuery Modo Descritivo $(document).ready(function() { ... }); Modo Resumido $().ready(function() { ... }); Modo Simplificado (Abreviado) $(function() { ...}
  • 15. Seletores jQuery $(expressão [, contexto]) Sem especificar o contexto $('div').css('color', 'blue'); $('div', $(document) ).css('color', 'blue'); Especificando o contexto $('p', $('#teste')).css('color', 'blue');
  • 16. Tipos de Seletores Compreenda eles e compreenderá jQuery Seletores Gerais Seletores Simples Seletores Compostos Seletores Filtros Seletores de Conteúdo Seletores de Atributo Filtro para Seletores-Filho Seletores de Formulário * Filtros para Formulários *
  • 17. Seletores gerais $(html) ou $(text) Adicionam conteúdo HTML ou Texto na página // adiciona conteúdo HTML no documento, // no final da TAG HTML BODY $('<p>teste peste</p>').prependTo('body'); $('teste peste').prependTo('body');
  • 18. Seletores Simples Acessam elementos, classes, identificadores ou todos eles combinados Elementos $('p').css('color', 'blue'); Classes (class) $('.classe_teste').css('color', 'blue'); Identificadores (id) $('#teste_peste').css('color', 'blue'); Combinações $('p, li, #teste, li.classe, .xyz').css('color', 'blue');
  • 19. Seletores Compostos (1) $(ancestral descendente) // acessa o elemento B que tenha como //ancestral um elemento DIV $('div b').css('color', 'blue'); DIV B -> OK I B -> OK /DIV
  • 20. Seletores Compostos (2) $(pai > filho) // Acessa todos elementos P que tenham // um elemento DIV como pai $('div > p').css('color', 'blue'); DIV P -> OK DIV P -> OK P -> OK H2 /DIV
  • 21. Seletores Compostos (3) $(anterior + posterior) // Acessa o elemento P que segue // o elemento DIV $('div + p').css('color', 'blue'); DIV P -> OK P P P /DIV
  • 22. Seletores Compostos (4) $(anterior ~ irmãos) // Acessa todos P que são irmãos // e descendentes de H1 $('h1 ~ p').css('color', 'blue'); P H1 P -> OK DIV P -> OK P -> OK DIV
  • 23. Seletores Filtros (1) $(seletor:first), $(seletor:last) $('li:first').css('color', 'blue'); $('li:last').css('color', 'blue'); UL LI -> OK (first) LI LI LI -> OK (last) /UL
  • 24. Seletores Filtros (2) $(seletor:not(seletor2)) $('li:not(li:first)').css('color', 'blue'); UL LI LI -> OK LI -> OK LI -> OK /UL
  • 25. Seletores Filtros (3) $(seletor:even), $(seletor:odd) Seletores não previsto nas CSS $('tr:even').css('color', 'blue'); $('tr:odd').css('color', 'lime'); TABLE TR -> OK even TR -> OK odd TR -> OK even TR -> OK odd TR -> OK even /TABLE
  • 26. Seletores Filtros (4) $(seletor:eq(índice)) Seletores não previsto nas CSS Contagem inicia em 0 (zero) $('li:eq(1)').css('color', 'blue'); UL LI LI -> OK // elemento de índice 1 LI LI /UL
  • 27. Seletores Filtros (5) $(seletor:gt(índice)), $(seletor:lt(índice)) Seletores não previsto nas CSS Contagem inicia em 0 (zero) $('li:gt(2)').css('color', 'blue'); $('li:gt(2)').css('color', 'blue'); UL LI -> OK lt LI -> OK lt LI LI -> OK gt LI -> OK gt /UL
  • 28. Seletores Filtros (6) $(:header) Seletores não previsto nas CSS $(':header').css('color', 'blue'); H1 -> OK H2 -> OK H3 -> OK H2 -> OK H2 -> OK H3 -> OK H4 -> OK
  • 29. Seletores de Conteúdo (1) $(seletor:contains(texto)) Seletores não previsto nas CSS $('p:contains(teste)').css('color', 'blue'); P (conteúdo do parágrafo) /P DIV (conteúdo de teste) /DIV P (conteúdo de teste 2) /P -> OK
  • 30. Seletores de Conteúdo (2) $(seletor:empty) Seletor previsto na CSS3 $('td:empty').css('color', 'blue'); TABLE TR TD () -> OK TD (conteúdo da célula) TD (outro conteúdo) TD () -> OK TD (mais conteúdo) /TR /TABLE
  • 31. Seletores de Conteúdo (3) $(seletor1:has(seletor2)) Seletor não previsto nas CSS $('p:has(b)').css('color', 'blue'); P B /B /P -> OK P /P p I /I B /B /P -> OK P I U /U /I /P
  • 32. Seletores de Conteúdo (3) $(seletor:parent) Seletor não previsto nas CSS // Acessa elementos que tenham // elementos-filhos, ou text-nodes $('p:parent').css('color', 'blue'); P (texto) /P -> OK P /P P (teste) /P -> OK
  • 33. Seletores de Atributo (1) $(seletor[atributo]) Seletor previsto pela CSS3 // Acessa quem possui um atributo não vazio $('p[title]').css('color', 'blue'); P DIV P title='x' -> OK P title='x' class='x' -> OK P P id='x' class='x'
  • 34. Seletores de Atributo (2) $(seletor[atributo = "valor"]) Seletor previsto pela CSS3 // Acessa quem possui atributo = valor $('p[lang = "en"]').css('color', 'blue'); P lang="pt" P lang="pt-BR" P lang="en" -> OK P lang="pt"
  • 35. Seletores de Atributo (3) $(seletor[atributo != "valor"]) Seletor previsto pela CSS3 // Acessa quem tem atributo com o valor // diferente de "valor" $('p[lang != "en"]').css('color', 'blue'); P -> OK // lang="" (vazio) P lang="pt" -> OK P lang="pt-BR" -> OK P lang="en" P lang="pt" -> OK
  • 36. Seletores de Atributo (4) $(seletor[atributo ^= "valor"]) Seletor previsto pela CSS3 // Acessa quem tem atributo com o valor // iniciando com "valor" $('p[atributo ^= "pt"]').css('color', 'blue'); P P lang="pt" -> OK P lang="en" P lang="pt" -> OK P lang="pt-br" -> OK P lang="pl"
  • 37. Seletores de Atributo (5) $(seletor[atributo $= "valor"]) Seletor previsto pela CSS3 // Acessa quem tem atributo com o valor // iniciando por "valor" $('p[atributo $= "t"]').css('color', 'blue'); P P lang="pt" -> OK P lang="en" P lang="pt" -> OK P lang="pt-br" P lang="xyzt" -> OK
  • 38. Seletores de Atributo (6) $(seletor[atributo *= "valor"]) Seletor previsto pela CSS3 // Acessa quem tem atributo com o valor // contendo o "valor" $('p[title *= "teste"]').css('color', 'blue'); P title="teste peste" -> OK P title="o teste" -> OK P title="o teste bla " -> OK P title="bla bla bla "
  • 39. Seletores de Atributo (7) $(seletor[filtro-1][filtro-2]...[filtro-n]) Seletor previsto pela CSS3 // Acessa quem contempla todas regras $('p[lang^="pt"][id][class*="teste"]').css('color','blue'); P id class="teste" P id class="ab teste ba" lang="pt-BR" -> OK P id class="teste" lang="pt" -> OK P
  • 40. Filtro para seletores-filho (1) $(seletor:first-child), $(seletor:last-child) Seletor previsto pela CSS3 $('ol li:first-child').css('color', 'blue'); $('ol li:last-child').css('color', 'blue'); OL LI -> OK first-child LI LI LI -> OK last-child /OL
  • 41. Filtro para seletores-filho (2) $(seletor:only-child) Seletor previsto pela CSS3 $('ol li:only-child').css('color', 'blue'); OL LI LI LI /OL OL LI -> OK /OL
  • 42. Filtro para seletores-filho (3) $(seletor:nth-child(índice/even/odd/equação)) Seletor previsto pela CSS3 Ih, agora F%#@#!!!!
  • 43. $(function() { $('button').click(function () { $('li:nth-child(3n-2)').css('background', 'blue'); $('li:nth-child(3n-1)' ).css('background', 'white'); $('li:nth-child(3n)' ).css('background', 'black'); }); }); <ul id="exercicio" style="background: white;"> <li>Item # 1</li> - azul <li>Item # 2</li> - branco <li>Item # 3</li> - preto <li>Item # 4</li> - azul <li>Item # 5</li> - branco <li>Item # 6</li> - preto <li>Item # 7</li> - azul <li>Item # 8</li> - branco <li>Item # 9</li> - preto </ul>
  • 44. Manipulação de DOM Permite alterar propriedades dos elementos Maiores detalhes acesse: http://www.livrojquery.com.br/download.php http://localhost/work/jquery_workshop
  • 45. Manipulação de atributos $().attr(nome_atributo) - retorna valor de um atributo var classe = $('#teste').attr('class'); $().attr({atributo:valor}) - seta valor(es) de atributos do elemento $('#teste').attr({ title:"teste", class:"testepeste", lang:'pt-BR' }); $().attr(atributo, valor) - seta o valor de um atributo do elemento $('#teste').attr('title', 'Big Teste Peste'); $().removeAttr(atributo) - remove um atributo do elemento $('#teste').removeAttr('title');
  • 46. Manipulando o atributo class $().addClass('valor_classe') - adiciona uma classe $('p.testepeste').addClass('teste_classe'); $().hasClass('valor_classe' verifica se o elemento possui uma classe var existe = $('#testepeste').hasClass('teste'); $().removeClass('valor_classe') - remove a classe $('p.testepeste').removeClass('teste_classe'); $().toggleClass('nome_da_classe') Adiciona uma classe se não existir e vice-versa $('#testepeste').toggleClass('teste');
  • 47. Eventos Permitem interagir com o usuário. Exemplos de eventos: - blur - change - mouseover - mouseout - keypress - submit - etc... Acessem: http://qfdb.net/workshop/jquery_workshop/cap_5/eventos_auxiliares.html
  • 48. // head $(function() { $('button').click(function () { $('ul li:lt(5)').css('color', 'green'); $('ul li:gt(4)').css('color', 'red'); $('ul li:odd').css('fontStyle', 'italic'); $('ul li:odd').css('fontWeight', 'bolder'); $('ul li:nth-child(3n-2)').css('background', 'blue'); $('ul li:nth-child(3n)' ).css('background', 'black'); }); }); // body <ul id="exercicio" style="background: white;"> <li>Item # 1</li> <li>Item # 2</li> <li>Item # 3</li> <li>Item # 4</li> <li>Item # ...</li> <li>Item # 10</li> </ul> <button type="button" style="background: yellow;">Testar o script </button>
  • 49. Efeitos Permitem colocar efeito e animações nas páginas, como ocultar, controlando os seguintes aspectos: Visibilidade Efeito de Opacidade Efeito Corrediço Etc... Acessem: http://www.livrojquery.com.br/cap_06/arquivo-6.2a.html http://www.livrojquery.com.br/cap_06/arquivo-6.4a.html http://qfdb.net/workshop/jquery_workshop/cap_6/efeitos.html
  • 50. Plugins Permitem adicionar novas funcionalidades ao jQuery Como adicionar um plugin??? Para adicionar um plugin basta adicionar o arquivo após o arquivo do jQuery. Por exemplo: <script type="text/javascript" charset="utf-8" src="jquery.js" ></script> <script type="text/javascript" charset="utf-8" src="jquery.corner. js"></script>
  • 51. Como usar um plugin? Acessem o site do plugin "corner": http://www.malsup.com/jquery/corner/
  • 53. Referências Português http://www.livrojquery.com.br/ http://qfdb.net/workshop/jquery_workshop/ Inglês http://visualjquery.com/ neilmiddleton.com/presentations/jQuery%20in%20a%20nutshell.pdf jquery.com docs.jquery.com jquery.com/plugins learningjquery.com