Blog Tecnologia e Educação

Requisições Ajax com jQuery

2009-11-13T22:14:41Z

Qualquer bom projeto de website na atualidade deve levar em consideração a possibilidade de uso de requisições assíncronas, ou seja, Ajax. Para escrever estas requisições, o ideal é utilizar um framework como jQuery. Vejamos o que jQuery disponibiliza para tratamento deste tipo de requisições

Requisições Ajax

jQuery.ajax(opções):XMLHttpRequest. Carrega uma página remota utilizando uma requisição HTTP.
load(url, dados, callback):jQuery. Carrega conteúdo de um arquivo remoto e o injeta no DOM.
jQuery.get(url, dados, callback, tipo):XMLHttpRequest. Carrega uma página remota utilizando uma requisição HTTP com método GET.
jQuery.getJSON(url, dados, callback):XMLHttpRequest. Carrega um objeto JSON utilizando uma requisição HTTP.
jQuery.getScript(url, callback):XMLHttpRequest. Carrega e executa um script em Javascript utilizando uma requisição HTTP com método GET.
jQuery.post(url, dados, callback, tipo):XMLHttpRequest. Carrega uma página remota utilizando uma requisição HTTP com método POST.

Eventos Ajax

ajaxComplete(callback):jQuery. Define uma função a ser executada quando uma requisição Ajax é completada.
ajaxError(callback):jQuery. Define uma função a ser executada quando uma requisição Ajax falha.
ajaxSend(callback):jQuery. Define uma função a ser executada antes de uma requisição Ajax ser enviada.
ajaxStart(callback):jQuery. Define uma função a ser executada quando uma requisição Ajax é iniciada.
ajaxStop(callback):jQuery. Define uma função a ser executada quando todas requisições Ajax tiverem terminado.
ajaxSuccess(callback):jQuery. Define uma função a ser executada quando uma requisição Ajax é completada com sucesso.

Miscelânea

jQuery.ajaxSetup(opções). Define configurações globais para as requisições Ajax.
serialize():String. Cria uma string com um conjunto de valores de campos de formulário.
serializeArray():Array<Objeto>. Semelhante ao serialize, mas retorna um objeto JSON.

Nota: A estrutura JSON retornada é um objeto, não uma string. É necessário utilizar um plugin ou biblioteca de terceiros para tratá-lo.

Veja alguns exemplos de utilização na página de Ajax na documentação do jQuery.

Outros artigos de seu interesse:

Tratamento de eventos com jQuery

2009-11-13T21:45:22Z

Este artigo trata das funções do jQuery relacionadas com tratamento de eventos. Estas funções, conjuntamente com as funções jQuery de seleção, são as mais importantes para desenvolvimento de interfaces de aplicações web. Veja os outros artigos sobre jQuery.

Carga da página

ready(função):jQuery. Define uma função a ser executada quado o DOM estiver pronto para ser navegado e manipulado. Pode ser interpretado como o momento no qual a página foi carregada, sendo utilizada como equivalente ao evento onLoad.

Controle de eventos

bind(tipo, [dados], função):jQuery. Relaciona uma função a um ou mais eventos para cada elemento selecionado. É admissível o uso dos eventos blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error e ready.
one(tipo, [dados], função):jQuery. Relaciona uma função a um ou mais eventos para cada elemento selecionado. Entretanto esta função será executada somente uma vez.
trigger(evento, [dados]):jQuery. Dispara um evento em cada elemento selecionado.
triggerHandler(evento, [dados]):Object. Dispara os eventos associados a um elemento. Contudo, as ações-padrão do nevegador não são executadas.
unbind([tipo], [função]):jQuery. Oposto ao bind.

Eventos em ação

live(tipo, função):jQuery. Relaciona uma função a um evento para todos os elementos selecionados, tanto atuais como futuros.
die(tipo, função):jQuery. Oposto ao live.

Auxiliares de Interação

hover(over, out):jQuery. Tratamento do evento de passagem do mouse sobre um elemento.
toggle(função, função2, função3,função4,…):jQuery. Troca entre duas ou mais funções chamadas para um elemento.

Auxiliares de eventos

