Arquivos de sites

jQuery – Os métodos append() e prepend()

Adicionar novos objetos a um element existente é muito fácil com jQuery. Aqui estão métodos para anexar ou prefixar, recebendo HTML em formato string, elementos DOM e ojbetos jQuery como parâmetros. No próximo exemplo, você verá como é fácil inserir novos elementos em uma lista, usando ambos os métodos append() e prepend():

<a href="javascript:void(0);" onclick="$('#olTestList1').append('<li>Appended item</li>');">Append</a>   
<a href="javascript:void(0);" onclick="$('#olTestList1').prepend('<li>Prepended item</li>');">Prepend</a>
<ol id="olTestList1">
        <li>Existing item</li>
        <li>Existing item</li>
</ol>

Nós temos dois links: O primeiro irá anexar um item a lista, significando que o novo item será inserido como último item. O outro link irá prefixar um link a lista, o que significa que o novo item será inserido como o primeiro item da lista. Neste exemplo, nós simplesmente inserimos um pedaço de HTML, mas nós poderíamos  ter gerado os novos itens com jQuery também, ou criado eles através do código JavaScript padrão e elementos DOM. De fato, ambos os métodos append() e prepend() recebem uma quantidade infinita de novos elementos como parâmetros. No próximo exemplo, nós vamos demonstrar isso também como a habilidade para adicionar elementos de várias formas:

<a href="javascript:void(0);" onclick="AppendItemsToList();">Append items</a>   
<ol id="olTestList2"></ol>
<script type="text/javascript">
function AppendItemsToList()
{
        var item1 = $("<li></li>").text("Item 1");
        var item2 = "<li>Item 2</li>";
        var item3 = document.createElement("li");
        item3.innerHTML = "Item 3";
        
        $("#olTestList2").append(item1, item2, item3);
}
</script>

Como você pode ver, o item1 é um elemento gerado por jQuery, o item2 é uma simples string HTML e o item3 é um elemento gerado por JavaScript DOM.Todos eles foram anexado a lista usando a mesma chamada e claro isso deveria funcionar para o método prepend() também.

Existem variações dos métodos append() e prepend(), chamados appendTo() e prependTo(). Eles fazem praticamente a mesma coisa, mas eles fazem isso ao contrário, então em invés de os chamarem nos elementos que você deseja anexar/prefixar, com um parâmetro do que é para ser anexado/prefixado, você faz exatamente o oposto. Qual usar obviamente depende da situação, mas aqui está um exemplo mostrando a você como usar ambos:

<a href="javascript:void(0);" onclick="PrependItemsToList();">Prepend items</a>   
<ol id="olTestList3"></ol>
<script type="text/javascript">
function PrependItemsToList()
{       
        $("#olTestList3").prepend($("<li></li>").text("prepend() item"));
        $("<li></li>").text("prependTo() item").prependTo("#olTestList3");
}
</script>

Neste exemplo, nós prefixamos os itens, mas você poderia com certeza fazer a mesma coisa usando append() e appendTo(). Como você pode ver, o resultado é o mesmo – apenas a ordem do que nós fazemos difere.

Fonte: jquery-tutorial.net

Anúncios

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 – Fading de elementos (Exibir/Esconder)

Fazer simples animação é muito fácil com jQuery. Um desses efeitos é o fading em um elemento, para exibí-lo ou escondê-lo. Aqui está um simples exemplo, onde nós exibimos uma caixa escondida, usando o método fadeIn():

<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>
<a href="javascript:void(0);" onclick="ShowBox();">Show box</a>
<script type="text/javascript">
function ShowBox()
{
        $("#divTestArea1").fadeIn();
}
</script>

Você pode dar um fade em um monte de elementos diferentes, como divs, spans ou links. O método fadeIn() pode receber três parâmetros. O primeiro permite você especificar a duração do efeito em milissegundos, ou “fast” (rápido) ou “slow” (devagar), que é o mesmo que especificar 200 ou 600 milissegundos. Aqui está um exemplo disso em uso:

<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
<a href="javascript:void(0);" onclick="ShowBoxes();">Show boxes</a>
<script type="text/javascript">
function ShowBoxes()
{
        $("#divTestArea21").fadeIn("fast");
        $("#divTestArea22").fadeIn("slow");
        $("#divTestArea23").fadeIn(2000);
}
</script>

