Forem

Mr Punk da Silva
Mr Punk da Silva

Posted on

Learn JQuery

Table of Contents


Introdução

  • JQuery é uma biblioteca JavaScript, criada para facilitar a escrita de código JS nas páginas web
  • Tendo algumas vantagens e sua utilização é grande na web:
    • A biblioteca é pequena e rápida;
    • Possui uma facilidade maior na escrita de código;
    • Gera um grande poder para utilizar o JS
    • É cross-browser (multi-browsers)

Install

Para instalar o JQquery, ou seja, usa-lo há algumas formas:

  • Pode-se apenas colocar o endereço remoto do JQuery usando JSDelivr:
    • <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
  • Usando npm ou yarn:
    • npm install jquery
    • yarn add jquery
  • Ou mesmo, a mais comum que é baixando ele:
    • Vá no site: https://jquery.com/
    • Click em Download, instale a versão uncompressed

É recomendável que se coloque o arquivo dentro da pasta js, criada dentro de seu projeto


Métodos de Carregamento e Inicialização

Carregamento:

  • Para verificar se o elemento está carregado usa-se o método ready;
  • Como por exemplo algo fundamental é todo a lógica acontecer quando o documento estiver carregado,
    • ou seja, usamos o elemento document e verificamos se ele está lido ou carregado;
[codigo de exemplo]

/*
* Assim que esse elemento do DOM for carregado será disparado o alert
*/ 
$( document ).ready(function () {
    alert('DOM CARREGADO!');
});
Enter fullscreen mode Exit fullscreen mode

Inicialização

  • Com o método load será executado o callback
    • assim que todos os elementos forem carregados0 na página
[codigo de exemplo]

/*
* Assim que todos os elementos do DOM forem carregados será disparado o alert
*/ 
$( window ).load(function () {
    alert('JANELA CARREGADA!');
});
Enter fullscreen mode Exit fullscreen mode

Lógica de Desenvolvimento do JQuery

  • No JQuery funciona com seletores, podemos selecionar elementos com ele, através de:
    • Tag:
    • exemplo |> $('h1')
    • Classe:
    • exemplo |> $('.minhaClasse')
    • ID:
    • exemplo |> $('#meuID')

Assim que selecionado é passado todas as funções nativas do JQuery, as ações são voltadas a eventos

Seletores

Métodos

  • Para adicionar atributos CSS no elemento usa-se: .css()
    • Sintaxe:
//-> passando apenas um atributo:
$('h1').css("color", "#f66");

//-> passando mais de um atributo:
$( 'a' ).css({ color: "#9ff", textDecoration: 'underline' });
Enter fullscreen mode Exit fullscreen mode
  • Para o elemento inicializar já escondido: .hide()
    • Sintaxe:
$('h1').hide();
Enter fullscreen mode Exit fullscreen mode
  • Dar um tempo entre eventos, usa-se: .delay()
    • O tempo deverá ser informado em microssegundos;
    • Sintaxe:
$('h1').delay('1000');
Enter fullscreen mode Exit fullscreen mode
  • Fazer com que o elemento selecionado aparecerá: .fadeIn()
    • O parâmetro slow - definirá que ele aparecerá de forma lenta;
    • Sintaxe:
$('h1').fadeIn('slow');
Enter fullscreen mode Exit fullscreen mode
  • Para setar um text dentro de um elemento: .text()
    • O parâmetro slow - definirá que ele aparecerá de forma lenta;
    • Sintaxe:
$('h1').text('Learn JQuery in DevPunk');
Enter fullscreen mode Exit fullscreen mode

