Resumo JQuery.txt

Resumo JQuery
-------------

https://www.youtube.com/watch?v=fB1TmfaT6pg&t=387
https://blog.websitego.com.br/validacoes-de-campos-para-formularios-em-html5/
https://www.freecodecamp.org/portuguese/news/validacao-de-dados-como-verificar-dados-enviados-pelo-usuario-em-formularios-html-utilizando-javascript/

. Principais caracteristicas do JQuery:

    DOM manipulation − The jQuery made it easy to select DOM elements, negotiate 
                        them and modifying their content by using cross-browser 
                        open source selector engine called Sizzle.

    Event handling − The jQuery offers an elegant way to capture a wide variety of 
                        events, such as a user clicking on a link, without the 
                        need to clutter the HTML code itself with event handlers.

    AJAX Support − The jQuery helps you a lot to develop a responsive and featurerich 
                    site using AJAX technology.

    Animations − The jQuery comes with plenty of built-in animation effects which you 
                    can use in your websites.

    Lightweight − The jQuery is very lightweight library - about 19KB in size 
                    (Minified and gzipped).

    Cross Browser Support − The jQuery has cross-browser support, and works well in 
                                IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+

    Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.

. Site npm para encontrar as bibliotecas e executar via comando "npm install":

    https://www.npmjs.com/

. Site "cdn" para localizar a URL de referência das bibliotecas:

    https://cdnjs.com/

. Installation JQuery:

    CLI command:

        npm install jquery

        or

        yarn add jquery

        or

        bower install jquery

. Forms to use JQuery:

    . Local Installation − You can download jQuery library on your local machine and include it in your 
                            HTML code.

        . Download JQuery https://jquery.com/download/, save in local folder and reference in your page:

            <html>
            <head>
                <title>The jQuery Example</title>
                <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
                </script>
                    
                <script type = "text/javascript">
                    $(document).ready(function() {
                        document.write("Hello, World!");
                    });
                </script>
            </head>
                
            <body>
                <h1>Hello</h1>
            </body>
            </html>

    . CDN Based Version − You can include jQuery library into your HTML code directly from Content 
                        Delivery Network (CDN).

        . To be easy go to in page and see about actual declaration CDN:

            https://code.jquery.com/        

        . Using JQuery with CDN (Content Delivery Network):

            <html>
            <head>
                <title>The jQuery Example</title>
            </head>
                
            <body>
                <h1>Hello</h1>
            </body>

            <script src="https://code.jquery.com/jquery-3.5.1.min.js" 
                    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
                    crossorigin="anonymous"></script>                    
            <script type = "text/javascript">
                $(document).ready(function() {
                    document.write("Hello, World!");
                });
            </script>
            </html>

. How to call JQuery library function:

    . Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
https://api.jquery.com/category/ajax/
        $(document).ready( function {
            // to do         
        });

    . Example:

        <html>
        <head>
            <title>The jQuery Example</title>
            <script type = "text/javascript" 
                src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
            </script>

            <script type = "text/javascript" language = "javascript">
                $(document).ready(function() {
                    $("div").click(function() {alert("Hello, world!");});
                });
            </script>
        </head>
            
        <body>
            <div id = "mydiv">
                Click on this to see a dialogue box.
            </div>
        </body>
        </html>


. Variable Scope

    ...
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // Global vars
            msgInitial = "Hello";

            $("div").click(function(e) {
                // Local vars
                msgFinish = " World";

                alert(msgInitial + msgFinish);
            });
        });
    </script>
    ...

. Functions Callback

        $("body").click(function(event) {
            // Say in console the message for example:
            //
            // clicked: [object HTMLBodyElement]
            //
            console.log("clicked: " + event.target);
        });

        $("#myform").submit(function() {
            // In this case is require return value
            return false;
        });

        $(".send").on("click", function(){
            var code = $(".code").val();

            $(".result").html("Input val -> " + code);
        
        });