blur():jQuery. Dispara o evento blur (perda de foco) para cada elemento selecionado.
blur(função):jQuery. Associa uma função ao evento blur (perda de foco) para cada elemento selecionado.
change():jQuery. Dispara o evento change (alteração) para cada elemento selecionado.
change(função):jQuery. Associa uma função ao evento change (alteração) para cada elemento selecionado.
click():jQuery. Dispara o evento click (clique) para cada elemento selecionado.
click(função):jQuery. Associa uma função ao evento click (clique) para cada elemento selecionado.
dblclick():jQuery. Dispara o evento dblclick (duplo clique) para cada elemento selecionado.
dblclick(função):jQuery. Associa uma função ao evento dblclick (duplo clique) para cada elemento selecionado.
error():jQuery. Dispara o evento error (erro) para cada elemento selecionado.
error(função):jQuery. Associa uma função ao evento error (erro) para cada elemento selecionado.
focus():jQuery. Dispara o evento focus (foco) para cada elemento selecionado.
focus(função):jQuery. Associa uma função ao evento focus (foco) para cada elemento selecionado.
keydown():jQuery. Dispara o evento keydown (pressão sobre uma tecla) para cada elemento selecionado.
keydown(função):jQuery. Associa uma função ao evento keydown (pressão sobre uma tecla) para cada elemento selecionado.
keypress():jQuery. Dispara o evento keypress (pressão sobre uma tecla e sua liberação) para cada elemento selecionado.
keypress(função):jQuery. Associa uma função ao evento keypress (pressão sobre uma tecla e sua liberação) para cada elemento selecionado.
keyup():jQuery. Dispara o evento keyup (liberação de tecla) para cada elemento selecionado.
keyup(função):jQuery. Associa uma função ao evento keyup (liberação de tecla) para cada elemento selecionado.
load(função):jQuery. Associa uma função ao evento load (carregamento) para cada elemento selecionado.
mousedown(função):jQuery. Associa uma função ao evento mousedown (pressão do botão do mouse) para cada elemento selecionado.
mouseenter(função):jQuery. Associa uma função ao evento mouseenter (mouse passa a estar sobre um elemento) para cada elemento selecionado.
mouseleave(função):jQuery. Associa uma função ao evento mouseleave (mouse deixa de estar sobre um elemento) para cada elemento selecionado.
mousemove(função):jQuery. Associa uma função ao evento mousemove (movimentação do mouse) para cada elemento selecionado.
mouseout(função):jQuery. Associa uma função ao evento mouseout (mouse deixa de estar sobre um elemento) para cada elemento selecionado. Mouseout dispara quando o ponteiro do mouse “entra” ou “sai” de um elemento-filho, enquanto o mouseleave não.
mouseover(função):jQuery. Associa uma função ao evento mouseover (mouse passa a estar sobre um elemento) para cada elemento selecionado. Mouseover dispara quando o ponteiro do mouse “entra” ou “sai” de um elemento-filho, enquanto o mouseenter não.
mouseup(função):jQuery. Associa uma função ao evento mouseup (liberação do botão do mouse) para cada elemento selecionado.
resize(função):jQuery. Associa uma função ao evento resize (redimensionamento) para cada elemento selecionado.
scroll(função):jQuery. Associa uma função ao evento scroll (rolagem) para cada elemento selecionado.
select():jQuery. Dispara o evento select (seleção) para cada elemento selecionado.
select(função):jQuery. Associa uma função ao evento select (seleção) para cada elemento selecionado.
submit():jQuery. Dispara o evento submit (envio de dados de formulário) para cada elemento selecionado.
submit(função):jQuery. Associa uma função ao evento submit (envio de dados de formulário) para cada elemento selecionado.
unload(função):jQuery. Associa uma função ao evento unload (descarregamento) para cada elemento selecionado.

Exemplos de uso destas funções podem ser encontrados na página de eventos da documentação do jQuery.

Outros artigos de seu interesse:

jQuery e CSS

2009-11-13T15:44:51Z

Daremos continuidade à série de artigos sobre jQuery tratando de sua forma de manipulação de CSS.

Anteriormente vimos os artigos

Vejamos portanto os métodos voltados ao uso de CSS:

CSS em geral

css(nome):String. Retorna a propriedade do estilo do primeiro elemento selecionado.
css(propriedades):jQuery. Define pares de chaves e valores de propriedades de estilo para todos elementos selecionados
css(nome, valor):jQuery. Define um par de chave e valor de propriedade de estilo para todos elementos selecionados.

