Arquivos de sites

jQuery – O método load()

Como descrito nos capítulos anteriores, existem várias maneiras de usar AJAX com jQuery, e elas devem com certeza ser usadas dependendo da situação. Um dos métodos mais simples e ainda sim poderoso para carregar dados assincronamente é o método load(). Você o usa escolhendo um elemento onde você quer o conteúdo carregado e então chama o método load() nele. Ele recebe a URL que você deseja carregar, como parâmetro. Por exemplo, nós precisamos de um arquivo externo que nós podemos carregar. Nós vamos chamar de content.html e o conteúdo dele deve ser parecer com isso:

<div id="divContent">
        <b>This is external content</b>
</div>
And there's more of it

Salve isso como content.html, no mesmo diretório onde você mantém os outros arquivos de exemplo deste tutorial. Nós podemos carregar ele simples assim:

<div id="divTestArea1"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea1").load("content.html");
});
</script>

Se você tem o arquivo de conteúdo em outro diretório, ou se você nomeou ele diferentemente, você terá que mudar o parâmetro para o método load consequentemente. Isso é tudo que ele precisa para carregar o conteúdo de um arquivo externo com jQuery e o método load. Um truque muito legal é que você pode na verdade passar um seletor (selector) juntamente com a URL, para apenas pegar uma parte da página. No primeiro exemplo, nós carregamos o arquivo inteiro, mas no exemplo seguinte, nós vamos apenas usar a div, que contém a primeira sentença:

<div id="divTestArea2"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea2").load("content.html #divContent");
});
</script>

Como você pode ver, nós simplesmente anexamos um seletor jQuery padrão ao parâmetro, depois da URL, separada por um espaço. Isso faz o jQuery selecionar o conteúdo fora e apenas passa as partes correspondidas de volta ao container. Você pode usar qualquer tipo de seletor jQuery para retirar esse truque, que o torna muito poderoso.

O método load pode receber dois parâmetro extra: Um conjunto de string de consulta (querystring) pares de chave/valor, e uma função de callback que será executada quando o método load terminar, não importa se ele tiver êxito ou falhar. Aqui está um exemplo onde nós usamos a função callback para informar sobre o resultado. Normalmente, você deveria provavelmente apenas mostrar uma mensagem se o método falhasse, mas para ilustrar como isso funciona, nós fazemos isso se o método falhar também. Eu me certifiquei que isso falharia por exemplo, requisitando um arquivo que não existe:

<div id="divTestArea3"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").load("no-content.html", function(responseText, statusText, xhr)
        {
                if(statusText == "success")
                        alert("Successfully loaded the content!");
                if(statusText == "error")
                        alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
        });
});
</script>

Como você pode ver, a função de callback especifica 3 parâmetros, que jQuery preencherá para você. O primeiro parâmetro irá conter o conteúdo resultado se a chamada tiver sucesso. O segundo parâmetro é uma string que especifica o estado da chamada, ex. “sucesso” ou “erro”. Você pode usar isso para ver se a chamada foi bem sucedida ou não. O terceiro parâmetro é o objeto XMLHttpRequest usado para executar a chamada AJAX. Isso conterá propriedades que você pode usar para ver o que deu errado e muitas outras coisas.

Fonte: jQuery-tutorial.net

jQuery – O método unbind()

No capítulo anterior, nós usamos o método bind() para inscrever a eventos com jQuery. No entanto, você pode precisar remover essas inscrições novamente por vários motivos, para prevenir o manipulador de eventos seja executado uma vez que o evento ocorra. Nós fazemos isso com o método unbind(), que em sua forma mais simples se parece com isso:

$("a").unbind();

Isso irá remover quaisquer manipuladores de evento que você tenha anexado com a função bind(). Porém, você pode querer remover apenas inscrições de evento de um tipo específico, por exemplo clicks e doubleclicks:

$("a").unbind("click doubleclick");