Modos de encadeamento de comandos:

  • Obs: Podemos colocar todos os métodos de modo individualmente ou seja, separados:

    /*
    *>> Individualmente
    */
    $( 'h1' ).css("color", "#f66");
    $( 'h1' ).hide();
    $( 'h1' ).delay('1000');
    $( 'h1' ).fadeIn('slow');
    $( 'h1' ).text('Learn JQuery in DevPunk');
    
  • Obs: Podemos colocar todos os métodos de modo inline ou seja, na mesma linha:

    /*
    *>> Inline
    */
    $( 'h1' ).css("color", "#f66").hide().delay('1000').fadeIn('slow').text('Learn JQuery in DevPunk');
    
  • Obs: Podemos colocar todos os métodos de modo inline ou seja, na mesma linha:

    /*
    *>> Bloco
    */
    $( 'h1' )
        .css("color", "#f66")
        .hide()
        .delay('1000')
        .fadeIn('slow')
        .text('Learn JQuery in DevPunk');
    

Eventos

Para os eventos eles são métodos proprios JQuery, sendo que deve-se passar um callback para quando o evento for chamado

Click

  • Para o evento de click usa-se:
$(button).click(function () {
    alert("HEELO DARK HELL!!!");
});
Enter fullscreen mode Exit fullscreen mode
  • Hey, guys! Não podemos esquecer que pode-se usar arrow function ao inves de funções anônima ao usar callbacks, podemos usar assim:
$(button).click(() => {
    alert("HEELO DARK HELL!!!");
});
Enter fullscreen mode Exit fullscreen mode

Selectores Hierárquicos

  • Selecionando elementos filhos:
    • exemplo |>
// -> está selecionando a tag (elemento) p dentro da elemento pai que contém a classe content
$('.content p')
Enter fullscreen mode Exit fullscreen mode
  • Selecionando filhos diretos do elemento:
    • exemplo |>
$('.div1 > span').css({ color: 'red' });
Enter fullscreen mode Exit fullscreen mode
  • Selecionando todos os elemento após o selecionado
    • exemplo |>
$('.p1 ~ p').css({ fontWeight: '400' });
Enter fullscreen mode Exit fullscreen mode

Eventos de Navegadores

  • Evento de erro na imagem
    • Sintaxe:
$('img').error(function () {
    let imagem = $(this).attr('src');
    alert(``);

    $('img').attr('src', 'img/error.png');
});
Enter fullscreen mode Exit fullscreen mode
  • **Evento de resize
    • Irá redimensionar a imagem referente a largura e espessura da janela quando o evento resize da janela for acionado
    • Sintaxe:
    let widthWindow  = $(window).width();
    let heightWindow = $(window).height();

    $('img')
        .width(widthWindow)
        .height(heightWindow);

    $(window).resize(function () {
        $('img')
            .width(widthWindow)
            .height(heightWindow);
    });
Enter fullscreen mode Exit fullscreen mode

  • Evento de scroll
// -> Rotina simples    
$('body').css("height", "7000px");
$(window).scroll(function () {
    $('img').fadeOut('1000');
}); 

// -> Rotina setando a imagem conforme o valor do scrollTop pelo evento de scroll
$(window).scroll(function () {
    let top = $(window).scrollTop();
    console.log(top);

    if (top > 400) {
        $('img').fadeOut('1000');
    } else {
        $('img').fadeIn('1000');
    }
});
Enter fullscreen mode Exit fullscreen mode

Eventos de Mouse

Click

$('.ev1').click(function () {
    $(this).css("background", "#ccc");
    ex.text("Você clicou!");
});
Enter fullscreen mode Exit fullscreen mode

Dois Clicks

$('.ev2').dbClick(function () {
    $(this).css("background", "#ccc");
    ex.text("Você clicou duas vezes");
});
Enter fullscreen mode Exit fullscreen mode

Focus

$('.ev3')
    .focusin(function () {
        $(this).css("background", "#ccc");
        ex.text("Você deu o focus");
    })
    .focusout(function () {
        $(this).css("background", "#000");
        ex.text("Você tirou o focus");
    });
Enter fullscreen mode Exit fullscreen mode

Hover

$('.ev4').hover(function () {
        $(this).css("background", "#ccc");
        ex.text("Passou o mouse");
    });
Enter fullscreen mode Exit fullscreen mode

Mouse Down

$('.ev5')
    .mousedown(function () {
        $(this).css("background", "#ccc");s
        ex.text("Você apertou o botão do mouse"); 
    }).mouseup(function () {
        $(this).css("background", "#000");
        ex.text("Você soltou o botão do mouse");
    });