Posicionamento

offset():Object{top,left}. Retorna um objeto com o offset (distâncias) do primeiro elemento selecionado relativo ao documento, em píxeis.
offsetParent():jQuery. Não será abordado neste artigo.
position():Object{top,left}. Retorna as posições de topo e esquerda de um elemento em relação ao elemento-pai.
scrollTop():Integer. Obtém a posição do scrool (relativo à barra de rolagem vertical) do primeiro elemento selecionado.
scrollTop(valor):jQuery. Define a posição do scrool (relativo à barra de rolagem vertical) do primeiro elemento selecionado.
scrollLeft():Integer. Obtém a posição do scrool (relativo à barra de rolagem horizontal) do primeiro elemento selecionado.
scrollLeft(valor):jQuery. Define a posição do scrool (relativo à barra de rolagem horizontal) do primeiro elemento selecionado.

Altura e Largura

height():Integer. Obtém a altura do primeiro elemento selecionado.
height(valor):jQuery. Define a altura do primeiro elemento selecionado.
width():Integer. Obtém a largura do primeiro elemento selecionado.
width(valor):jQuery. Define a largura do primeiro elemento selecionado.
innerHeight():Integer. Obtém a altura interna (excluindo a borda e incluindo o padding) do primeiro elemento selecionado.
innerWidth():Integer. Obtém a largura interna (excluindo a borda e incluindo o padding) do primeiro elemento selecionado.
outerHeight(boolean):Integer. Obtém a altura externa (incluindo a borda e o padding, por padrão) do primeiro elemento selecionado. Não serão incluídas outras medidas se for utilizado o parâmetro false.
outerWidth(boolean):Integer. Obtém a largura externa (incluindo a borda e o padding, por padrão) do primeiro elemento selecionado. Não serão incluídas outras medidas se for utilizado o parâmetro false.

Os exemplos destas funções podem ser consultados na página de documentação de CSS em jQuery.

Outros artigos de seu interesse:

MP3 Players divertidos

2009-11-10T20:28:41Z

Muita gente gosta de encontrar idéias para presentes de aniversário ou Natal diferentes. Se você é uma destas pessoas vai gostar destes MP3 Players lançados pela coreana SAFA.

XING MP3 Player

Pequenos, com várias opções de cores e um painel com 27 LED, os XING LED MP3 Player têm um esbelto corpo de 12 mm de espessura, conexão USB, traz jogos como pedra-papel-tesoura e permite customizar os ícones montados com os LED à sua escolha.

Esquema do XING LED MP3 Player

Outros artigos de seu interesse:

Projetor LED compacto da Samsung

Como fazer download e instalar programas (comercial ou gratuito) no Ubuntu Linux

2009-11-09T00:48:51Z

A instalação de programas tornou-se muito melhor na versão 9.10 (Karmic Koala). Mas como é possível que você precise instalar programas que não tenham sido agraciados com as novidades do Ubuntu 9.10, vamos cobrir a questão de download e instalação de programas comerciais e gratuitos (freeware, Software Livre ou Código Aberto) nesta distribuição Linux.

Por padrão, você deve abrir o Centro de Software para ter acesso à listagem de programas que podem ser instalados no Ubuntu

Centro de Software

O Centro de Software é responsável pelo download e instalação de programas e de todos os outros programas ou arquivos dos quais o programa desejado precise para ser instalado ou utilizado. Raramente você irá precisar de programas que não esteja disponível no Centro de Software, especialmente se você precisar de software para desenvolvimento.

O problema surge quando um programa desejado não está disponível no Centro de Software, como é o caso de alguns jogos (games) de alta qualidade.

Neste caso, siga alguns princípios básicos:

Não utilize sites especializados em downloads como Superdownloads, Baixaki e semelhantes. Dê preferência ao website dos desenvolvedores dos programas. Nestes websites você poderá ter acesso a mais informações do que em qualquer outro lugar.
Faça o download mais específico possível para seu caso. Considere a distribuição Linux, sua versão, seu processador e coisas assim.
Observe o padrão de instalação do arquivo oferecido e as orientações do desenvolvedor para realizar a instalação correta.

Observe que a maioria dos programas comerciais para outros sistemas operacionais podem ser instalados no Ubuntu, geralmente com o uso de Wine.

Outros artigos de seu interesse:

Acesso a bancos de dados com JSP