Simplesmente separe os tipos de evento com espaço. Aqui esta um exemplo mais completo, onde você pode ver isso tudo em ação:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        $("a").bind("click", function() {
                $("a").unbind("click");
                alert("First and only message from me!");
        });
});
</script>

Neste pequeno exemplo, nós inscrevemos o evento de click a todos os links. Porém uma vez que o link é clicado, nós removemos todas as inscrições e alertamos o clicador sobre isso. O manipulador de evento não será mais ativado pelos links.

jQuery permite você se inscrever ao mesmo tipo de evento mais de uma vez. Isso pode vir a calhar se você quiser o mesmo evento faça mais de uma coisa em diferentes situações. Você faz isso chamando o método bind() para cada vez que você quer anexar um pedaço de código para isso, assim:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        $("a").bind("click", function() {
                alert("First event handler!");
        });
        
        $("a").bind("click", function() {
                alert("Second event handler!");
                $("a").unbind("click");
        });
});
</script>

Porém, abre-se para a possibilidade de uma vez que você desvincule um evento, você pode estar removendo inscrições de evento usado todo em um outro lugar do seu código, que você ainda precisa. Se você tentar o exemplo, você vai ver o resultado disso – quando você clica em um link, todos as inscrições de evento são removidas. jQuery permite que você especifique um argumento secundário, que contém uma referencia a um manipulador específico que você gostaria de remover. Desse jeito, nós podemos ter certeza que nós apenas removemos a inscrição de evento que nós pretendíamos. Aqui está um exemplo:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        var handler1 = function() 
        {
                alert("First event handler!");
        }
        
        var handler2 = function() 
        {
                alert("Second event handler!");
                $("a").unbind("click", handler2);
        }
        
        $("a").bind("click", handler1);
        $("a").bind("click", handler2);
});
</script>

Especificando handler2 como parâmetro secundário, apenas esse manipulador de evento específico é removido. Tente o exemplo. A mensagem secundária é apenas mostrada a primeira vez que você clicar no link.

Fonte: jquery-tutorial.net

jQuery – Pegando e atribuindo atributos [attr()]

No capítulo anterior, nós vimos como foi fácil pegar e atribuir conteúdo texto e HTML de/para um elemento. Felizmente, modificar um ou mais atributos de um elemento é igualmente fácil. Nós usamos o método attr() para isso, que na forma mais simples recebe um parâmetro: O nome do atributo que nós desejamos pegar:

<a href="http://www.google.com" id="aGoogle1">Google Link</a>
<script type="text/javascript">
$(function()
{
        alert($("#aGoogle1").attr("href"));
});
</script>

Neste exemplo, nós pegamos o valor do atributo “href” do nosso link e então mostramos ele ao usuário. Para mudar um atributo, nós simplesmente especificamos um parâmetro extra:

<a href="http://www.google.com" id="aGoogle2">Google Link</a>
<script type="text/javascript">
$(function()
{
        $("#aGoogle2").attr("href", "http://www.google.co.uk");
});
</script>

Isso irá mudar o link para apontar para versão britânica do Google. O método att() pode também receber um mapa de pares nome/valor, para atribuir múltiplos atributos ao mesmo tempo. Aqui nós atribuímos ambos atributos href e title simultâneamente:

<a href="http://www.google.com" id="aGoogle3">Google Link</a>
<script type="text/javascript">
$(function()
{
        $("#aGoogle3").attr(
        { 
                "href" : "http://www.google.co.uk", 
                "title" : "Google.co.uk"
        });
});
</script>

O método attr() também suporta a sobrecarga especial onde o parâmetro  de valor é em vez disso uma função de callback, permitindo você acessar o índice do element selecionado assim como o valor do atributo existente. Aqui está um exemplo disso:

<a href="http://www.google.com/">Google.com</a><br />
<a href="http://www.google.co.uk/">Google UK</a><br />
<a href="http://www.google.de/">Google DE</a><br />
<script type="text/javascript">
$(function()
{
        $("a.google").attr("href", function(index, oldValue)
        {
                return oldValue + "imghp?tab=wi";
        });
});
</script>

