Bom, vou fazer uma introdução super rápida ao jQuery, o suficiente para que você leia outros materiais e entenda.
Introdução ao jQuery (em 2 minutos e meio, eu acho)
jQuery é uma ferramenta que localiza um ou mais componentes na tela. A notação é muito parecida com a do CSS. Por exemplo:
teste = jQuery("body");
Irá localizar a tag <body>
do documento.
teste2 = jQuery("#minha-div");
Irá localizar o elemento HTML cuja Id seja "minha-div". E ainda:
teste3 = jQuery(".minha-classe");
Localiza todos os elementos HTML cuja class seja "minha-classe".
Normalmente, a notação de jQuery é feita substituindo jQuery
por apenas $
.
teste3 = $(".minha-classe");
Todo script do jQuery deve ser executado dentro de tags <script>
e </script>
. Como boa prática, colocamos essas tags antes de </body>
.
Ainda, é outra boa prática testar se o documento já foi inteiro carregado antes de executar qualquer coisa. Um clichê do uso de jQuery dentro de uma página HTML seria algo como:
<html>
<head>
</head>
<body>
...
<script>
$(document).ready(function () { ... });
</script>
</body>
</html>
Ou seja, selecionamos o documento:
$(document)
E no evento ready()
do documento, ou seja, quando ele estiver pronto:
$(document).ready();
Passamos para ele uma função (anônima) que realiza tudo o que precisarmos, como por exemplo colocar as máscaras.
$(document).ready(function () { ... });
Antes de tudo isso, você precisa adicionar uma referência para o jQuery dentro do seu HTML. Isso pode ser facilmente feito usando um CDN, assim:
<html>
<head>
...
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
...
<script>
$(document).ready(function () { ... });
</script>
</body>
</html>
Usando as máscaras
O @rray colocou vários links para as suas máscaras. A ideia então é:
- Selecionar quais elementos HTML terão a máscara;
- Aplicar neles a função de máscara.
Vou colocar um exemplo. O resto é com você.
Suponha que seu campo de CPF seja assim:
<input type="text" id="CPF" />
Vamos primeiro selecionar seu campo:
<script>
$(document).ready(function () {
var $seuCampoCpf = $("#CPF");
});
</script>
E aplicar neles a função de máscara do jQuery Mask Plugin:
<script>
$(document).ready(function () {
var $seuCampoCpf = $("#CPF");
$seuCampoCpf.mask('000.000.000-00', {reverse: true});
});
</script>
Não esqueça de adicionar o script do jQuery Mask Plugin antes desta execução:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
<script>
$(document).ready(function () {
var $seuCampoCpf = $("#CPF");
$seuCampoCpf.mask('000.000.000-00', {reverse: true});
});
</script>
Se você fez tudo certo, o seu campo CPF deve aparecer com máscara.
Por fim, vou colocar uma caixinha de testes com tudo para que você possa testar aqui mesmo no site.
$(document).ready(function () {
var $seuCampoCpf = $("#CPF");
$seuCampoCpf.mask('000.000.000-00', {reverse: true});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
<input type="text" id="CPF" name="CPF" />