Não se importe com todo o HTML, está lá apenas para que você possa ver a diferença entre as durações do fading. Agora, o segundo parâmetro pode ser o nome de uma função de atenuação (que nós não vamos usar nesse tutorial) ou uma função de callback que você pode fornecer, para ser chamada uma vez que o efeito terminar. Aqui está um exemplo disso, combinado com o uso do método fadeOut(), que obviamente tem o efeito reverso do fadeIn():

<div id="divTestArea3" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").fadeIn(2000, function()
        {
                $("#divTestArea3").fadeOut(3000);
        });
});
</script>

Pode ter situações onde você quer esconder ou exibir um element dependendo do estado corrente do mesmo. Você poderia com certeza checar se ele está visível ou não, e então chamar ou fadeIn() ou fadeOut(), mas os desenvolvedores legais do jQuery tem nos fornecido um método específico para alternar (toggling) um elemento, chamado fadeToggle().  Ele leva os mesmo parâmetros como fadeIn() e fadeOut(), então ele é muito fácil de usar. Aqui está um pequeno exemplo:

<div id="divTestArea4" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div><br />
<a href="javascript:void(0);" onclick="ToggleBox();">Toggle box</a>
<script type="text/javascript">
function ToggleBox()
{
        $("#divTestArea4").fadeToggle("slow");  
}
</script>

E isso é quão fácil é usar os efeitos de fading do jQuery.

Fonte: jquery-tutorial.net

jQuery – O que é jQuery? Onde Programar?

O que é jQuery?

Uma vez que você veio a esta página, talvez você já tenha uma boa idéia sobre o que é jQuery, mas por segurança, aqui vai uma breve explicação. jQuery é um framework de JavaScript, qual o propósito é fazer isso muito mais fácil para usar JavaScript em seu website. Você poderia também descrever jQuery como uma camada de abstração, já que ela tem um monte de funcionalidades que você teria que escrever várias linhas de JavaScript para realizar e envolvê-las dentro de funções que você pode chamar com uma única linha de código. É importante observar que jQuery não substitui o JavaScript, e enquanto isso oferece atalhos sintáticos (syntactical shortcuts), o código que você escreve quando usa jQuery ainda é código JavaScript.

Com isso em mente, você deve estar ciente que você não precisa ser um expert em JavaScript para usar jQuery. De fato, o jQuery tenta simplificar muitas das coisas complicadas do JavaScript, como chamadas AJAX e manipulação de DOM, de modo que você pode fazer essas coisas sem conhecer muito sobre JavaScript.

Existem um monte de outros frameworks de JavaScript lá fora, mas até agora, jQuery parece ser o mais famoso e também o mais extensível, provado pelo fato de que você pode encontrar jQuery plugins para quase qualquer tarefa lá fora. O poder, a grande variedade de plugins e a bela sintaxe são o que fazem o jQuery esse excelente framework. Continue lendo para saber muito mais sobre ele e para ver porque nós o recomendamos.

Onde Programar? Um editor de jQuery

Assim como HTML, CSS e mesmo o habitual JavaScript, você pode escrever jQuery em qualquer tipo de editor, até mesmo no Windows Notepad. Entretanto, usar um simples editor de texto como Notepad para criar páginas web é como usar uma chave de fenda para furar um pedaço de madeira: Funciona, mas leva muito mais tempo e é a forma menos agradável.

Se você ja tem um editor HTML que permite você trabalhar facilmente com JavaScript, então ele possivelmente será bom para escrever jQuery também, mas existem editores lá fora que irão tratar o jQuery como um cidadão de primeira classe e ajudará você digitar isso mais rápido e mais eficientemente.

Eu pessoalmente utilize TSW WebCoder, o qual tem um monte de incríveis recursos IntelliSense para auxiliar você, cobrindo todas as tecnologias que você precisa: HTML, CSS, JavaScript, PHP e com certeza o jQuery. Se o seu atual editor já faz tudo isso, e você se sente confortável com ele, então certamente mantenha o mesmo – se não, então considere dar uma chance ao WebCoder.

> Mais informações sobre o TSW WebCoder (em Inglês) 

> Faça o Download do TSW WebCoder

Aqui vai alguns screenshots para mostrar para vocês porque o TSW WebCoder faz isso muito mais fácil para trabalhar com jQuery:

TSW WebCoder mostrando os método possíveis em um objeto jQuery
jQuery editor - Completion lists

TSW WebCoder mostrando os parâmetros do método fadeIn   jQuery editor - Parameter hints

Fontes: jquery-tutorial.net / jquery-tutorial.net