Nós simplesmente mudamos todos os links do Google para apontar para a busca de imagem ao invés da página padrão, adicionando um parâmetro extra ao atributo href. Nesse exemplo nós não usamos realmente o parâmetro índice, mas nós poderíamos se nós precisássemos, para nos dizer qual índice na lista de elementos selecionados nós estamos atualmente lidando.

Fonte: jquery-tutorial.net

jQuery – Introdução a manipulação do DOM – Pegando e atribuindo conteúdo [text(), html() and val()]

Introdução a manipulação do DOM

Um dos mais importantes aspectos do JavaScript e desse modo jQuery, é a manipulação do DOM. O DOM significa Document Object Model (Modelo de Objeto de Documento) e é um mecanismo para representação e interação com nossos documentos HTML, XHTML ou XML. Ele lhe permite navegar e manipular seus documentos através de uma linguagem de programação, que no navegador será quase sempre JavaScript. A navegação e manipulação do DOM usando o JavaScript padrão pode muito complicado, mas felizmente para nós, o jQuery vem com um monte de métodos relacionado ao DOM, fazendo isso tudo muito mais fácil.

No primeiro exemplo “Hello, world!” desse tutorial, nós comparamos o trabalho de encontrar um elemento e atribuir um texto a ele usando primeiro jQuery e então JavaScript. Esta é apenas a ponta do iceberg, porém, e nos capítulos seguintes você verá como é fácil manipular o conteúdo dos seus documentos com jQuery.

Pegando e atribuindo conteúdo [text(), html() and val()]

O aspecto mais simples da manipulação do DOM é recuperar e atribuir text (texto), valores (valores) e HTML. Essas três coisas podem parecer a mesma coisa, mas elas não são. Text é uma representação literal (sem HTML) do conteúdo interno para todos os elementos normais, values são para elementos de formulário e HTML é o mesmo que text, mas incluindo qualquer marcação (markup).

Felizmente para nós, o jQuery vem com um método para cara um dos três, nos permitindo recuperar e atribuir essas propriedades: Os métodos text(), html() e val(). Aqui está um pequeno exemplo que mostrará a você a diferença entre eles e como eles são simples de usar:

<div id="divTest">
        <b>Test</b>
        <input type="text" id="txtTest" name="txtTest" value="Input field" />
</div>
<script type="text/javascript">
$(function()
{
        alert("Text: " + $("#divTest").text());
        alert("HTML: " + $("#divTest").html());
        alert("Value: " + $("#divTest").val());
        
        alert("Text: " + $("#txtTest").text());
        alert("HTML: " + $("#txtTest").html());
        alert("Value: " + $("#txtTest").val());
});
</script>

Então uma chamada  para um desses métodos sem parâmetros irá simplesmente retornar a propriedade desejada, Se nós queremos atribuir a propriedade em vez disso, nós simplesmente especificamos um parâmetro extra. Aqui está um exemplo completo:

<div id="divText"></div>
<div id="divHtml"></div>
<input type="text" id="txtTest" name="txtTest" value="Input field" />

<script type="text/javascript">
$(function()
{
        $("#divText").text("A dynamically set text");
        $("#divHtml").html("<b><i>A dynamically set HTML string</i></b>");
        $("#txtTest").val("A dynamically set value");
});
</script>

E isso é o quão fácil é para atribuir texto, HTML e valores.

Essas três funções vêm com uma sobrecarga a mais, onde você especifica uma função de callback como primeiro e único parâmetro. Essa função de callback será chamada com dois parâmetros pela jQuery, o índice do elemento corrente na lista de elementos selecionados, assim como o valor existente, antes dele ser substituído com um novo valor. Você então retorna a string que você deseja usar como o novo valor para função. Essa sobrecarga funciona para ambos html(), text() e val(), mas por motivo de simplicidade, nós apenas usamos a versão do text() neste exemplo:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script type="text/javascript">
$(function()
{
        $("p").text(function(index, oldText) {
                return "Existing text: " + oldText + ". New text: A dynamically set text (#" + index + ")";
        });
});
</script>

