Arquivos de sites

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 – Primeiros passos; Hello, world!

Para usar jQuery, você precisa incluí-lo nas páginas onde deseja tirar proveito dele. Você pode fazer isso baixando o jQuery do site dele em www.jquery.com. Lá tem geralmente a escolha entre uma versão de “Produção” (Production) e uma versão de “Desenvolvimento” (Development).

A versão de “Produção” é para o seu site real na web, por que ela foi reduzida e comprimida para ocupar o mínimo de espaço, o que é importante para os seus visitantes, do qual o navegador terá que baixar o arquivo do jQuery juntamente com o resto do seu website. Para teste e desenvolvimento, a versão “Desenvolvimento” é melhor. Ela não foi reduzida ou comprimida, então quando você encontrar um erro, você pode na verdade ver onde no jQuery isso aconteceu.

Uma vez que o arquivo JavaScript do jQuery foi baixado, você terá que referenciá-lo em suas páginas, usando a tag HTML <script>. O jeito mais fácil é colocar o arquivo do jQuery baixado no mesmo diretório da página onde deseja usá-lo e então referenciá-lo assim, na sessão <head> do seu documento:

<script type="text/javascript" src="jquery-1.5.1.js"></script>

Uma parte da sua página deve agora se parecer com isso:

<head>
<title>jQuery test</title>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
</head>

Uma abordagem mais moderna, ao invés de você mesmo baixar e hospedar o jQuery, é incluí-lo de um CDN – Content Delivery Network (Rede de Fornecimento de Conteúdo). Tanto a Google quanto a Microsoft hospedam várias versões de jQuery e outros frameworks JavaScript. Isso lhe salva de ter que baixar e armazenar o framework jQuery, mas isso tem uma vantagem muito maior: Porque o arquivo vem de uma URL popular que outros websites podem utilizar também, há possibilidades de que quando as pessoas cheguem ao seu website e o navegador delas solicitar o framework jQuery, isso pode já estar no cachê, porque outro website está usando exatamente a mesma versão e arquivo. Além disso, a maioria dos CDN’s terão certeza de que uma vez que o usuário solicitou um arquivo dele, isso será fornecido por um servidor mais perto dele, então seus usuários Europeus não terão que transportar o arquivo por todo o caminho a partir dos Estados Unidos e assim por diante.

Você pode usar o jQuery de um CDN do mesmo jeito como você faria com a versão baixada, apenas a URL que muda. Por exemplo, para incluir o jQuery 1.5.1 a partir do Google, você deveria escrever o seguinte:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Eu sugiro que você use essa abordagem, a não ser que você tenha uma razão específica para você mesmo hospedar o jQuery. Aqui vai um link de informação do CDN do jQuery a partir do Google:

http://code.google.com/intl/da/apis/libraries/devguide.html#jquery

Ou se você preferir usar a partir da Microsoft:

http://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0

Vamos ao Hello, world!

Todo tutorial de programação decente começará com um exemplo “Hello, world!” e este tutorial é também um desses. No capítulo anterior, nó aprendemos como incluir o jQuery na nossa página, de modo que nós podemos começar a usar todos esses grandes recursos. Você precisa conhecer um pouco mais sobre como jQuery trabalha, antes de você começar a escrever seu próprio código, mas apenas para ter certeza que tudo está funcionando, e para você ver como é simples o jQuery, vamos começar com um pequeno exemplo:

<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>

Ok, então temos uma tag div com o id “divTest1”. No código JavaScript nós usamos o atalho $ para acessar o jQuery, então nós selecionamos todos os elementos com um id “divTest1” (há apenas um porém) e setamos seu texto para “Hello, world!”. Você pode não saber o suficiente sobre jQuery para entender porque e como isso funciona, mas como você progredirá através deste tutorial, todos esses elementos serão explicados em detalhes.

Mesmo uma tarefa tão simples como essa deve na verdade necessitar de um bom número extra de keystrokes se você tivesse que fazer isso em JavaScript puro, sem ajuda do jQuery:

<div id="divTest2"></div>
<script type="text/javascript">
document.getElementById("divTest2").innerHTML = "Hello, world!";
</script>

E isso seria ainda maior se nosso elemento HTML não tivesse um ID, por exemplo, apenas uma classe.

Normalmente, entretanto, você espera pelo documento entrar no estado READY (Pronto) antes de você começar manipular seu conteúdo. Os exemplos acima funcionarão na maioria dos navegadores e provavelmente até mesmo funcionará quando você fizer mais coisas avançadas, mas determinadas tarefas podem falhar se você tentar fazê-las antes do documento estar carregado (loaded) e pronto (ready). Felizmente, o jQuery faz isso muito fácil também.

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