Pesquisar artigos na Base de Dados de Conhecimento

Frontend Do Zero Ao Profissional

Eventos de Browser

scroll
$('#div').bind('scroll',function(){

})

resize
$(window).bind('resize',function(){
  console.log("Mudou o tamanho da tela");
})

Eventos de Formulário

submit 

select quando selecionado algum caracter de um formulário


focus - Quando entrar no objeto
blur Desfocar do Objeto
change


Efeitos

Desaparecer 
$('.div').hide("slow");

$('.div').show("fast");

$('.div').toggle("fast");

Fade
Opacidade vai de 1 a 0 ou 0 a 1

$('.div').fadeOut();
$('.div').fadeIn();

$('.div').fadeTo('slow',0.5);

$('.div').fadeToggle('slow');

Slide

$(document).ready(function() {
    $('.button-slider').on("click",function(){
        $('.into-fade').slideToggle();
    })
})

Animações: Como usar o Animate

$(document).ready(function() {
    $('.button-slider').on("click",function(){
        $('.into-fade').animate({
            'margin-left':100
        },1000);
    })
})

Animações: Eventos no Animate

A partir da Versão 1.8 JQUERY
$(document).ready(function() {
    $('.button-slider').on("click",function(){
        $('.into-fade').animate({
            'margin-left':100
        },{
            duration:2000,
            step:function(){
                console.log("Nova Etapa, a cada pixel de alteração ela será chamada.");
                valor = parseInt($('.valor').html());

                $('.valor').text(valor + 1);
            },
            complete:function(){
                console.log("Animação finalizada");
            },
            start:function(){
                console.log("Animação Começou");
            }
        });
    })
})

FAQ: Como parar uma animação no meio?

$('.div').stop();

FAQ: Somar propriedades na animação

$(document).ready(function() {
    $('.button-slider').on("click",function(){
        $('.into-fade').animate({
            'margin-left':"+-50"
        },{
            duration:2000,
            step:function(){
                console.log("Nova Etapa, a cada pixel de alteração ela será chamada.");
                valor = parseInt($('.valor').html());

                $('.valor').text(valor + 1);
            },
            complete:function(){
                console.log("Animação finalizada");
            },
            start:function(){
                console.log("Animação Começou");
            }
        });
    })
})

O que é AJAX?

Trabalhando com Requisições Assíncronas (AJAX significa Asynchronous JavaScript e XML)

Durante o desenvolvimento de sites e sistemas web em geral, é comum a necessidade de consumir recursos do servidor sem que a página precise ser carregada novamente. Para atender esse tipo de situação, podemos utilizar o conceito de Ajax, definido, em poucas palavras, como um conjunto de técnicas que utilizam JavaScript para carregar informações de forma assíncrona.

Ao realizar chamadas assíncronas, o fluxo do código não é interrompido até que a resposta seja obtida. Ao invés disso, após realizar a requisição, a resposta é obtida em um momento posterior, de forma independente, e tratada por meio de uma função (chamada função de callback).

Conceitos importantes AJAX?

Todo o formulário HTML é enviado Via método GET ou POST
GET - Enviado pela url com o endereço do arquivo
POST - Enviado no Header

Requisições em seu próprio site - Mas tem como fazer requisições a outro site que não seja o seu.

Monitorar Requisições AJAX

Inspecionar elemento no filtro: Tipo XHR 
Irá mostrar as requisições ajax.

Métodos Auxiliares AJAX

    $('.button').on("click",function(){
        $.get("teste.html",function(data){
            $('.into-fade').html(data)
        });

        $.post("teste.html",function(data){
            $('.into-fade').html(data)
        });

    //$('.into-fade').load("teste.html");
    })

Métodos Serialize

Exemplo para não enviar  o formulário direto que é o compartamento padrão. 
Para Isso utilizar o preventdefault;
Vamos enviar via requisição Ajax para carregar apenas a div em questão.

função serialize  - pega os dados e formata para envio dos dados. Fica pronto para envio via AJAX.

    $('#form').on('submit',function(e){
        e.preventDefault();

        var txt = $(this).serialize();
        console.log(txt);
    })

Requisição Ajax Completa

 $('#form').on('submit',function(e){
        e.preventDefault();

        var txt = $(this).serialize();
        console.log(txt);

        $.ajax({
            type:"POST",
            url:'ajax.php',
            data:txt,
            success:function(html){
                $('.div-resultado').html(html);
            },
            error:function(){
                alert("Ocorreu um erro");
            }
        });
    })

função php ou qualquer outra
<?php
    $usuario = $_POST['usuario'];
    $password = $_POST['password'];
    echo '<h1>TESTE de H1 User: '.$usuario.' SENHA:'.$password.' </h1> ';
?>

Manipulando JSON

Enviando json para um backend via Ajax.

$('#form').on('submit',function(e){
        e.preventDefault();

        var txt = $(this).serialize();
        console.log(txt);

        $.ajax({
            type:"POST",
            url:'ajax.php',
            data:txt,
            dataType:'json',
            success:function(json){
                $('.div-resultado').html((json.usuario));
            },
            error:function(erro){
                alert("Ocorreu um erro"+erro.message);
            }
        });
    })

