DEV Community

Mr Punk da Silva
Mr Punk da Silva

Posted on

Learn JQuery

#webdev #programming #braziliandevs #learning

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:

Top comments (0)