Unidade V jQuery

Prévia do material em texto

Programação Web
jQuery
Material Teórico
Responsável pelo Conteúdo:
Prof. Esp. Alexander Albuquerque Gobbato
Revisão Textual:
Profa. Ms Magnólia Gonçalves Mangolini
5
• jQuery
• Seletores
• Operadores
 · Nesta unidade veremos uma linguagem desenvolvida em 
javascript, chamada de jQuery. 
 · Com jQuery podemos selecionar elementos da página, 
registrar e tratar eventos, e selecionar também a folha de estilo 
criada previamente. 
jQuery
 
 Atenção
Para um bom aproveitamento do curso, leia o material teórico atentamente antes de realizar as 
atividades. É importante também respeitar os prazos estabelecidos no cronograma.
• Métodos
• CSS
6
Unidade: jQuery 
Contextualização
jQuery é uma biblioteca JavaScript de código open source, fornecida gratuitamente. Sua API 
é utilizada, por exemplo, como funções navegação, criação de animações e efeitos, funções para 
registrar/tratar eventos e funções para desenvolver aplicações AJAX. 
7
jQuery
Para utilizar as funcionalidades do jQuery, basta somente incluir na tag script, definindo o 
source, onde será apontado o arquivo com extensão js. Esse arquivo pode ser endereço, pela 
web, ou feito o download do arquivo para o próprio projeto.
 
Seletores
A sintaxe do jQuery é bastante simples. Resume-se a selecionar um elemento ou um grupo 
de elementos e realizar uma ou mais operações. 
Para utilizar o jQuery, usamos as variáveis $ e jQuery, mas é muito mais comum usarmos o $.
 
Seletores Básicos
Vejamos alguns elementos utilizados para ter acesso aos elementos das páginas.
 · $(“*”) – seleciona todos os elementos da página;
 · $(“tipo_do_elemento”) – selecionada todos os elementos de um tipo escolhido, basta 
colocar o nome do elemento entre as aspas;
 · $(“span”) – seleciona todos os elementos do tipo span;
 · $(“#id_do_elemento”) – seleciona o elemento pelo id. Um elemento do html possui um 
atributo id, esse atributo id é informado juntamente com o caracter # para o jQuery ter acesso;
8
Unidade: jQuery 
 · $(“.classX”) - Selecionando elementos pela classe: dentro de um seletor, o caractere ponto 
(.) refere-se à classe (atributo “class” da tag HTML).
Para utilizar as funcionalidades do jQuery, o documento deve estar todo carregado, e para 
isso, usamos a instrução javascript. Observe as linhas 6,7 e 8, da imagem a seguir:
 
Seletores em Atributos
Com jQuery podemos selecionar ou ter acesso aos elementos de acordo com os atributos do 
html. Para ter o acesso, basta informar o atributo, o operador e o valor, dentro de chaves ([]).
 · $([atributo operador valor])
 
Operadores
Operador Significado
= O valor informado precisa ser igual ao valor do atributo.
! = O valor informado precisa ser diferente do valor do atributo.
^= O valor do atributo precisa começar ou ser igual ao valor informado.
$ = O valor do atributo precisa terminar ou ser igual ao valor informado.
~ = O valor do atributo precisa conter o valor informado.
 · $(“[name=’txtNome’]”) - seleciona todos os elementos cujo atributo ‘name’ seja igual 
txtNome.
 · $(“[type=’text’][name=’txtInfo’]”) - selecionada e define o valor de todos os elementos 
do tipo ‘input’, cujo atributo nome seja igual a ‘txtInfo’.
9
Eventos
Vejamos alguns eventos para trabalhar juntamente com jQuery:
 · $(document).ready(função) – quando a página for toda carregada, a função será executada.
 · $(seletor).click(função) – quando o elemento indicado no seletor for selecionado e receber 
o evento click, a função é executada.
 · $(seletor).dbclick(função) – quando o elemento indicado no seletor for selecionado e 
receber o evento duplo clik, a função é executada.
 · $(seletor).change(função) – quando o elemento indicado no seletor for selecionado e 
sofre uma alteração, então a função será executada.
 · $(seletor).focus(função) – quando o elemento indicado no seletor receber o foco, a 
função é executada.
O exemplo a seguir exemplifica que será executada a função que está dentro do ready, ao 
final do carregamento da página.
 
O exemplo a seguir exemplifica que a função de clique do elemento btnBotao estará disponível 
para ser executada ao final do carregamento da página.
 
10
Unidade: jQuery 
No exemplo a seguir, a propriedade do elemento div está sendo armazenada na variável 
divdbl, e será executada ao receber o evento de double click.
 
No exemplo a seguir, o elemento select de id, de nome cboCombo, ao ser trocado seu valor 
é invocada o evento change.
 
No exemplo a seguir, o elemento select de id, de nome cboCombo, ao receber o foco será 
preenchido com css e ao perder o foco alterado o estilo do css.
 
11
Métodos
 · $(seletor).text(conteúdo) – acessa o texto dos elementos.
 · $(seletor).val(conteúdo) – acessa os valores dos elementos contidos em um formulário. 
Os elementos podem ser do tipo input, select e radio.
 · $(seletor).html(conteúdo) – recupera ou define o conteúdo dos elementos, por exemplo, 
o código html que está dentro de uma div.
 · $(seletor).append(conteúdo) – insere o conteúdo ao final do elemento.
 · $(seletor).prepend(conteúdo) – insere o conteúdo no início do elemento.
 · $(seletor).after(conteúdo) – insere o conteúdo informado após o elemento.
 · $(seletor).before(conteúdo) – insere o conteúdo informado antes do elemento.
Veja os elementos utilizados e o resultado no browser:
 
Executando a página temos o seguinte resultado:
 
Ao clicar no botão, o evento de clique é acionado no elemento b1 e os métodos são executados, 
obtendo o seguinte resultado:
 
12
Unidade: jQuery 
CSS
Com jQuery também é possível trabalhar com CSS, ou seja, ter acesso às propriedades de 
alteração do estilo.
 
13
Material Complementar
Para se aprofundar mais em eventos e métodos jQuery, uma boa indicação é 
o site http://learn.jquery.com/, onde existem vários exemplos e diversas 
funcionalidades.
 
14
Unidade: jQuery 
Referências
jQuery. Disponível em: <http://jquery.com/>
HTML5 – A linguagem de marcação que revolucionou a web – Novatec – Maurício Samy Silva.
15
Anotações
www.cruzeirodosulvirtual.com.br
Campus Liberdade
Rua Galvão Bueno, 868
CEP 01506-000
São Paulo SP Brasil 
Tel: (55 11) 3385-3000