Blog Tecnologia e Educação

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.

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.

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

Anteriormente vimos os artigos

• JQuery e JQuery Básico
• Seletores em JQuery
• Manipulação de HTML com jQuery e Manipulação Avançada de HTML com jQuery
• Efeitos com jQuery

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.

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

• Introdução a jQuery
• jQuery Básico
• Seletores jQuery
• Manipulação de HTML com jQuery
• Manipulação Avançada de HTML com jQuery

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.

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); });

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.

Quase toda programação com JQuery é baseada na seleção de elementos para posterior manipulação.

Muitas são as formas de seleção de elementos com JQuery. Todas retornam um vetor de elementos (Array<elemento>).

Vamos a uma lista delas.

Seleção básica

• #id. Elemento com determinado id. Apenas um elemento deve ter determinada id em um documento. Exemplo:
  $("#primDiv").css("background-color","black");
• elemento. Seleção pelo elemento HTML. Exemplo:
  $("div").css("border","9px double red");
• .classe. Elementos de determinada classe. Exemplo:
  $(".destaque").css("fontWeight","bolder");
• .classe.classe. Elementos que pertençam a ambas classes. Exemplo:
  $(".destaque.especial").css("color","red");
• *. Todos elementos. Exemplo:
  $("*").css("color","black");
• Combinação dos anteriores. Os seletores podem ser combinados de diversas maneiras, separados por vírgulas. Exemplo:
  $("div,span,p.olho").css("margin","3px 0 0 0");

Hierarquia

A seleção pode ser mais detalhada com indicação de hierarquia. Veja as opções

• Ascendente Descendente. Seleção de descendentes de determinado elemento. Exemplo:
  $("form label").css("color","gray");
• Pai > Filho. Seleção de elementos-filho de um determinado elemento. Exemplo:
  $("#conteudo > *") .css("border","2px solid green");
• Anterior + Seguinte. Seleção de elemento que segue-se a um determinado elemento. Exemplo:
  $("label + input").css("border","1px dotted blue");
• Anterior ~ Irmãos. Seleção de elementos-irmãos após determinado elemento. Exemplo:
  $("#inicio ~ div").css("color","aquamarine");

Filtros

Outra forma de refinar a seleção é utilizar filtros. Vejamos uma lista de filtros:

• :first. Primeiro elemento da seleção. Exemplo:
  $("tr:first").css("font-style","italic");
• :last. Inverso de :first
• :not(seletor). Filtra elementos que não se encaixam em determinado seletor. Exemplo:
  $("input:not(:checked) + span") .css("border","1px dotted darkSalmon");
• :even. Elementos com índice par, considerado que o índice inicia em zero. Exemplo:
  $("tr:even").css("background-color","lavender");
• :odd. Inverso de :even
• :eq(índice). Determinado elemento pelo seu índice. Exemplo:
  $("td:eq(2)").css("background-color","MintCream");
• :gt(índice). Todos elementos com índice superior a determinado valor. Exemplo:
  $("p:gt(1)").hide();
• :lt(índice). Inverso de :gt(índice)
• :header. Todos elementos header. Exemplo:
  $(":header").css("color","navy");
• :animated. Todos elementos que estão sendo animados no momento da seleção.

Filtros de conteúdo

Além de filtrar os elementos em si, podemos criar filtros pelo conteúdo.

• :contains(texto). Seleciona elementos que contenha determinado texto. Exemplo:
  $("p:contains('JQuery')").css("text-decoration","underline");
• :empty. Seleciona elementos sem filhos. Exemplo:
  $("td:empty").css("background-color","MediumOrchid");
• :has(seletor). Seleciona elementos que contenham ao menos um determinado elemento que combine com o seletor informado. Exemplo:
  $("div:has(p)").addClass("grade");
• :parent. Seleciona elementos que tenham elementos filhos. Exemplo:
  $("td:parent").hide();

Filtros de visibilidade

Podemos alterar a propriedade de visibilidade dos elementos. Os filtros de visibilidade servem para selecionar elementos pela sua condição de visibilidade.

• :hidden: Seleciona elementos ocultados. Exemplo:
  $("div:hidden").show(2000);
• :visible. Inverso de :hidden

Filtros de atributos

Outra forma de filtrar uma seleção de elementos é pela presença, ausência ou valores de atributos dos elementos. Vejamos os métodos:

• [atributo]. Elementos que contenham determinado atributo. Exemplo:
  $("div[id]").css("color","lime");
• [atributo=valor]. Elementos com atributo que tenham determinado valor. Exemplo:
  $("p[class='ocultar']").hide(3000);
• [atributo!=valor]. Elementos com atributo que não tenham determinado valor.
• [atributo^=valor]. Elementos com atributo que inicie com determinado valor. Exemplo:
  $("input[name^='req']").val("Requerido");
• [atributo$=valor]. Elementos com atributo que termine com determinado valor.
• [atributo*=valor]. Elementos com atributo que contenha determinado valor.
• Estes filtros podem ser combinados como neste exemplo:
  $("input[type='text'][id]").css("color","Darkred");

Filtros por afiliação

Outra forma de filtrar é pela avaliação de relação de afiliação entre os elementos. Vejamos:

• :nth-child(índice/par/ímpar/equação). Seleciona o n-ésimo elemento da seleção por afiliação ou os elementos pares, ímpares ou ainda de acordo com uma equação. Exemplo:
  $("ol li:nth-child(2)").css("background-color","Bisque");
• :first-child. Primeiro filho de uma seleção.
• :last-child. Inverso de :first-child
• :only-child. Seleciona todos elementos que são únicos filhos de seus elementos-pai.

