Seletores jQuery: Classificação e Operações Básicas

Selecionar elementos (tags) com características semelhantes.

2. Aprendendo operações básicas

2.1. Vinculação de eventos

A função de entrada do jQuery é executada após o documento DOM ser completamente carregado.

window.onload só pode ser definido uma vez; se definido várias vezes, o último sobrescreve os anteriores.
$(function) pode ser definido várias vezes e todas as funções serão executadas.

2.3. Controle de estilo: método css()

// Usando propriedade CSS no formato camelCase $("#div1").css("backgroundColor", "pink");


</div><div>```

<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>Vinculação de Eventos</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // Função de entrada do jQuery
        $(function () {
            // Adiciona evento de clique ao botão com id "botao1"
            $("#botao1").click(function () {
                alert("abc")
            });

            // Altera fundo dos divs
            $("#div1").css("background-color", "red");
            $("#div2").css("backgroundColor", "pink");
        });

        // Múltiplas funções de entrada são permitidas
        $(function () {
            alert("abc");
        });
        $(function () {
            alert("abcd");
        });
    </script>
</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
    <input type="button" id="botao1" value="Clique em mim">
</body>
</html>

3.1. Seletores básicos

Seletor de tag (elemento): $("nomeTagHTML") – obtém todos os elementos que correspondem ao nome da tag.
Seletor de ID: $("#valorId") – obtém o elemento com o ID especificado.
Seletor de classe: $(".valorClasse") – obtém todos os elementos com a classe CSS especificada.
Seletor de união (múltiplo): $("seletor1, seletor2, ...") – obtém todos os elementos selecionados por qualquer um dos seletores.

3.2. Seletores hierárquicos

Seletor descendente: $("A B") – seleciona todos os elementos B que são descendentes de A (incluindo netos).
Seletor filho: $("A > B") – seleciona todos os elementos B que são filhos diretos de A.

3.3. Seletores de atributo

Seletor por nome de atributo: $("A[nomeAtributo]") – elementos que possuem o atributo especificado.
Seletor por valor de atributo: $("A[nomeAtributo='valor']") – elementos cujo atributo tem exatamente o valor especificado.
Seletor composto de atributos: $("A[nomeAtributo='valor'][outroAtributo]") – elementos que satisfazem múltiplas condições de atributos simultaneamente.

3.4. Seletores de filtro

Primeiro elemento: $("A:first") – primeiro elemento entre os selecionados.
Último elemento: $("A:last") – último elemento entre os selecionados.
Negativo: $("A:not(seletor)") – elementos que não correspondem ao seletor especificado.
Índice par: $("A:even") – elementos de índice par (começando em 0).
Índice ímpar: $("A:odd") – elementos de índice ímpar.
Índice igual: $("A:eq(index)") – elemento em um índice específico.
Índice maior que: $("A:gt(index)") – elementos com índice maior que o valor.
Índice menor que: $("A:lt(index)") – elementos com índice menor que o valor.
Títulos: $(":header") – seleciona todos os elementos de cabeçalho (h1 a h6).

3.5. Seletores de filtro de formulário

Elementos habilitados: $("A:enabled") – campos de formulário que estão habilitados.
Elementos desabilitados: $("A:disabled") – campos de formulário desabilitados.
Selecionados (checkbox/radio): $("A:checked") – elementos do tipo radio ou checkbox que estão marcados.
Selecionados (dropdown): $("A:selected") – opções selecionadas em um elemento <select>.

        // Botão 2: altera fundo de todos os elementos <div>
        $("#botao2").click(function () {
            $("div").css("backgroundColor", "red");
        });

        // Botão 3: altera fundo de todos os elementos com classe "mini"
        $("#botao3").click(function () {
            $(".mini").css("backgroundColor", "red");
        });

        // Botão 4: altera fundo de todos os <span> e do elemento com id "two"
        $("#botao4").click(function () {
            $("span, #two").css("backgroundColor", "red");
        });
    });
</script>

<h1>Persistência cria milagres</h1>
<h2>Confiança vem do esforço</h2>

<div id="one">id = one</div>
<div id="two" class="mini">
    id = two, class = mini
    <div class="mini">class = mini</div>
</div>
<div class="one">
    class = one
    <div class="mini">class = mini</div>
    <div class="mini">class = mini</div>
</div>
<div class="one">
    class = one
    <div class="mini01">class = mini01</div>
    <div class="mini">class = mini</div>
</div>
<span class="spanone">span com class=spanone</span>
<span class="mini">span com class=mini</span>
<input type="text" value="zhang" id="username" name="username">

<h1>Persistência</h1>
<h2>Confiança</h2>

<div id="one">id = one</div>
<div id="two" class="mini">
    id = two, class = mini
    <div class="mini">class = mini</div>
</div>
<div class="one">
    class = one
    <div class="mini">class = mini</div>
    <div class="mini">class = mini</div>
</div>
<div class="one">
    class = one
    <div class="mini01">class = mini01</div>
    <div class="mini">class = mini</div>
</div>
<span class="spanone">span</span>

<div id="one">id = one</div>
<div id="two" class="mini" title="test">
    id = two, class = mini, title = "test"
    <div class="mini">class = mini</div>
</div>
<div class="visible">class = one (escondido)</div>
<div class="one" title="test02">
    class = one, title = "test02"
    <div class="mini01">class = mini01</div>
    <div class="mini" style="margin-top:0px;">class = mini</div>
</div>
<div class="visible">Escondido</div>
<div class="one"></div>
<div id="mover">Animação</div>
<input type="text" value="zhang" id="username" name="username">

<h1>Persistência</h1>
<h2>Confiança</h2>
<div id="one">id = one</div>
<div id="two" class="mini">
    id = two, class = mini
    <div class="mini">class = mini</div>
</div>
<div class="one">
    class = one
    <div class="mini">class = mini</div>
    <div class="mini">class = mini</div>
</div>
<div class="one">
    class = one
    <div class="mini01">class = mini01</div>
    <div class="mini">class = mini</div>
</div>

<br><br>
<input type="text" value="Valor desabilitado 1" disabled="disabled">
<input type="text" value="Valor habilitado 1">
<input type="text" value="Valor desabilitado 2" disabled="disabled">
<input type="text" value="Valor habilitado 2">

<br><br>
<input type="checkbox" name="itens" value="Beleza"> Beleza
<input type="checkbox" name="itens" value="TI"> TI
<input type="checkbox" name="itens" value="Finanças"> Finanças
<input type="checkbox" name="itens" value="Gestão"> Gestão

<br><br>
<input type="radio" name="sexo" value="Masculino"> Masculino
<input type="radio" name="sexo" value="Feminino"> Feminino

<br><br>
<select name="cargo" id="job" multiple="multiple" size="4">
    <option>Programador</option>
    <option>Programador Sênior</option>
    <option>Analista de Sistemas</option>
    <option>Arquiteto</option>
</select>

<select name="educacao" id="edu">
    <option>Graduação</option>
    <option>Doutorado</option>
    <option>Mestrado</option>
    <option>Técnico</option>
</select>
<br>

<div id="two" class="mini">
    id = two, class = mini
    <div class="mini">class = mini</div>
</div>
<div class="one">
    class = one
    <div class="mini">class = mini</div>
    <div class="mini">class = mini</div>
</div>
<div class="one">
    class = one
    <div class="mini01">class = mini01</div>
    <div class="mini">class = mini</div>
</div>

Tags: jQuery Seletores javascript DOM HTML

Publicado em 7-4 06:37

Doido Dev

Seletores jQuery: Classificação e Operações Básicas

Tags em Destaque