2009-11-15T02:58:26Z

Neste artigo veremos como trabalhar com bancos de dados e JSP.

Esta aplicação poderia ser um exemplo de uma aplicação simples baseada em uso exclusivo de páginas JSP. Mas isto significaria não aproveitar os recursos de orientação a objetos proporcionada pelo Java.

Vamos então fazer um aplicativo com uma arquitetura MVC (Model-View-Controller). O NetBeans será utilizado como IDE para este desenvolvimento e o SGBDR será o Java DB.

Funcionalidades

Nosso aplicativo de exemplo é uma mera agenda de contatos

Diagrama de Caso de Uso

O usuário pode consultar sua lista de amigos, incluir novos, alterar ou excluir os cadastrados

Arquitetura

O desenvolvimento desta aplicação é dividido em três partes

Modelo: Classes utilizadas para representação dos dados
Controle: Classe que contém as regras da aplicação
Visão: Páginas JSP com a interface da aplicação

Banco de Dados

Comecemos por criar um banco de dados. Vá à aba de serviços do NetBeans, clique com o botão direito do mouse no ícone do Java DB e selecione “Criar Banco de Dados”. Selecione um nome como “amigos”, o nome do usuário administrativo do banco e sua senha. Clique com o botão direito do mouse sobre o ícone do banco de dados recém-criado e selecione “Conectar”. Expanda o nó deste banco de dados, clique com o botão direito do mouse sobre “Tabelas” e selecione “Criar tabela”. Crie uma tabela com campos de identificação (numérico), prenome, sobrenome, telefone (este três de texto) e data de nascimento (com formato de data).

Modelo

Pacote modelo

O modelo será composto por quatro elementos

Conexao: Classe que tem apenas um método denominado “obterConexao” que retorna um java.sql.Connection referente à conexão com o banco de dados criado anteriormente
Contato: Um JavaBeans que representará os registros da tabela de contatos. Além do necessário para configurar um JavaBeans, teremos o método “valido” para indicar se os dados são consistentes com o que se espera e um método para retornar a data de nascimento convertida para String. Foi adicionado também um atributo “mensagem” para armazenar mensagens de erro caso os valores não sejam válidos.
DAO: Uma interface com assinatura dos métodos para atualizar, incluir e excluir registros na tabela, além de retornar um contato ou uma lista com todos os contatos.
ContatoDAOImp: Uma classe que implementa DAO e um método “novoID” para calcular o valor da chave da primária antes de incluir um novo contato na tabela. As instruções SQL são construídas com PreparedStatement para facilitar a formatação dos dados e reduzir a possibilidade de ataques do tipo SQL Injection.

Controle

pacote Controle

O pacote de controle tem uma classe chamada “Controle“. Esta classe é um Servlet.

Escreveremos nela um método para converter uma String de uma data em um objeto java.util.Date.

No processamento da requisição (método “processRequest”) iremos examinar um parâmetro que denominaremos “acao”. Este parâmetro indicará o que desejamos fazer no momento. Sempre que possível este processamento irá criar um objeto “Contato” com os dados recebidos nos outros parâmetros. Dependendo do parâmetro “acao”, o processamento pode tomar distintos caminhos. Vejamos as possibilidades

Inserção. Se os dados do objeto Contato forem válidos, ele invocará o método de inserção do “ContatoDAOImp” e recuperará uma lista de contatos armazenados. Se houver ao menos um registro na tabela será chamado o arquivo “listagem.jsp” ou, caso contrário, o arquivo “insercao.jsp”. Se os dados não forem válidos, será invocada a página “erro.jsp”
Exclusão. Ele invocará o método de remoção de registro do ”ContatoDAOImp” e seguirá os mesmos passos realizados após uma inserção.
Solicitação de alteração. Um objeto “Contato” é passado para “atualizar.jsp” para que possa ser criado um formulário HTML para obtenção dos dados a alterar.
Alteração. Segue o mesmo princípio da inserção, apenas invocando o método de alteração no lugar do da inserção.
Padrão. A ação padrão consiste em recuperar a lista de contatos e exibir “listagem.jsp” ou “insercao.jsp”.

Ao invocar “listagem.jsp”, faz-se necessário obter um java.util.List com todos os contatos, definí-lo como atributo da requisição (método “request.setAttribute”). Usamos os métodos “request.getRequestDispatcher” para definir a página de destino e “forward” em um objeto RequestDispatcher para desviar a execução para a página selecionada.