Elementos de formulário

Também podem ser selecionados os elementos de formulários como

• :input
• :text
• :password
• :radio
• :checkbox
• :submit
• :image
• :reset
• :button
• :file

Veja este exemplo:

$("form :checkbox").css("border","2px solid LightSlateGray");

Estado de elementos de formulários

Os elementos de formulários podem ter sua seleção refinada pelo estado destes elementos. São exemplos

• :enabled
• :disabled
• :checked
• :selected

Um exemplo de uso seria

alert($("input:checked").length + " selecionados");

Este artigo apresenta os métodos mais importantes para uso da framework JQuery. Tudo o que você precisa saber para começar a trabalhar com JQuery está aqui e na Introdução a JQuery. Se desejar veja como selecionar elementos com JQuery.

Função JQuery

A função JQuery é representada por um $ e serve para selecionar elementos do documento. Esta função é a fundamental para o uso de JQuery. Uma vez feita uma seleção, podemos manipular estes elementos de diversas maneiras. Ela sempre retorna um objeto JQuery, definido internamente no framework.

Vejamos as possibilidades de uso da função JQuery:

• jQuery(expressão, [contexto]):jQuery. A expressão é um seletor de elemento do documento, tal como os seletores de CSS. O uso de contexto nesta função será tratado em outro artigo. Exemplo:
  $("div > p").css("border", "1px solid gray");
• jQuery(html, [proprietário]):jQuery. Cria um elemento com o conteúdo do primeiro parâmetro e o insere em outro elemento. O uso do proprietário nesta função não será tratado neste artigo. Exemplo:
  $("<div><p>Boa noite!</p></div>").appendTo("body")
• jQuery(elementos):jQuery. Seleciona um elemento HTML da página. Exemplo:
  $(document.body).css("background", "blue");
• jQuery(callback):jQuery. Equivalente ao $(document).ready().

Métodos de acesso a objetos JQuery

Diversos métodos que podem ser aplicados aos objetos JQuery retornados pela função JQuery. São:

• each(calback):jQuery. Executa uma função (callback) no contexto de cada objeto encontrado. Exemplo:
  $("div").each(function(i)){ this.style.color="red"; }
• size():int. Retorna número de elementos no objeto. Exemplo:
  alert($("div").size())
• length:int. Retorna número de elementos no objeto, sendo idêntica a size(). Exemplo:
  alert($("div").length)
• selector:String. Retorna um seletor que represente o seletor passado para uma função jQuery. Útil para desenvolvedores de plugins e não será tratado neste artigo.
• context:elemento. Retorna nó DOM. Semelhante ao selector, também não será tratado neste artigo.
• eq(posição):jQuery. Retorna um elemento de um conjunto. O primeiro tem o índice 0. Exemplo:
  $("p").eq(1).css("color","red")
• get():Array<elemento>. Retorna diversos elementos DOM. Útil para operar sobre grande conjunto de elementos. Exemplo:
  $("div").get().reverse()
  retornaria um vetor com todos elementos DIV na ordem inversa
• get(índice):elemento. Retorna um elemento de um conjunto de elementos DOM. Forma alternativa à função JQuery.
• index(sujeito):int. Procura um elemento e retorna o índice dele. Exemplo: alert($("div").index(this))

Métodos de manipulação de dados

Estes métodos fazem manipulação de dados associados a elementos jQuery.

• data(nome):variável. Retorna o dado armazenado sobre determinado nome em um elemento. Exemplo:
  $("div").data("v1")
• data(nome,valor):jQuery. Retorna a um dado com determinado nome um valor. Exemplo:
  $("div").data("v1","jQuery")
• removeData(nome):jQuery. Remove dado armazenado com determinado nome. Exemplo:
  $("div").removeData("v1")

Além destas, há alguns métodos de manipulação de dados que operam sobre filas, que são formadas por um vetor de funções.

Material de aula introdutória de JQuery.

JQuery é a biblioteca javascript mais famosa do mercado. Pode ser utilizada para navegação pelo DOM, principalmente para criação de interfaces web ricas e para Ajax.

Conteúdo da aula

• Introdução
• Download
• Uso da API Ajax do Google
• Exemplos básicos
• Adicionando funcionalidades
• Manipulando CSS
• Efeitos
• Callback
• Seleção de elementos

Este material pode ser obtido em dois formatos:

• Introdução a JQuery para exibição ou consulta na tela
• Introdução a JQuery para impressão

A Ext JS é uma das frameworks Javascript mais ricas que temos à disposição hoje em dia. Este é um roteiro para avaliar as potencialidades desta Framework

Roteiro

• Acessibilidade
  • Árvore habilitada para ARIA (Accessible Rich Internet Applications)
• Grades
  • Grade básica gerada a partir de um vetor
  • Grade editável
  • Grade com edição de linha
  • Grade com paginação
  • Grade com paginação por barra deslizante
• Abas
  • Básico
  • Avançado
• Gráficos
  • Básico
• Janelas
  • Caixas de diálogo
  • Janela com leiaute
• Árvores
  • Árvore com ordenação por arrastar-e-soltar
• Leiautes
  • Básico
  • Sanfona
  • Leiaute tabular
• Caixa de combinação
  • Caixa de combinação com busca
• Formulários
  • Básico
• Visualizador de Imagens
  • Avançado
• Combinação
  • Leitor de RSS
  • Desktop
• Miscelânea
  • Google Maps
  • Dicas
  • Redimensionamento
  • Botões
  • Arrastar-e-soltar de uma grade para um formulário