Programação Web

Material Teórico
jQuery

Responsável pelo Conteúdo:

Prof. Esp. Alexander Albuquerque Gobbato

Revisão Textual:
Profa. Ms Magnólia Gonçalves Mangolini
 jQuery

• jQuery

• Seletores

• Operadores

• Métodos

• CSS

··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.

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.

5
 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.

6
 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;

7
 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’.

8
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.

9
 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.

10
 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:

11
 Unidade: jQuery

CSS

Com jQuery também é possível trabalhar com CSS, ou seja, ter acesso às propriedades de
alteração do estilo.
 

12
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.

13
 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.

14
Anotações

15
www.cruzeirodosulvirtual.com.br
Campus Liberdade
Rua Galvão Bueno, 868
CEP 01506-000
São Paulo SP Brasil
Tel: (55 11) 3385-3000