O desvio para a página de erro ou com o formulário de atualização cria um objeto com a interface HttpSession para atribuir um objeto “Contato” à sessão e transfere a execução para a página desejada.

Visão

A interface da aplicação é baseada em arquivos JSP. São eles

index. Página inicial da aplicação e que contém apenas um link para o servlet “Controle”
listagem. Exibe uma tabela com os contatos armazenados e um formulário para inclusão de novos contatos. Para reduzir a quantidade de código, utilizou-se JSTL. JSTL é uma biblioteca de tags e seu uso facilita a produção de páginas JSP.
insercao. Este arquivo contém o formulário para inserção de contatos e é utilizado quando não há contatos no banco de dados.
atualizar. Exibe um formulário com os dados de um contato para sua alteração. Para utilizar os atributos de um objeto “Contato”, é feita referência a um JavaBeans.
erro. Utiliza o mesmo recurso da página “atualizar” para exibir a mensagem de erro produzida quando os dados do contato não são válidos.

Além dos cinco arquivos JSP citados foi utilizado um arquivo CSS e um arquivo com o formulário de inclusão que é incorporado às páginas “insercao.jsp” e “listagem.jsp”.

Obtenha as apresentações deste artigo. Você pode fazer o download da apresentação sobre JSP e banco de dados para exibição e a apresentação sobre JSP e banco de dados com notas.

Outros artigos de seu interesse:

Efeitos com jQuery

2009-11-07T00:14:13Z

Um dos usos de jQuery que mais chamam a atenção dos desenvolvedores para Web é a aplicação de efeitos visuais nos elementos do documento HTML.

Divulguei uma série de artigos sobre o uso de jQuery, que permite ao leitor ter uma visão inicial das funcionalidades do jQuery. São os artigos

Para continuar esta série, vejamos alguns dos efeitos que podem ser aplicados. Sugiro que você veja os exemplos divulgados na documentação do jQuery.

Básico

show():jQuery. Exibe elementos ocultos.
show(velocidade, callback):jQuery. Exibe elementos ocultos, configurando-se o tempo da animação (em milissegundos) e uma função de callback.
hide():jQuery. Oculta elementos.
hide(velocidade, callback):jQuery. Oculta elementos, configurando-se o tempo da animação (em milissegundos) e uma função de callback.
toggle():jQuery. Alterna entre ocultar ou exibir elementos.
toggle(chaveamento):jQuery. Não será abordado neste artigo.
toggle(velocidade, callback):jQuery. Alterna entre ocultar ou exibir elementos, configurando-se o tempo da animação (em milissegundos) e uma função de callback.

Deslizamento

slideDown(velocidade, callback):jQuery. Revela elementos ajustando continuamente sua altura. Opcionalmente pode disparar um callback.
slideUp(velocidade, callback):jQuery. Oculta elementos ajustando continuamente sua altura. Opcionalmente pode disparar um callback.
slideToggle(velocidade, callback):jQuery. Alterna entre ocultar e revelar elementos ajustando continuamente sua altura. Opcionalmente pode disparar um callback.

Esmaecimento

fadeIn(velocidade, callback):jQuery. Ajusta continuamente a opacidade de elementos, revelando-os. Opcionalmente pode disparar um callback.
fadeOut(velocidade, callback):jQuery. Ajusta continuamente a opacidade de elementos, ocultando-os. Opcionalmente pode disparar um callback.
fadeTo(velocidade, opacidade, callback):jQuery. Ajusta continuamente a opacidade de elementos até o valor desejado. Opcionalmente pode disparar um callback.

Customizado

animate(parâmetros, duração, easing, callback):jQuery. Esta função permite fazer animações customizadas.
animate(parâmetros, opções):jQuery. Versão mais simplificada da função anterior.
stop(clearQueue, gotoEnd):jQuery. Interrompe as animações em curso nos elementos selecionados.

Configuração

jQuery.fx.off:Boolean. Desabilita animações.

Outros artigos de seu interesse:

Manipulação Avançada de HTML com jQuery

2009-11-07T00:04:41Z

Vimos recentemente como manipular um documento HTML usando jQuery. Quem já ouviu falar do poder do jQuery deve ter ficado ligeiramente desapontado por ter imaginado que fosse possível manipular o HTML de forma mais avançada. E teria toda razão, pois isto é possível.

