Javascript Fácil com jQuery: Interação com eventos, animações e Ajax

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (0)

Utilize o jQuery para criar páginas interativas, com animações visuais e comunicação assíncrona com o servidor (Ajax).

Esse artigo faz parte da revista Java Magazine edição 55. Clique aqui para ler todos os artigos desta edição

Javascript Fácil com jQuery

Parte 2: Interação com eventos, animações e Ajax

Utilize o jQuery para criar páginas interativas, com animações visuais e comunicação assíncrona com o servidor (Ajax)

Na edição anterior, apresentamos a biblioteca de Javascript jQuery, explicando recursos básicos como seletores, mudança de aparência (css) e manipulação de atributos. Nessa segunda parte, concluímos a série ensinando um pouco mais sobre filtros, mudança de conteúdo na página, interação com o usuário, animações e Ajax. No final do artigo comentamos sobre plugins e projetos de extensão baseados nessa biblioteca.

Se você não teve a oportunidade de conhecer esse projeto ainda, o jQuery é uma solução completa para o desenvolvimento de páginas web, utilizando uma sintaxe simples e elegante, além de abstrair problemas de compatibilidade entre navegadores. Tudo nessa biblioteca gira em torno da função $, que serve para encapsular elementos do DOM (Document Object Model) e manipulá-los de forma padronizada e consistente.

O jQuery possui um conjunto de seletores (strings) que podemos passar como parâmetro para a função $, permitindo localizar elementos em uma página HTML. Embora a primeira parte do artigo já tenha abordado o assunto de seletores, existem alguns filtros que complementam essa funcionalidade e adicionam mais flexibilidade ao seu código. Precisamos explicar um pouco mais sobre esses filtros para um melhor entendimento do assunto.

Filtros complementares

O jQuery define diferentes métodos que, na maioria das vezes, são redundantes com relação aos seletores. Por exemplo (e relembrando o artigo anterior), podemos pegar todos os parágrafos que contêm a classe “menu” com $(“p.menu”). Também podemos selecionar esses mesmos elementos com $(“p”).filter(“.menu”). Os dois casos são idênticos, mas o método filter (que recebe um seletor como parâmetro) é vantajoso em casos onde você precisa trabalhar sobre um subconjunto dos elementos já selecionados. A Tabela 1 apresenta uma lista com esses métodos que complementam o trabalho dos seletores.

 

Seletor

Descrição

Exemplos

hasClass(class)

Retorna true se pelo menos um dos elementos selecionados possui a classe indicada. Retorna false caso contrário.

$(“#m2”).hasClass(“menu”): Retorna true se o elemento #m2 possuir a classe “menu” definida. Retorna false caso contrário.

filter(seletor)

Remove todos os elementos que não atendem ao seletor especificado.

$(“p”).filter(“.lado”): Seleciona os parágrafos que possuem a classe lado definida.

filter(funcao)

Utiliza uma função para remover os elementos indesejados. A função deve retornar true para os elementos desejados e false para os indesejados.

$(“p”).filter(function(i) {

  return i==3;

}): Seleciona o quarto parágrafo.

is(seletor)

Retorna true se pelo menos um dos elementos se enquadra na condição do seletor. Retorna false caso contrário.

$(“div.menu”).is(“:contains(‘java’)”): Retorna true se algum dos divs (que possuem classe “menu”) contém o texto “java”.

map(funcao)

Retorna um array de valores, onde cada valor está ligado a um elemento selecionado. Os valores são retornados pela função passada como parâmetro.

$(“div”).map(function(){

  return $(this).attr(‘id’);

}): Retorna um array com os ids (strings) de todos os divs da página (ex.: [‘id1’, ‘id2’, ...]).

not(seletor)

Remove os elementos que satisfazem à condição do seletor.

$(“div”).not(“.menu, .top”): Retorna um objeto jQuery que encapsula todos os divs da página, menos aqueles que possuem as classes “menu” ou “top” definidas.

slice(inicio, fim)

Retorna um objeto jQuery contendo um sub-conjunto da seleção atual, começando no índice inicio (o primeiro elemento possui índice zero) e terminando no índice fim (exclusivo). O segundo parâmetro é opcional. Se esse não for informado, a seleção vai até o último elemento.

$(“div”).slice(3, 6): Retorna um objeto jQuery com os elementos de índice 3, 4 e 5 da seleção atual.

$(“div”).slice(4): Retorna um objeto jQuery com os elementos de índice 4 em diante.

add(seletor)

Adiciona mais elementos à seleção atual, onde os novos elementos atendem ao seletor.

$(“div”).add(“p”): Adiciona todos os parágrafos à seleção de todos os divs da página.

children([seletor])

Retorna um objeto jQuery com os filhos imediatos dos elementos atuais. É possível passar um seletor para filtrar esses filhos.

$(“#menu”).children(): Retorna todos os filhos do elemento que possui id=“menu”.

$(“#menu”).children(“.submenu”): Retorna os filhos do elemento #menu que possuem a classe submenu definida.

contents()

Seleciona todos os descendentes da seleção atual (incluindo texto).

$(“#p1”).contents(): Seleciona todos os descendentes do elemento #p1, incluindo textos, links, etc.

find(seletor)

Seleciona elementos descendentes que satisfazem ao seletor.

$(“p”).find(“span”): Seleciona todos os elementos <span> que estão dentro de parágrafos.

next([seletor])

Seleciona os elementos únicos que vêm logo após os elementos da seleção atual (ou seja, o próximo elemento irmão). Você pode passar um seletor para filtrar esse conjunto.

$(“#menu”).next(): Seleciona o elemento que vem logo após o elemento que possui id=“menu”.

$(“p”).next(“.item”): Seleciona os elementos que possuem a classe “item” e estão logo após um parágrafo.

nextAll(seletor)

Seleciona todos os irmãos imediatamente após os elementos atuais. Você pode passar um seletor para filtrar esse conjunto.

$(“div:first”).nextAll(): Seleciona todos os divs irmãos do primeiro div da página.

parent(seletor)

Seleciona os pais de todos os elementos da seleção atual. Você pode passar um seletor para filtrar esse conjunto.

$(“p”).parent(): "

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?