. Following are important JavaScript functions −

    charAt() - Returns the character at the specified index.

        alert( $("#codigo).val().charAt(0));

    concat() - Combines the text of two strings and returns a new string.


    indexOf() - Returns the index within the calling String object of the first occurrence of the 
                specified value, or -1 if not found.

        var str = "If the facts don't fit the theory, change the facts.";
        var pos = str.indexOf("facts");
        alert(pos); 

    length() - Returns the length of the string.

    pop() - Removes the last element from an array and returns that element.

    push() - Adds one or more elements to the end of an array and returns the new length of the array.

    replace() - You can use the replace() method to replace part of a string with another string

        var str = "Color red looks brighter than color blue.";
        var result = str.replace("color", "paint");
        alert(result);


    reverse() - Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.

    sort() - Sorts the elements of an array.

    split() - The split() method can be used to splits a string into an array of strings, using the syntax 
                str.split(separator, limit)

        var fruitsStr = "Apple, Banana, Mango, Orange, Papaya";
        var fruitsArr = fruitsStr.split(", ");
        document.write(fruitsArr[0]); // Prints: Apple
        document.write(fruitsArr[2]); // Prints: Mango    

        var str = "INTERSTELLAR";
        var strArr = str.split("");
        document.write(strArr[0]); // Prints: I
        document.write(strArr[1]); // Prints: N

    substr() - Returns the characters in a string beginning at the specified location through the specified number of characters.

        var str = "The quick brown fox jumps over the lazy dog.";
        document.write(str.substring(4, 15)); // Prints: quick brown

    toLowerCase() - Returns the calling string value converted to lower case.

    toString() - Returns the string representation of the number's value.

    toUpperCase() - Returns the calling string value converted to uppercase.

    loops

        var i = 1;
        while(i <= 5) {    
            document.write("<p>The number is " + i + "</p>");
            i++;
        }

        for(var i=1; i<=5; i++) {
            document.write("<p>The number is " + i + "</p>");
        }


        var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
        
        // Loop through all the elements in the array 
        for(var i=0; i<fruits.length; i++) {
            document.write("<p>" + fruits[i] + "</p>");
        }


        // An object with some properties 
        var person = {"name": "Clark", "surname": "Kent", "age": "36"};
        
        // Loop through all the properties in the object  
        for(var prop in person) {  
            document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
        }

        // name = Clark
        // surname = Kent
        // page = 36


        var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
        
        // Loop through all the elements in the array 
        for(var i in fruits) {  
            document.write("<p>" + fruits[i] + "</p>");
        }


        $.each([ 52, 97 ], function( index, value ) {
            alert( index + ": " + value );
        });

        This produces two messages:

        0: 52
        1: 97


        If an object is used as the collection, the callback is passed a key-value pair each time:

        var obj = {
            "flammable": "inflammable",
            "duh": "no duh"
        };

        $.each( obj, function( key, value ) {
            alert( key + ": " + value );
        });

. Podemos optar por escolher os simbolos ($ ou JQuery) para construir uma função JQuery:

    $

        <script type = "text/javascript">
            $(document).ready(function() {
                document.write("Hello, World!");
            });
        </script>

    JQuery

        <script type = "text/javascript">
            JQuery(document).ready(function() {
                document.write("Hello, World!");
            });
        </script>


. Example Selectors Element

    1	$('*') - This selector selects all elements in the document.

    2	$("p > *") - This selector selects all elements that are children of a paragraph element.

    3	$("#specialID") - This selector function gets the element with id="specialID".

    4	$(".specialClass") - This selector gets all the elements that have the class of specialClass.

    5	$("li:not(.myclass)") - Selects all elements matched by <li> that do not have class = "myclass".

    6	$("a#specialID.specialClass") - This selector matches links with an id of specialID and a 
            class of specialClass.

    7	$("p a.specialClass") - This selector matches links with a class of specialClass declared 
        within <p> elements.

    8	$("ul li:first") - This selector gets only the first <li> element of the <ul>.

    9	$("#container p") - Selects all elements matched by <p> that are descendants of an element 
        that has an id of container.

    10	$("li > ul") - Selects all elements matched by <ul> that are children of an element matched by <li>

    11	$("strong + em") - Selects all elements matched by <em> that immediately follow a sibling element 
        matched by <strong>.

    12	$("p ~ ul") - Selects all elements matched by <ul> that follow a sibling element matched by <p>.

    13	$("code, em, strong") - Selects all elements matched by <code> or <em> or <strong>.

    14	$("p strong, .myclass") - Selects all elements matched by <strong> that are descendants of an 
            element matched by <p> as well as all elements that have a class of myclass.

    15	$(":empty") - Selects all elements that have no children.

    16	$("p:empty") - Selects all elements matched by <p> that have no children.

    17	$("div[p]") - Selects all elements matched by <div> that contain an element matched by <p>.

    18	$("p[.myclass]") - Selects all elements matched by <p> that contain an element with a class of myclass.

    19	$("a[@rel]") - Selects all elements matched by <a> that have a rel attribute.

    20	$("input[@name = myname]") - Selects all elements matched by <input> that have a name value exactly 
        equal to myname.

    21	$("input[@name^=myname]") - Selects all elements matched by <input> that have a name value beginning 
        with myname.

    22	$("a[@rel$=self]") - Selects all elements matched by <a> that have rel attribute value ending with self.

    23	$("a[@href*=domain.com]") - Selects all elements matched by <a> that have an href value containing 
        domain.com.

    24	$("li:even") - Selects all elements matched by <li> that have an even index value.

    25	$("tr:odd") - Selects all elements matched by <tr> that have an odd index value.

    26	$("li:first") - Selects the first <li> element.

    27	$("li:last") - Selects the last <li> element.

    28	$("li:visible") - Selects all elements matched by <li> that are visible.

    29	$("li:hidden") - Selects all elements matched by <li> that are hidden.

    30	$(":radio") - Selects all radio buttons in the form.

    31	$(":checked") - Selects all checked box in the form.

    32	$(":input") - Selects only form elements (input, select, textarea, button).

    33	$(":text") - Selects only text elements (input[type = text]).

    34	$("li:eq(2)") - Selects the third <li> element.

    35	$("li:eq(4)") - Selects the fifth <li> element.

    36	$("li:lt(2)") - Selects all elements matched by <li> element before the third one; in other 
        words, the first two <li> elements.

    37	$("p:lt(3)") - selects all elements matched by <p> elements before the fourth one; in other 
        words the first three <p> elements.

    38	$("li:gt(1)") -Selects all elements matched by <li> after the second one.

    39	$("p:gt(2)") - Selects all elements matched by <p> after the third one.

    40	$("div/p") - Selects all elements matched by <p> that are children of an element matched by <div>.

    41	$("div//code") - Selects all elements matched by <code>that are descendants of an element 
        matched by <div>.

    42	$("//p//a") - Selects all elements matched by <a> that are descendants of an element matched by <p>

    43	$("li:first-child") - Selects all elements matched by <li> that are the first child of their parent.

    44	$("li:last-child") - Selects all elements matched by <li> that are the last child of their parent.

    45	$(":parent") - Selects all elements that are the parent of another element, including text.

    46	$("li:contains(second)") - Selects all elements matched by <li> that contain the text second.

. Seletores de filtros básicos:

    :eq()

        <!doctype html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>eq demo</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        </head>
        <body>
            <table border="1">
                <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
                <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
                <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
            </table>
            
            <ul class="nav">
            <li>List 1, item 1</li>
            <li>List 1, item 2</li>
            <li>List 1, item 3</li>
            </ul>
            <ul class="nav">
            <li>List 2, item 1</li>
            <li>List 2, item 2</li>
            <li>List 2, item 3</li>
            </ul>
        </body>
        <script>
            /* Deixará em vermelho a TD #2 */
            $( "td:eq( 2 )" ).css( "color", "red" );

            // Applies yellow background color to a single <li>
            $( "ul.nav li:eq(1)" ).css( "backgroundColor", "#ff0" );
            
            // Applies italics to text of the second <li> within each <ul class="nav">
            $( "ul.nav" ).each(function( index ) {
            $( this ).find( "li:eq(1)" ).css( "fontStyle", "italic" );
            });
            
            // Applies red text color to descendants of <ul class="nav">
            // for each <li> that is the second child of its parent
            $( "ul.nav li:nth-child(2)" ).css( "color", "red" );

        </script>
        </html>

    :even :odd

        <!doctype html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>even demo</title>
        <style>
        table {
            background: #eee;
        }
        </style>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        </head>
        <body>
        
            <table border="1">
                <tr><td>Row with Index #0</td></tr>
                <tr><td>Row with Index #1</td></tr>
                <tr><td>Row with Index #2</td></tr>
                <tr><td>Row with Index #3</td></tr>
            </table>
        
        <script>
            // Mudará o fundo das TRs pares
            $( "tr:even" ).css( "background-color", "#bbf" );

            // Mudará o fundo das TRs impares
            $( "tr:odd" ).css( "background-color", "#bbbbff" );
        </script>
        
        </body>
        </html>

    :gt :lt

        // Aplica a regra nas celulas maiores que 
        $( "td:gt(4)" ).css( "backgroundColor", "yellow" );

        // Aplica a regra nas celulas menores que 
        $( "td:gt(4)" ).css( "backgroundColor", "blue" );

    : not

        <body>
        
            <div>
                <input type="checkbox" name="a">
                <span>Mary</span>
            </div>
            <div>
                <input type="checkbox" name="b">
                <span>lcm</span>
            </div>
            <div>
                <input type="checkbox" name="c" checked="checked">
                <span>Peter</span>
            </div>
            
            <script>
                /* Aplicará a regra para os não checados
                $( "input:not(:checked) + span" ).css( "background-color", "yellow" );
                
                $( "input").attr( "disabled", "disabled" );
            </script>
        </body>
                
. Seletores Filtros de Contúdo

    . :contains(text)

        text: A string of text to look for. It's case sensitive.

        <!doctype html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>contains demo</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        </head>
        <body>
        
            <div>John Resig</div>
            <div>George Martin</div>
            <div>Malcom John Sinclair</div>
            <div>J. Ohn</div>

        </body>

        <script>
            $( "div:contains('John')" ).css( "text-decoration", "underline" );
        </script>
        </html>

    . :empty

        Verifica se não tem conteúdo dentro do elemento, se está vazio

        <!doctype html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>empty demo</title>
        <style>
        td {
            text-align: center;
        }
        </style>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        </head>
        <body>
        
            <table border="1">
            <tr><td>TD #0</td><td></td></tr>
            <tr><td>TD #2</td><td></td></tr>
            <tr><td></td><td>TD#5</td></tr>
            </table>
        
        
        </body>
        <script>
            $( "td:empty" ).text( "Was empty!" ).css( "background", "rgb(255,220,200)" );
        </script>
        </html>

    . :has

        Selects elements which contain at least one element that matches the specified selector.    

        <!doctype html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>has demo</title>
        <style>
        .test {
            border: 3px inset red;
        }
        </style>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        </head>
        <body>
        
            <div><p>Hello in a paragraph</p></div>
            <div>Hello again! (with no paragraph)</div>
        
        
        </body>
        <script>
        $( "div:has(p)" ).addClass( "test" );
        </script>
        </html>

    :parent

        O contrário de :empty, verifica se dentro do elemento tem conteúdo

        <!doctype html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>parent demo</title>
        <style>
        td {
            width: 40px;
            background: green;
        }
        </style>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        </head>
        <body>
        
        <table border="1">
        <tr><td>Value 1</td><td></td></tr>
        <tr><td>Value 2</td><td></td></tr>
        </table>
        
        <script>
        $( "td:parent" ).fadeTo( 1500, 0.3 );
        </script>
        
        </body>
        </html>


. Montagem formulário HTML já com os links para os principais scritps js:


    . Crie o arquivo style.css como abaixo:

        /*
        * Base structure
        */
        html, body {
            height: 100%;
        }

        body {
            padding-top: 56px;
            padding-left: 0;
        } 

        /*
        * main layout
        */
        .layout-main {
            display: flex;
            min-height: calc(100vh - 52px);
            overflow: hidden;
        }

        /*
        * Content
        */
        .layout-content {
            width: 100%;
            padding-top: 0px;
        }

        .container {
            width: 100%;
            padding-top: 20px;
        }

        /*
        * Sidebar
        */
        .sidebar {
            width: 0px;
            height: 100vh;
            border-top: 1px solid #eee;
            border-right: 1px solid #eee;    
            background-color: #f8f9fa;
            flex-shrink: 0;
            overflow: hidden;
            transition: width .5s;
        }

        .sidebar .nav {
            margin-bottom: 0px;
        }

        .sidebar .nav-item {
            width: 100%;
        }

        .sidebar .nav-item {
            margin-left: 0;
        }

        .sidebar .nav-link {
            border-radius: 0;
        } 

        .sidebar ul li:hover a, .menu ul li.active a{
            color: #777777;
        }

        .sidebar ul{
            list-style: none;
            padding: 10px 0px;
        }

        .sidebar ul li a{
            display: block;
            color:#1a1a1a;
            padding: 10px 15px;
            white-space: nowrap;
        }

        .sidebar.sidebar-open {
            width: 300px;
        }

        /*
        * nav-pills home
        */
        .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
            color: #fff;
            background-color: #1e94d2;
        }

        /*
        * toogle do navbar do menu
        */ 

        .navbar-toggle {
            display: inline-block;
            margin-left: 10px;
        }

        /*
        * Footer
        */
        .layout-footer {
            position: relative;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            height: 50px;
            border-top: 1px solid #eeeeee;
        }

        .footer-copy {
            font-size: 92%;
            display: block;
            color: #777777;
            text-align: center;
        }


    . Colocar os arquivos .js na pasta js e os .css na pasta css.

    . Criar o arquivo html como abaixo:

        <!DOCTYPE HTML>
        <html lang="pt-br">

        <head>
            <meta charset="utf-8" />
            <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
            <title>Título da Página (Estrutura básica de uma página com HTML 5)</title>
            <link href="css/bootstrap-grid.min.css" rel="stylesheet" />
            <link rel="stylesheet" href="css/bootstrap.min.css">
            <link rel="stylesheet" href="css/style.css">
        </head>

        <body>
            <section>
                <article>
                    <div class="container">
                        <header>
                            <h1>SERCOI</h1>
                        </header>
                    </div>

                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-2 form-group">
                                <label for="cpf">CPF</label>
                                <input type="text" id="cpf" class="form-control form-control-sm" placeholder="Digite o CPF..."
                                    name="cpf" data-mask="000.000.000-00" autofocus="autofocus">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label for="nome">Nome</label>
                                <input type="text" id="nome" class="form-control form-control-sm"
                                    placeholder="Digite o nome...">
                            </div>
                            <div class="col-sm-3 form-group">
                                <label for="salario">Salário</label>
                                <input type="text" id="salario" class="form-control form-control-sm moeda"
                                    placeholder="Digite o salário...">
                            </div>
                        </div>
                        <div class="form-check row" style="padding-top : 10px; padding-bottom : 10px;">
                            <label class="form-check-label col-sm-2">
                                <input type="checkbox" id="situacao" class="form-check-input" value="A">Ativo
                            </label>
                            <label class="form-check-label col-sm-2">
                                <input type="checkbox" id="pendencia" class="form-check-input" value="S">Tem Pendências
                            </label>
                        </div>


                        <div class="row">
                            <div class="col-sm-2">
                                <div class="card">
                                    <div class="card-header">
                                        Experiência
                                    </div>
                                    <div class="card-body">
                                        <div class="form-check-inline">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="optradio">Junior
                                            </label>
                                        </div>
                                        <div class="form-check-inline">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="optradio">Pleno
                                            </label>
                                        </div>
                                        <div class="form-check-inline disabled">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="optradio">Sênior
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-9 form-group">
                                <label for="observacao">Observação</label>
                                <textarea id="observacao" rows="10" class="form-control  form-control-sm"
                                    placeholder="Digite a observação..."></textarea>
                            </div>
                        </div>


                    </div>
                </article>
            </section>

            <footer>
                <p>Copyright 2020 Código Fonte©</p>
            </footer>
        </body>

        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.mask.min.js"></script>
        <!-- <script src="js/jquery.maskMoney.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#cpf').mask('000.000.000-00');
                $('.moeda').maskMoney({ prefix: 'R$ ', allowNegative: true, thousands: '.', decimal: ',', affixesStay: false });
            });

        </script>

        </html>