Função php

<?php
    $usuario = $_POST['usuario'];
    $password = $_POST['password'];
    $array = array('usuario'=>$usuario
                   ,'password'=>$password
                    );

    echo json_encode($array);
  
?>

Plugins para JQUERY

São bibliotecas já prontas utilizando jquery.
Ex: JQUERY Mask plugin  - plugin feito em jquery para mascar campos, formatação de texto enquanto se digita.
Como usar?
https://github.com/igorescobar/jQuery-Mask-Plugin

Verificar aonde está disponível nesse caso no Github, o que é necessário pegar?
Ir no github e fazer donwload do projeto, no caso é necessário apenas do SRC nesse exemplo.

Importe ela no seu html

    <script type="text/javascript" src="assets/jquery.mask.js"></script>
no seu JS 
$(document).ready(function() {
    $('input[name="telefone"]').mask('(00) 00000-0000');
}
    $('input[name="telefone"]').mask('(00) 00000-0000');

Como criar seu próprio Plugin JQUERY

Criar plugins sempre em arquivos separados. Para pode levar para outros projetos ou compartilhar.

(function($){

   //Primeiro criar uma ação para ser executada.

   $.fn.showRealLink = function(){
        this.each(function(){
            var link = $(this).attr('href');
            $(this).append('('+link+')');
        });

        return this;
   }

   $.fn.mudarCor = function(cor,corHover='none'){
        this.each(function(){
        $(this).css('color',cor);

            var background  = $(this).css('background-color');

            $(this).hover(function(){
                $(this).css('background-color',corHover);
            }, function(){
                $(this).css('background-color',background);
            });
        });

        return this;
    }

  
}(jQuery));

Fazer Menu Dropdown

Crie seu menu no HTML

    <div class="menu">
        <ul>
            <li>
                <div class="menu1">Home</div>
                <div class="menu2">
                        Opção 1 <br/>
                        Opção 2 <br/>
                </div>              
            </li>
            <li>
            <div class="menu1">Menu2</div>
            <div class="menu2">
                    Opção 1 <br/>
                    Opção 2 <br/>
            </div>   
            </li>
        </ul>
    </div>
Alterações JS
    $('li').hover(function(){
        $(this).find('.menu2').slideDown();
    },function(){
        $(this).find('.menu2').slideUp();
    }
    );
Alterações css
.menu{
    height: 40px;
    background-color: black;
}

ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
    color:white;    
}
li{
    float:left;
    padding:0px 20px;
    line-height: 40px;
}

.menu2{
    display: none;
    background-color: black;
    color:white;
    height:90px;
    width:150px;
    position: absolute;    
}

Projeto Selecionar da DATA (datePicker)

$(function(){
    var horaEscolhida;
    $('input').bind('focus',function(){
        var pos = $(this).offset();
        //Saber qual a largura
        var width = $(this).width();

        $('.horaescolha').css('left',pos.left + width + 5);
        $('.horaescolha').css('top',pos.top);
        $('.horaescolha').show();
        horaEscolhida = $(this);
    });

    $('input').bind('blur',function(){
       
        setTimeout(function(){
            $('.horaescolha').hide();
        },500);
        
    });

    $('.horaescolha button').bind('click',function(){
        var hora = $(this).html();
        horaEscolhida.val(hora) ;
    });
});

Projeto Força de senha

Html

 <div class="fade2">
        <form id="form" method="POST">
            <label>Telefone</label>
            <input type="text" name="telefone"/> <br/>
            <label>Usuário</label>
            <input type="text" name="usuario"/> <br/>
            <label>Senha</label>            
            <input type="password" name="password"/> <br/>

            <label>Repita</label>            
            <input type="password" name="password2"/> <br/>
  
            <div  id="forca">
                <div></div>
            </div>
            <input type="submit" value="Entrar"/>
        
        </form> 
    </div>
JS

    $('input[name="password"]').bind('keyup',function(){
        var txt = $(this).val();
        var forca = 0;
        var progressValue = $('#forca div');
        var color, percent = 0;
        //letras
        //numeros
        //Tamanho
        if(txt.length > 6){
            forca = 25;
        }

        var reg = new RegExp(/[a-z]/i);
        //se tem letras de a-z
        if(reg.test(txt)){
            forca += 25;
        }
        //se tem números
        var reg = new RegExp(/[0-9]/i);
        if(reg.test(txt)){
            forca += 25;
        }

        //se não for números ou letras então é caracter especial
        var reg = new RegExp(/[^a-z0-9]/i);
        if(reg.test(txt)){
            forca += 25;
        }

        if(forca <= 25){
            color = "red";
        }else if(forca <=50) {
            color = "yellow";
        }else if(forca <=75) {
            color = "#3c948b";
        }
        progress(forca, $('#forca'), 300);
        progressValue.css("background", color);
        $('#forca').css("border", "1px solid " + color);        
    });

    $('input[name="password2"]').bind('keyup',function(){
        
        if($('input[name="password"]').val() != $('input[name="password2"]').val()){
            $('.valida').html('<span>senha não confere</span>');    
        }else{
            $('.valida').html('<span>Ok</span>');    
        }        
    });


});