Nós começamos com três elementos de parágrafos semelhantes, que o texto é a única diferença deles. No código jQuery, nós selecionamos todos eles e então usamos a versão especial do método text() para substituir o texto atual com um novo texto construído, baseado nos dois parâmetros que jQuery fornece a nós: O índice do elemento atual e também o seu texto atual. Esse novo texto é então retornado ao jQuery, que irá substituir texto atual pelo novo.

Fonte: jquery-tutorial.net / jquery-tutorial.net

jQuery – Animações customizadas com o método animate()

Nos capítulos anteriores, nós vimos dentro dos métodos de efeitos embutidos fading e sliding do jQuery. Porém, você pode muito mais que isso. Com o método animated(), você pode criar animações customizada onde você manipula quase qualquer propriedade CSS numérica de um elemento. Isso permite você por exemplo mover uma caixa devagar através uma tela ou subir ou descer. Vamos tentar alguma coisa muito simples:

<div style="height: 60px;">
        <div id="divTestBox1" style="height: 50px; width: 50px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox1").animate(
                {
                        "left" : "200px"
                }
        );
});
</script>

O primeiro, e único necessário, parâmetro da função animated é o mapa das propriedades do CSS que você deseja que seja alterado. Nesse caso, nós temos um elemento div absolutamente posicionado, que nós dissemos ao jQuery para mover até ele alcançar 200 pixels na propriedade left.
O segundo parâmetro permite você especificar a duração da animação em milissegundos ou como “slow” ou “fast” que é o mesmo de 600 ou 200ms. Com isso, nós podemos diminuir o exemplo acima mais do que nós queremos:

<div style="height: 60px;">
        <div id="divTestBox2" style="height: 50px; width: 50px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox2").animate(
                {
                        "left" : "200px"
                }, 
                5000
        );
});
</script>

Com o terceiro parâmetro, nós podemos especificar uma função de callback para ser chamada uma vez que a  animação terminar. Isso pode ser bastante útil para executar um número diferente de animações em uma fila. Por exemplo, veja esse exemplo:

<div style="height: 40px;">
        <div id="divTestBox3" style="height: 20px; width: 20px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox3").animate(
                { "left" : "100px" }, 
                1000,
                function()
                {
                        $(this).animate(
                                { "left" : "20px" },
                                500,
                                function()
                                {
                                        $(this).animate({ "left" : "50px" }, 500);
                                }
                        )
                }
        );
});
</script>

Isso pode parecer um pouco repetitivo, mas o que nós fazemos é que nós chamamos o método animado e perguntamos pela propriedade left da nossa “div” de teste para ser animada até ela alcançar 100 pixels no left. Nós queremos que isso leve 1 segundo (1000 milissegundos) e uma vez que isso se complete, nós desejamos que uma nova animação comece, que mova isso de volta para 20 pixels dentro de meio segundo, e assim que ESSA animação finalize, nós movemos ela um pouco para direito de novo, então agora ela tem uma propriedade left de 50 pixels.

Porém, desde que o jQuery vem com funcionalidade de fila para animações, você pode normalmente realizar o exemplo acima de um modo muito mais simples. Isso entretanto, apenas se aplica quando você quer um conjunto de animações executadas após cada uma – se você quer fazer outra coisa quando uma animação estiver completa, o exemplo acima será ainda o caminho a ser seguido. Aqui está uma versão de fila:

<div style="height: 40px;">
        <div id="divTestBox4" style="height: 20px; width: 20px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestBox4").animate({ "left" : "100px" }, 1000);
        $("#divTestBox4").animate({ "left" : "20px" }, 500);
        $("#divTestBox4").animate({ "left" : "50px" }, 500);
});
</script>

Fonte: jquery-tutorial.net

jQuery – Selectors usando atributos