Enter fullscreen mode Exit fullscreen mode

Mouse Enter

let qtdeEntradasMouse = 0;
$('.ev6')
    .mouseenter(function () {
        qtdeEntradasMouse++;
        ex.text(`$Entradas do Mouse: ${qtdeEntradasMouse}`);
    })
    .mouseout(function () {
        ex.text("Saída do Mouse");
    });
Enter fullscreen mode Exit fullscreen mode

Mouse Over / Leave

let qtdeEntradasMouseEv7 = 0;
$('.ev7')
    .mouseover(function () {
        qtdeEntradasMouseEv7++;
        ex.text(`Mouse Over: ${qtdeEntradasMouseEv7}`);
    })
    .mouseleave(function () {
        ex.text("Mouse Leave");
    });
Enter fullscreen mode Exit fullscreen mode

Mouse Move

$('.ev8').mousemove(function (move) {
    let localX = move.pageX();
    let localY = move.pageY();

    ex.text(`Movimento X: ${localX}px | Movimento Y: ${localY}px` );
});
Enter fullscreen mode Exit fullscreen mode

Onde conseguir mais

Para saber mais vá em: https://api.jquery.com/category/events/mouse-events/


Eventos de Teclado e Formulário

Teclado

Exemplos:

  • Primeiro exemplo:

    $('.key').keypress(function () {
        let text = $(this).val();
        ex.text(text);
    });
    
  • Segundo exemplo:

    $('.key').keydown(function () {
        let text = $(this).val();
        ex.text(text);
    });
    
  • Terceiro exemplo:

    $('.key').keyup(function () {
        let text = $(this).val();
        ex.text(text);
    });
    
  • Fazendo um placeholder com JQuery:

[index.html]
<form action="">
    <label>
        <input type="text"  class="place" title="Digite seu nome" />
    </label>
    <label>
        <input type="text"  class="place" title="Digite seu nome" />
    </label>
    <label>
        <input type="text"  class="place" title="Digite seu nome" />
    </label>

    <label>
        <textarea rows="10" class="place key" title="Digite seu nome" />
        </textarea>
    </label>

    <label>
        <button>Botão</button>
        <button>Enviar</button>
    </label>
</form>
Enter fullscreen mode Exit fullscreen mode
[script.js]
$('.place').each(function () {

let input = $(this);
let place = $(this).attr("title");

input
    .val(place)
    .css("color", "#ccc")
    .focusin(function () {
        input.css("color", "#000");

        if (input.val() == place) {
            input.val('');
        }
    })
    .focusout(function () {
        if (input.val() == '') {
            input.css("color", "#ccc");
            input.val(place);
        }
    });
});
Enter fullscreen mode Exit fullscreen mode

Fórmulario

*Exemplos: *

  • Primeiro exemplo:

    let ex = $('.ex1');
    
    $('.ev1')
        .focus(function () {
            ex.text($(this).attr('title'));
        })
        .keyup(function () {
            if ($(this).val() == 'pontocom') {
                $('.ev2').focus();
            }
        });
    
  • Segundo exemplo:

    // será executado callback assim que houver mudança, ou seja, 
    // ¬ assim que mudar o conteudo do input, ele vai chamar a função passada
    $('.ev1').change(function () {
        ex.text(`Campo Alterado: ${$(this).val()}`)
    });
    
  • Terceiro exemplo:

    $('.ev2').blur(function () {
        ex.text(`Saída do campo: ${$(this).attr('name')}`)
    });
    
  • Quarto exemplo:

$('.selecionar').click(function () {
  // -> irá selecionar o texto do input
  $('.ev3').select();

  $('form').submit(function () {    
     // -> fará com que o submit não sejá enviado
     return false;
  });
});
Enter fullscreen mode Exit fullscreen mode

Onde conseguir mais

Para saber mais vá em:


Efeitos Básicos

Podemos também usar efeitos e animações básicas e usuais providas diretamente pelo JQuery, para saber mais vá em:

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay