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 – Selectors relação Parent/child (Pai/filho)

O jQuery também permite você selecionar elementos baseado em seus elemento pai. Temos duas variações: Uma que vai apenas combinar elementos que tem um filho direto ao elemento pai, e um qual irá combinar todo o caminho através da hierarquia, ex.: um filho de um filho de um filho de um elemento pai.

A sintaxe para encontrar filhos que são descendentes direto de um elemento se parece com isso:

$(“div > a”)

Esse selector irá encontrar todos os links que são filho direto de um elemento div. Substituindo o símbolo de “maior que” por um simples espaço em branco irá mudar isso para combinar todos links dentro de um elemento div, não interessa se eles estão diretamente relacionados ou não:

$(“div a”)

Aqui está um exemplo onde nós colorimos tags bold de azul se elas são descendentes diretas da primeira área de teste:

<div id="divTestArea1">
        <b>Bold text</b>
        <i>Italic text</i>
        <div id="divTestArea2">
                <b>Bold text 2</b>
                <i>Italic text 2</i>
                <div>
                        <b>Bold text 3</b>
                </div>
        </div>
</div>
<script type="text/javascript">
$("#divTestArea1 > b").css("color", "blue");
</script>

Como você verá, apenas a primeira tag bold está colorida. Agora, se você usou a segunda abordagem, ambas tags bold deverão estar coloridas de azul. Tente o seguinte exemplo, onde a única coisa alterada foi o caractere “maior que” que foi substituído por um espaço em branco, observe que nós também aceitados descendentes não diretos ou “netos” assim eles são chamados algumas vezes:

<div id="divTestArea1">
        <b>Bold text</b>
        <i>Italic text</i>
        <div id="divTestArea2">
                <b>Bold text 2</b>
                <i>Italic text 2</i>
                <div>
                        <b>Bold text 3</b>
                </div>
        </div>
</div>
<script type="text/javascript">
$("#divTestArea1 b").css("color", "blue");
</script>

Agora a coisa legal é que você pode na verdade voltar a cima da hierarquia se necessário, usando o método parent().

Fonte: jquery-tutorial.net