No capítulo anterior, nós vimos como podemos encontrar elementos em uma página a partir de suas classes e IDs. Essas duas propriedades estão relacionadas por que o fato de que você pode usar elas para estilizar os elementos com CSS, mas com jQuery, você pode na realidade encontrar elementos baseado em qualquer tipo de atributo. Ele vem com um monte de tipo de selector de atributo e neste artigo, nós veremos cara um deles.

Encontre elementos com um atributo específico

A tarefa mais básica quando selecionando elementos baseados em atributos é encontrar todos os elementos que tem um atributo específico. Esteja ciente que o próximo exemplo não necessita o atributo ter um valor específico, de fato, ele nem mesmo precisa ter um valor. A sintaxe para esse selector é um conjunto de colchetes com o nome do atributo desejado dentro dele, por exemplo [name] ou [href]. Aqui vai um exemplo:

<span title="Title 1">Test 1</span><br />
<span>Test 2</span><br />
<span title="Title 3">Test 3</span><br />

<script type="text/javascript">
$(function()
{
        $("[title]").css("text-decoration", "underline");
});
</script>

Nós usamos o selector de atributo para encontrar todos os elementos na página que tem um atributo title e depois um underline. Como mencionado, isso irá combinar elementos com um elemento title sem importar qual é o valor dele, mas as vezes você vai querer encontrar elementos com uma tributo específico com um valor específico.

Encontra elementos com um valor específico para um atributo específico

Aqui está um exemplo onde nós encontramos elementos com um valor específico

<a href="http://www.google.com" target="_blank">Link 1</a><br />
<a href="http://www.google.com" target="_self">Link 2</a><br />
<a href="http://www.google.com" target="_blank">Link 3</a><br />
<script type="text/javascript">
$(function()
{
        $("a[target='_blank']").append(" [new window]");
});
</script>

O selector simplesmente diz ao jQuery para encontrar links (os elemenetos <a>) que tem um atributo alvo que é igual o valor “_blank” e então acrescenta o texto “[new window]” a ele. Mas e se você está procurando por todos os elementos que não tem o valor? Inverter o selector é muito fácil:

$("a[target!='_blank']").append(" [same window]");

A diferença é o != em vez de =, um jeito comum de negativar um operador dentro de muitas linguagens de programação.

E aqui está ainda mais possibilidades:

Encontre elementos com um valor que começa com uma string específica usando o operador ^=:

$("input[name^='txt']").css("color", "blue");

Encontre elementos com um valor que termina com uma string específica usando o operador $=:

$("input[name$='letter']").css("color", "red");

Encontre elementos com um valor o qual contenha uma palavra específica:

$("input[name*='txt']").css("color", "blue");

Fonte: jquery-tutorial.net

jQuery – Evento Ready e Encadeamento de método (Method chaining)

Como mencionado, é uma boa prática esperar o documento ser totalmente carregado (loaded) e pronto (ready), antes de trabalhar com ele. Isso também permite você ter seu código JavaScript antes do body (corpo) do seu documento, na sessão head (cabeçalho), senão diretamente ou através de um link para um arquivo JavaScript externo. Você pode fazer isso apenas colocando seu código dentro do evento ready do documento. Nós vamos usar o mesmo exemplo como no capítulo “Hello, world!”, mas dessa vez o código está dentro do evento ready:

<div id=”divTest1″></div>
<script type=”text/javascript”>
function DocumentReady()
{
$(“#divTest1”).text(“Hello, world!”);
}

$(document).ready(DocumentReady);
</script>

O que fazemos aqui é que criamos uma function (função), chamada DocumentReady, a qual deve ser disparadas assim que o documento estiver pronto para manipulação do DOM. Na última linha, usamos o método ready() para atribuir nossa função ao evento ready, para dizer ao jQuery que assim que o documento estiver pronto, nós queremos que ele chame nossa função.

Entretanto, nós podemos encurtá-la um pouco usando uma função anônima (anonymous function) do JavaScript em vez disso. Isso basicamente apenas significa que ao invés de declarar a função e dá-la um nome, nós simplesmente criamos ela e então imediatamente passamos a referencia à função ready(). Se você é novo em JavaScript, então isso pode parecer demasiadamente complicado, mas assim você se acostuma a isso, você talvez possa apreciar as poucas keystrokes e o menor espaço necessário para realizar o mesmo:

<div id=”divTest2″></div>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“#divTest2”).text(“Hello, world!”);
});
</script>