Vejamos como

Inserção interna

append(conteúdo):jQuery. Adiciona conteúdo aos elementos selecionados. Exemplo:
$("p").append("<br >Fim do parágrafo");
appendTo(seletor):jQuery. Adiciona todo o conteúdo dos elementos selecionados a outro conjunto de elementos. Exemplo:
$("div").appendTo("#base");
prepend(conteúdo):jQuery. O mesmo que append, mas adiciona o conteúdo no início dos elementos selecionados.
prependTo(selector):jQuery. O mesmo que prependTo, mas adiciona o conteúdo no início dos elementos selecionados.

Inserção externa

after(conteúdo):jQuery. Insere conteúdo após cada um dos elementos selecionados. Exemplo:
$("p:odd").after("<p>Entendeu?</p>");
before(conteúdo):jQuery. Inverso de after.
insertAfter(seletor):jQuery. Insere todo o conteúdo dos elementos selecionados a outro conjunto de elementos. Exemplo:
$("div").insertAfter("#base");
insertBefore(seletor):jQuery. Inverso de insertAfter.

Inserção envolvente

wrap(html):jQuery. Envolve cada elemento selecionado com conteúdo HTML especificado. Exemplo:
$("p").wrap("<div></div>");
wrap(elemento):jQuery. Envolve cada elemento selecionado com elemento especificado. Exemplo:
$("p").wrap(document.createElement("div"));
wrapAll(html):jQuery. Envolve o conjunto de elementos selecionados com um único conteúdo HTML especificado. Exemplo:
$("input").wrapAll("<fieldset></fieldset>");
wrapAll(elemento):jQuery. Envolve o conjunto de elementos selecionados com elemento especificado. Exemplo:
$("input").wrap(document.createElement("fieldset"));
wrapInner(html):jQuery. Envolve o conteúdo de cada elemento selecionado com um conteúdo HTML especificado. Veja o exemplo da documentação do jQuery.
wrapInner(elemento):jQuery. Envolve o conteúdo de cada elemento selecionado com um elemento especificado. Veja o exemplo da documentação do jQuery.

Substituição

replaceWith(conteúdo):jQuery. Substitui os elementos selecionados com o conteúdo HTML especificado. Exemplo:
$("button").click(function(){ $(this).replaceWith("<div>" + $(this).text() + "</div>"); });
replaceAll(seletor):jQuery. Substitui os elementos selecionados por outros elementos. Exemplo:
$("<em>Texto. </em>").replaceAll("p");

Remoção

empty():jQuery. Remove todo o conteúdo dos elementos selecionados. Exemplo:
$("td").empty();
remove([expressão]):jQuery. Na prática é utilizada de forma equivalente ao empty.

Cópia

clone():jQuery. Produz em clone dos elementos selecionados e seleciona os clones. Exemplo:
$("strong").clone().prependTo("p");
clone(booleano):jQuery. Equivalente ao clone() anterior, mas tem a capacidade de clonar os eventos associados aos elementos clonados. Exemplo:
$("button").click(function(){ $(this).clone(true).insertAfter(this); });

Outros artigos de seu interesse:

Manipulação de HTML com jQuery

2009-11-06T22:30:07Z

Podemos utilizar jQuery para manipular um documento HTML de diversas formas. Por exemplo, podemos modificar atributos, classes CSS, valores de campos de formulários e mesmo o conteúdo em HTML do documento em si.

Se você já viu os artigos anteriores de jQuery básico e do uso de seletores jQuery estará apto a ver como realizar estas operações. Vamos a elas.

Manipulação de Atributos

attr(nome):Objeto. O método attr traz o conteúdo do atributo solicitado do primeiro dos elementos selecionados. Exemplo:
alert( $("img").attr("alt") );
attr(propriedades):jQuery. Outra assinatura do método attr permite definir diversos atributos de todos elementos selecionados. Exemplo:
$("img").attr({title:"Uninove",alt:"Logotipo da Uninove"});
attr(chave,valor):jQuery. Desta forma podemos definir um determinado atributo em todos elementos selecionados. Exemplo:
$("button:last").attr("disabled","disabled");
attr(chave,função):jQuery. Não será abordada neste artigo.
removeAttr(nome):jQuery. Remove um atributo de todos elementos selecionados. Exemplo:
$("form :checkbox").removeAttr("checked");