. Principais bibliotecas JQuery para ser utilizadas nos projetos:

    * Embora existe a possibilidade de baixar os arquivos para inseri los no projeto, sempre dê preferência pelo uso
        do cdn. Melhor site para buscar a identificação do cdn da biblioteca seria:

        https://cdnjs.com

    jquery

        site:

        https://plugins.jquery.com/     // Site com a familia de plugin jquery

        www.jquery.com


        cdn:

        https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js


        NPM:

        npm install jquery


    jquery-mask

        site:

        https://igorescobar.github.io/jQuery-Mask-Plugin/

        cdn:

        https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js

        via NPM:

        npm install jquery-mask-plugin

    bootstrap

        site:

        https://getbootstrap.com/

        cdn:

        https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
        https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js

        NPM:
    
        npm install bootstrap // Procurar como instalar a versão 4

    jquery-maskmoney

        site:

        http://plentz.github.io/jquery-maskmoney/


        cdn:

        https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js


    moment.js               
    
        site:

        www.momentjs.com

        cdn:

        https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js


    jquery-form-validator       // Pesquisar

        site:

        https://jqueryvalidation.org/

        cdn:

        https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.79/jquery.form-validator.min.js
        https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.79/theme-default.min.css
        

    bootboxjs       // Pesquisar

        site:

        http://bootboxjs.com/


        cdn:

        https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js


    opensource.locaweb          // Pesquisar

        site:

        http://opensource.locaweb.com.br/locawebstyle-v2/manual/introducao/como-usar/

        