Mas com certeza, isso ainda não foi curto o bastante para o time do jQuery, então eles decidiram criar uma versão (sobrecarga) do construtor do jQuery, que leva uma função ready como um parâmetro, para fazer isso ainda mais curto:

<div id=”divTest3″></div>
<script type=”text/javascript”>
$(function(){
$(“#divTest3”).text(“Hello, world!”);
});
</script>

No ultimo exemplo, nossa função anonima é passada diretamente ao contrutor do jQuery, que a atribui ao evento ready. Como você verá quando você testar o código, o evento é disparado assim que a página for carregada, a maioria das vezes tão rápido que você nem se quer percebe.

Como já descrito, envolver nosso código na função de evento ready é a melhor prática para trabalhar com jQuery em nosso documento, e portanto você verá esse tutorial usando essa abordagem na maioria dos exemplos, a não ser ignorado para manter o tamanho dos nossos exemplos baixo.

Encadeamento de método (Method chaining)

Também um outro aspecto de tantos outros aspectos realmente legais do jQuery é o fato de que a maioria dos métodos retornam um objeto jQuery que você pode então usar para chamar outro método. Isso permite você fazer um encadeamento de método, onde você pode chamar múltiplos métodos no mesmo conjunto de elementos, que é realmente agradável porque isso salva você e o navegador de ter que procurar o mesmo elemento mais de uma vez. Aqui vai um exemplo, e não se preocupe sobre os métodos do jQuery usados nos exemplos seguintes – eles serão explicados nos capítulos posteriores:

<div id=”divTest1″></div>
<script type=”text/javascript”>
$(“#divTest1”).text(“Hello, world!”).css(“color”, “blue”);
</script>

Isso funciona assim: Nós instanciamos um novo objeto jQuery e selecionamos o elemento divTest1 com o caractere $, que é o atalho para a classe jQuery. No retorno, nós pegamos um objeto jQuery, permitindo-nos manipular o elemento selecionado. Nós usamos aquele objeto para chamar o método text(), que define o texto ao(s) elemento(s) selecionado(s). Esse método retorna o objeto jQuery de novo, nos permitindo usar outra chamada de método diretamente no valor de retorno, que é o método css().

Nós podemos adicionar mais métodos se nós precisarmos, mas até certo ponto, a linha de código se tornará bastante grande. Felizmente para nós, o JavaScript não é muito rigoroso em relação a sintaxe, então você pode formatar como você quiser, incluindo linebreaks (quebra de linha) e indentações.  Por exemplo, isso irá funcionar muito bem também:

<div id=”divTest2″></div>
<script type=”text/javascript”>
$(“#divTest2”).text(“Hello, world!”)
.removeClass(“blue”)
.addClass(“bold”)
.css(“color”, “blue”);
</script>

O JavaScript irá simplesmente jogar fora os espaços extras em branco, quando interpretar o código e executa-lo como uma longa linha de código com várias chamadas de métodos.

Observe que alguns métodos não retornam o objeto jQuery, enquanto outro apenas retornam isso dependendo dos parâmetros que você passar pra ele. Um bom exemplo disso é o método text() usado acima. Se parâmetros não forem passados a ele, o texto atual do(s) objeto(s) selecionado(s) é retornado em vez do objeto jQuery, enquanto um único parâmetro provoca o jQuery a definir o texto especificado e retornar um objeto jQuery.

Fonte: jquery-tutorial.net / jquery-tutorial.net