Manipulação de Classes CSS

addClass(classe):jQuery. Adiciona classe aos elementos selecionados. Exemplo:
$("p:first").addClass("intro");
hasClass(classe):boolean. Retorna true se a classe especificada está presente em ao menos um dos elementos selecionados. Exemplo:
if ($("p").hasClass("azul")) alert ("Texto da classe 'azul' encontrado");
removeClass(classe):jQuery. Remove todas (ou as classes especificadas) dos elementos selecionados. Exemplo:
if ($("p").hasClass("azul")) $("p").removeClass("azul");
toggleClass(classe):jQuery. Adiciona a classe se ela não estiver presente e remove-a se ela estiver. Exemplo:
$("p").click(function(){ $(this).toggleClass("azul"); });
toggleClass(classe,chave):jQuery. Não será abordada neste artigo.

HTML

html():String. Obtém o conteúdo HTML do primeiro dos elementos selecionados. Exemplo:
$("p").click(function(){ alert($(this).html()); });
html(valor):jQuery. Define o conteúdo HTML dos elementos selecionados. Exemplo:
$("div").html("<p><em>Sim</em> - Não - <em>Sim</em></p>");

Texto

text():String. Obtém o texto combinado de todos elementos selecionados. Semelhante ao html(), mas opera sobre todos elementos selecionados e obtém não o código HTML, mas somente o texto contido nestes elementos. Exemplo:
$("p:first").click(function(){ alert($(this).html()); });
text(valor):jQuery. Define o conteúdo de texto dos elementos selecionados. Para comparar com o método html(valor) veja o resultado deste exemplo:
$("p:last").text("Um <em>texto</em> adicional");

Valores de campos de formulário

val():String, Array. Obtém o valor de entrada do primeiro dos elementos selecionados. Este valor pode ser obtido de campos de formulário, incluindo caixas de combinação e áreas de texto. Caixas de combinação multiseleção e grupos de caixas de checagem retornam um vetor de valores. Neste caso eu prefiro sugerir que você veja o exemplo fornecido na documentação do JQuery.
val(valor):jQuery. Define valor atribuído aos elementos selecionados. Também é aplicado a campos de formulários. Exemplo:
$("input[type='text']“).val(”Preencha este campo”);
val(valor):jQuery. Verifica ou seleciona todos elementos radio e checkboxes e seleciona opções que combinem com um conjunto de valores. Este é outro caso onde sugiro o exemplo da documentação do jQuery.

Outros artigos de seu interesse:

Avaliação do Linux Ubuntu 9.10: Primeiras Impressões

2009-10-31T23:57:02Z

Acabei de instalar (via Gerenciador de Atualizações) a nova versão do Ubuntu: 9.10, a do Koala cármico.

Vamos às minhas primeiras impressões:

Empathy é o substituto do Pidgin para acesso às minhas contas de Instant Messages. Para quem estava acostumado ao visual espartano do Pidgin, nenhuma grande diferença. Falta conseguir alguém online para testar os ícones do microfone e da webcam que estão disponíveis.
Firefox 3.5 está mais leve do que a versão 3.0. E melhor do que tudo, permite testar as novas implementações de HTML 5.
F-Spot está bem melhor do que a última vez que o havia utilizado.
Apreciei a integração do Rhythmbox com a loja Magnatune e com o Last.fm. O problema é que ainda não pude testar as novidades na área de som, pois esta versão deixou de reconhecer o hardware de som de meu computador.
Os novos jogos parecem excitantes. São tantos que levarei meses para testar uma boa parte deles
Já comecei a testar o armazenamento do Ubuntu One há semanas e é uma boa opção. Mas você há de concordar comigo que para armazenar 2 GB é mais fácil usar um pendrive! Vantagem mesmo só no compartilhamento com outros, mas ainda preciso testar.
A Central de Programas ficou bem organizada, mas falta a opção de conhecer a popularidade de cada programa.
O desempenho conseguiu superar um pouco o da 9.04, que já havia representado um salto neste quesito
Os novos papéis de parede são muito bonitos
A aparência geral é sóbria. Muito sóbria. Sóbria demais.
Estou ansioso para experiementar o jogo de ferramentas de desenvolvimento Quickly