Aula 17 Introdução ao jquery

Tamanho: px

Começar a partir da página:

Download "Aula 17 Introdução ao jquery"

Larissa Vilarinho
7 Há anos
Visualizações:

1 Aula 17 Introdução ao jquery jquery é uma biblioteca JavaScript criada por John Resig e disponibilizada como software livre e aberto, ou seja, de emprego e uso regido segundo licença conforme as regras estabelecidas pelo MIT (Massachusetts Institute of Technology) e pelo GPL (GNU General Public License). Além de ser uma biblioteca leve é e destinada para o desenvolvimento rápido de Java scripts que interagem com a página html, com ela podemos atribuir eventos, definir efeitos, alterar ou criar elementos na página, ou seja, jquery é destinado justamente para possuir uma interatividade e dinamismo proporcionando ao desenvolvedor diversas funcionalidades necessárias à criação de scripts. Vantagens do jquery Adicionar efeitos visuais e animações; Acessar e manipular o DOM; Buscar informações no servidor sem necessidade de recarregar a página (fora do escopo deste livro); Maior interatividade; Alterar conteúdos; Modificar apresentação e estilização; Simplificar tarefas específicas de Java Script; Realizar outras tarefas relacionadas às descritas Características do jquery Utiliza seletores CSS para localizar elementos componentes da estrutura de marcação HTML da página; Possui arquitetura compatível com instalação de plug-ins e extensões em geral; É indiferente às inconsistências de renderização entre navegadores; É capaz de interação implícita, isto é, não há necessidade de construção de loops para localização de elementos no documento; Admite programação encadeada, ou seja, cada método retorna um objeto.

2 É extensível, pois admite criação e inserção de novas funcionalidades na biblioteca existente. Instalação da Biblioteca jquery A biblioteca jquery nada mais é que um arquivo JavaScript (arquivo com a extensão.js) que deverá ser linkado à página web onde serão aplicados efeitos. Existem duas opções para linkar, ou chamar, a biblioteca jquery em uma página web: 1. A partir de um arquivo local: hospedando a biblioteca localmente no seu HD ou no servidor remoto no qual o site será hospedado e linkar a página para o endereço no qual foi hospedada. Download gratuito do arquivo da biblioteca: No documento html deverá ser chamado a biblioteca como um link na seção <head>: 2. A partir de um arquivo remoto público: o Google e a Microsoft mantêm em seus sites as diferentes versões da biblioteca para acesso público. Assim, a página pode ser linkada para o endereço de hospedagem da biblioteca nesses servidores. O Google disponibiliza para uso público uma área denominada API AJAX de bibliotecas do Google, uma rede de distribuição de conteúdo e arquitetura de carregamento das bibliotecas JavaScript de código aberto mais populares. Não

só a biblioteca jquery, mas também outras bibliotecas JavaScript de có- digo aberto, como jquery UI, Prototype, Mootools, YUI, Dojo, estão disponíveis nos seus servidores para serem linkadas para

3 só a biblioteca jquery, mas também outras bibliotecas JavaScript de có- digo aberto, como jquery UI, Prototype, Mootools, YUI, Dojo, estão disponíveis nos seus servidores para serem linkadas para páginas web. Veja no link e na imagem abaixo as versões de bibliotecas: No documento html deverá ser chamado a biblioteca como um link na seção <head>: Aplicação e prática do jquery O jquery é uma grande biblioteca que contém diversas funções que facilitam a vida do programador. A mais importante delas, que inicia a maioria dos códigos, é a função $. Exemplo de Funções:

Existem diversas funções que o jquery permite que utilizemos para alterar os elementos que selecionamos pela função $, e essas funções podem ser encadeadas.

4 Existem diversas funções que o jquery permite que utilizemos para alterar os elementos que selecionamos pela função $, e essas funções podem ser encadeadas. Exemplo: No exemplo acima chamamos a função $ e passamos como argumento uma String idêntica ao seletor CSS que utilizamos para selecionar o elemento de id cabecalho. Na sequência chamamos a função css e passamos um objeto como argumento, essa função adicionará ou alterará as informações desse objeto como propriedades de estilo do elemento que selecionamos com a função $. Em seguida chamamos mais uma função, a addclass, que vai adicionar o valor "selecionado" ao atributo class do elemento com o id "cabecalho". jquerys Selectors Um dos maiores poderes do jquery está na sua capacidade de selecionar elementos a partir de seletores CSS. Alguns seletores não funcionam em todos os navegadores, porém no jquery funcionam. Exemplo: Esconder todas as tags <td> filhas de um <tbody>. Outros Exemplos de seletores:

5 Sintaxe do jquery A sintaxe jquery é orientada para selecionar elementos HTML. jquery é um framework com o objetivo de facilitar a programação em Javascript, tornando o código mais simples. Sintaxe básica: $( selectorhtml ).atributo( valor ); Seletor: é similar aos seletores no CSS, no jquery vamos selecionar o que queremos atribuir a algum evento interativo. Atributo: é o valor que o seletor pode receber. Exemplo 1: estamos usando o seletor p para um parágrafo e aplicando o estilo negrito ao texto que receberá a formatação. Exemplo 2: criando uma mensagem com alert.

6 Eventos Os eventos jquery são peça chave. As funções que lidam com os eventos são chamados quando algo acontece no HTML. Quando isto acontece, o termo acionado por um evento é muito conhecido e frequentemente utilizado. No exemplo acima, uma função é chamada quando o evento de clique no botão é acionado: $( botão ).click(função() { código } E esta função esconde todos os elementos <p>: $( p ).hide(); Efeitos jquery Mostrar e Esconder ( hide(), show() ) Com jquery é possível mostrar, esconder elementos HTML com algumas funções.

O parâmetro speed especifica a velocidade de mostrar/esconder, e pode ter

7 Ambos podem funcionar em conjunto com parâmetros opcionais: speed e callback. O parâmetro speed especifica a velocidade de mostrar/esconder, e pode ter os valores slow, normal, fast ou em milisegundos: O parâmetro callback é o nome de uma função a ser executado depois da função hide/show estar completa.

Documentos relacionados

Programação Cliente em. jquery. Fontes: Wendell S. Soares e vinteum.com

Programação Cliente em. jquery. Fontes: Wendell S. Soares e vinteum.com Programação Cliente em Sistemas Web jquery Fontes: Wendell S. Soares e vinteum.com Apresentação jquery é uma biblioteca JavaScript criada por John Resig e disponibilizada como software livre e aberto O