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

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