function progress(percent, $element, velocity) {
    percent = percent >= 100 ? 100 : percent;
    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').stop().animate({ width: progressBarWidth }, velocity, "linear").html(percent + "% ");
 }
 CSS
#forca{
    background: transparent;
    transition: border 0.2s;
    color: #fff;
  }
#forca div{
    background: transparent;
    transition: background 0.2s;
}

Drag An Drop


$(function(){
    
    $('#drag').bind('mousedown',function(){
        console.log('MOuse down');
        $('#drag').bind('mousemove',function(e){
            var x = e.pageX;
            var y = e.pageY;

            var width = $(this).width();
            var height = $(this).height();

            $(this).css('left',(x - (width /2)) + 'px');
            $(this).css('top',(y - (height /2)) + 'px');
        });
    });

    $('#drag').bind('mouseup',function(){
        console.log('mouseup');
        $('#drag').unbind('mousemove');
    });
});

Bootstrap

CDN
Bom para estudar, porém você fica dependendo de estar no ar.
Para projetos em produção é interessante baixar os arquivos e ter no seu servidor.
CSS
Bootstrap-reboot  - Padroniza
Bootstrap-grid -  Biblioteca responsável pela distribuição do conteúdo.
Bootstrap.css Biblioteca completa
Versão Minificada, utilizar a versão min para produção.
JS e JQUERY
Bundle vem com a biblioteca Bundle.
Bootstrap.js
É necessário baixa o JQUERY.


Grid


É recomendado que seja colocado coisas dentro de um container.
Class
container  Seção com margens de esquerda a direita.
container-fluid - Seção expande para toda a tela

col-sm = Mínimo é para celulares, nesse exemplo ele vai quebrar em linhas no celular 
col-md =mesmo SM porém para tablets.
col-lg =dispositivos grandes Quase 1000px ele vai quebrar.

    <div class="container">
        <div class="row">
            <div class="col-sm">
                ....
            </div>
            <div class="col-sm">
                ....
            </div>
            <div class="col-sm">
                ....
            </div>
        </div>
    </div>


Bootstrap trabalha com as colunas até quantidade de 12 em uma linha
Quando coloco um número na coluna, fique especificado quantos espaços irei utilizar de 12.
se não colocar o bootstrap irá pegar o restante disponível na Linha até 12
Pra descobrir a melhor forma, é testando. Quando mais sistemas e sites você vai aprendendo a melhor forma.,

Grid

Ordenas de forma diferente, independente como está no código
Utilizar no class o order-x 
Porém as desordenadas vem primeiro e depois as ordenadas.
order-last - Ordena por final.
order-first - Ordena para o início.

Alinhamento de colunas - Grid - JustifyContent e alignItems

Class= "row Justify-content-start" - Por Padrão é ele
Class= "row Justify-content-center" - Centro
Class= "row Justify-content-end" - Centro
Class= "row Justify-content-round" - Com separações equivalentes, e ocupam toda a tela no centro
Class= "row Justify-content-between" - Com separações equivalentes, e ocupam toda a tela sem espaçamentos na esquerda e direita,

row align-items - Alinha a linha verticalmente
row align-center- Alinha a linha verticalmente

Alinhamento Vertical - align-items
Alinhamento Horizontal -justify-content

Media Component

Estrutura pronta para por exemplo comentários.

    <div class="container">
        <div class="media">
            <img src="me.jpg" class="mr-3 avatar"/>
            <div class="media-body">
                <h5>Giovane Bertol - Conexão G Tecnologia</h5>
                <p>Bootstrap trabalha com as colunas até quantidade de 12 em uma linha
                    Quando coloco um número na coluna, fique especificado quantos espaços irei utilizar de 12.
                    se não colocar o bootstrap irá pegar o restante disponível na Linha até 12
                    Pra descobrir a melhor forma, é testando. Quando mais sistemas e sites você vai aprendendo a melhor forma.
                </p>
            </div>
        </div>
    </div>

Tipografia

<p> texto x com <span class="mark"> TEXTO MARCADO</span>.

Imagens

Recursos do Bootstrap para imagens
Transformar imagem para responsiva.
Para criar minuaturas = class

 <img src="" class="img-fluid"/> Responsiva
<img
<

Você achou esse artigo útil?

Artigos relacionados

  • Gerenciador de Pacotes YARN e NPM

    Gerenciador de pacotes Instalando pacotesnpm install nomedopacoteou colocar no package.json Atualiz...

  • Arquitetura CSS (BEM)

    BEM - Block Element Modifier Block - Bloco de conteúdo.Saiba tudo sobre BEM, metodologia C...

  • SASS WEBPACK

    SASS - Pré Processador de CSS É transformado pelo SASS e reescrito para css.KOALA-app.comI...
2026 Copyright ConexaoG Tecnologia