Arquivos de sites

jQuery – Pegando e atribuindo classes CSS

Assim como é fácil manipular o conteúdo e atributos dos elementos, como nós vimos no capítulo anterior, é igualmente fácil manipular o CSS dos elementos. O jQuery lhe dá acesso fácil para mudança tanto do atributo de estilo, que você manipula usando o método css(), como a(s) classe(s) de um elemento, onde vários métodos diferentes permitem você modificar isso.

Vamos começar olhando a mudança do atributo class (classe). O atributo class recebe um ou vários nomes de classes, que pode ou não referenciar a uma classe CSS definida no seu stylesheet. Geralmente faz, mas você pode de tempos em tempos adicionar nomes de classes aos seus elementos simplesmente para estar apto para alcançar eles facilmente pelo jQuery, já que o jQuery tem um excelente suporte para seleção de elementos baseado nos  nomes da classe.

Eu defini alguns seletores CSS bem simples no meu stylesheet, principalmente para propósitos de teste:

.bold {
        font-weight: bold;
}
.blue {
        color: blue;
}

No seguinte exemplo nós vamos usar três dos métodos mais interessantes relacionados à classe: hasClass(), que checa se um ou vários elementos já tem uma classe específica definida, addClass(), que simplesmente adiciona um nome de classe a um ou vários elementos e o método removeClass(), que  irá… bem, você provavelmente já adivinhou isso.

<a href="javascript:void(0);" onclick="ToggleClass(this);">Toggle class</a>
<script type="text/javascript">
function ToggleClass(sender)
{
        if($(sender).hasClass("bold"))
                $(sender).removeClass("bold");
        else
                $(sender).addClass("bold");
}
</script>

O exemplo é na realidade muito simples. Quando o link é clicado, nós enviamos o próprio link (this) como um parâmetro ao método ToggleClass() que nós temos definido. Nele, nós checamos se o remetente já tem a classe “bold” – se ele tiver nós o removemos, caso contrário nós o adicionamos. Isso é uma coisa muito comum de se fazer, então obviamente o pessoal do jQuery não quer  que nós escrevemos todas essas três linhas de código para isso. É por isso que eles implementaram o método toggleClass(), com o qual nós podemos transformar todo nosso exemplo avima dentro de uma única linha de código:

<a href="javascript:void(0);" onclick="$(this).toggleClass('bold');">Toggle class</a>

Com certeza, nós podemos selecionar multiplos elementos, onde nós podemos adicionar ou remover múltiplas classes, também. Aqui está um exemplo disso:

<div id="divTestArea1">
        <span>Test 1</span><br />
        <div>Test 2</div>
        <b>Test 3</b><br />
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea1 span, #divTestArea1 b").addClass("blue");
        $("#divTestArea1 div").addClass("bold blue");
});
</script>

Primeiro nós selecionamos as tags span e a b, a qual nós adicionamos uma única classe para: classe blue. Então nós selecionamos a tags div, que nós adicionamos duas classes, separadas por espaço: classe bold e a blue. O método removeClass() funciona apenas do mesmo jeito, permitindo você especificar várias classes para serem removidas, separadas por espaços.

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

jQuery – Introdução ao selectors (seletores) e Usando elementos, IDs e classes

Uma tarefa muito comum quando se está usando JavaScript, é ler e modificar o conteúdo da página. Para fazer isso, você precisa encontrar o(s) elemento(s) que você deseja modificar, e ai é onde o selector no jQuery ajudará você. Com o JavaScript normal, encontrar elementos pode ser extremamente pesado, ao menos que você precise encontrar um único elemento que tem um valor especificado no atributo ID. O jQuery pode ajudar você a encontrar elementos baseado em seus IDs, classes, tipos, atributos, valores de atributos e muito, muito mais. Ele é baseado no selectors do CSS e como você verá através desse tutorial, ele é extremamente poderoso. Quando usamos esse tipo de programa para fazer mudanças em seu site, é importante que você tenha autenticação de dois fatores (two factor authentication (em Inglês)) de modo que o seu site e computador não são compromissados.

Pela razão dessa ser uma tarefa tão comum, o construtor do jQuery vem em várias formas que recebem uma selector query como argumento (parâmetro), permitindo você localizar elementos com uma quantidade bastante limitada de código para uma eficiência ótima. Você pode instanciar o objeto jQuery simplesmente escrevendo jQuery() ou até mais curto usando o nome de atalho do jQuery: $().

Portanto, selecionar um conjunto de elementos é simples assim:

$(<query aqui>)

Com o objeto jQuery retornado, você pode então começar a usar e alterar os elementos que você encontrou.

Fonte

Usando elementos , IDs e classes

O selector #id

Um tipo de selector muito comum é o baseado em ID, que nós vimos no exemplo “Hello, world”. Ele usa o atributo ID de uma tag HTML para localizar o elemento desejado. Um ID deve ser único,então você deve apenas usar esse selectior quando você deseja localizar um único elemento. Para localizar um elemento com um ID específico, escreva um caractere hash (#), seguido pelo ID do elemento que você deseja localizar, assim:

$("#divTest")

Um exemplo disso em uso:

<div id="divTest"></div>
<script type="text/javascript">
$(function()
{
        $("#divTest").text("Test");
});
</script>

Agora, enquanto tiver apenas um único elemento que combina com a nossa query acima, você deve estar ciente que o resultado é uma lista, significando que isso pode conter mais de um elemento, se a query combina com mais de um. Um exemplo disso é combinar todos os elementos quais usam uma ou varias classes CSS.

O selector .class

Elementos com uma classe específica podem ser localizados escrevendo um caractere ponto (.) seguido pelo nome da classe. Aqui vai um exemplo:

<ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
</ul>
<script type="text/javascript">
$(function()
{
        $(".bold").css("font-weight", "bold");
});
</script>

O selector element

Você também pode combinar baseado em elementos nos nomes das tags.

You can also match elements based on their tag names. Por exemplo, você pode combiner todos os links emu ma página assim:

$(“a”)

Ou todas as tags div assim:

$(“div”)

Se você usar um selector de multi-elemento (multi-element), como o selector de classe que nós usamos no exemplo anterior, e nó sabemos que nós estamos procurando por emento de um tipo específico, é uma boa prática especificar o tipo do elemento antes do selector. Não é apenas mais preciso, mas também é mais rápido para o jQuery processar, resultando em sites mais responsivos. Aqui vai uma versão reescrita do exemplo anterior, onde nós usamos esse método:

$("span.bold").css("font-weight", "bold");

Isso combinará todos os elementos span com “bold” como classe. Claro, isso pode ser usado com IDs e praticamente com todos os outros selector também.

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