jQuery插件

一、validation插件

表單驗證：
使用方式：①引入jQuery庫和validation插件
②確定那個表單需要驗證，$(“#表單域id”).validate()
③給表單域設置驗證規則。
class=”required” 爲必須填寫，minlength=”2”爲最小長度爲2，class=”required email” 必填且符合email格式，class=”url” 爲 url格式驗證。

驗證原理：驗證失敗後，在表單域後動態創建一個class爲error的label標籤，同樣是左浮動，需要清除浮動，如果不清除浮動，label.error樣式會達不到想要的效果。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>第一個validation插件程序</title>
        <style type="text/css">
            * {
                font-family: verdana;
                font-size: 96%;
            }

            label {
                width: 10em;
                float: left;
            }
            /*如果不符合驗證規則 則自動在被驗證的文本框後面加一個class屬性爲error的label
            作爲提示信息 因爲上面已經設置了label爲浮動 所以自動生成的顯示提示信息的label
            也是浮動的 所以效果有些問題 需要給自動生成的label修改它的float爲none
            如果想控制提示信息和文本框的距離 可以設置padding-left* */

            label.error {
                float: none;
                color: red;
                padding-left: 5em;
                vertical-align: top;
                background-color: burlywood;
            }

            p {
                clear: both;
            }

            em {
                font-weight: bold;
                padding-right: 1em;
                vertical-align: top;
            }

            .submit {
                margin-left: 12em;
            }
        </style>
        <!--第一步 導入jQuery庫和validation插件-->
        <script src="../../jsJava庫/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../jsJava庫/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("#commentForm").validate();
            });
        </script>

    </head>

    <body>
        <form id="commentForm" action="#" method="get">
            <fieldset>
                <legend>帶驗證的評論</legend>
                <p>
                    <label for="username">姓名</label><em>*</em>
                    <input type="text" name="username" id="username" size="25" class="required" minlength="2" />
                </p>

                <p>
                    <label for="email">電子郵件</label><em>*</em>
                    <input type="text" name="email" id="email" size="25" class="required email" />
                </p>

                <p>
                    <label for="url">網址</label><em>&nbsp;&nbsp;</em>
                    <input type="text" name="url" id="url" size="25" class="url" />
                </p>

                <p>
                    <label for="comment">你的評論</label><em>*</em>
                    <textarea id="comment" name="comment" cols="22" class="required"></textarea>
                </p>

                <p>

                    <input class="submit" type="submit" value="提交" />
                </p>
            </fieldset>
        </form>
    </body>

</html>

二、metadata.js插件

metadata.js 是與 validation.js 不同的驗證方法。
兩種不同的驗證寫法
（一）class=”required” 和 minlength=”2”都寫在class裏
使用方式：①引入jQuery、validation、metadata.js，注意：validation 和 metadata 版本要配套。
②$(“表id”).validate({meta:”validate”});
③將規則寫入class,
示例：

<form id="commentForm" action="#" method="get">
            <fieldset>
                <legend>帶驗證的評論</legend>
                <p>
                    <label for="username">姓名</label><em>*</em>
                    <input type="text" name="username" id="username" size="25"  class="{validate:{required:true, minlength:2}}"   />
                </p>

                <p>
                    <label for="email">電子郵件</label><em>*</em>
                    <input type="text" name="email" id="email" size="25" class="{validate:{required:true, email:true}}" />
                </p>

                <p>
                    <label for="url">網址</label><em>&nbsp;&nbsp;</em>
                    <input type="text" name="url" id="url" size="25" class="{validate:{url:true}}" />
                </p>

                <p>
                    <label for="comment">你的評論</label><em>*</em>
                    <textarea id="comment" name="comment" cols="22" class="{validate:{required:true}}"></textarea>
                </p>

                <p>

                    <input class="submit" type="submit" value="提交" />
                </p>
            </fieldset>
        </form>

（二）將驗證規則和HTML結構分離
先將表單域的class屬性移除，使用jQuery修改class

$(function() {
                $("#commentForm").validate({
                    rules:{
                        username:{
                            required:true,
                            minlength:2
                        },
                        email:{
                            required:true,
                            email:true
                        },
                        url:"url",
                        comment:"required"
                    }
                });
    });

三、驗證信息自定義（中文）

（一）國際化
使用方式：①引入jquery.validate.messages_cn.js
其它適用於上例相同，只是英文改成中文。

（二）自定義提示信息
在之前的錯誤提示位置修改代碼：required:’請輸入姓名’
示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>把驗證規則都放到class中統一管理</title>
        <style type="text/css">
            * {
                font-family: verdana;
                font-size: 96%;
            }

            label {
                width: 10em;
                float: left;
            }


            label.error {
                float: none;
                color: red;
                padding-left: 5em;
                vertical-align: top;

            }

            p {
                clear: both;
            }

            em {
                font-weight: bold;
                padding-right: 1em;
                vertical-align: top;
            }

            .submit {
                margin-left: 12em;
            }
        </style>
        <!--第一步 導入jQuery庫和validation插件-->
        <script src="../../jsJava庫/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../jsJava庫/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../jsJava庫/jquery.metadata.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("#commentForm").validate({meta: "validate"});
            });
        </script>

    </head>

    <body>
        <form id="commentForm" action="#" method="get">
            <fieldset>
                <legend>帶驗證的評論</legend>
                <p>
                    <label for="username">姓名</label><em>*</em>
                    <input type="text" name="username" id="username" size="25"  
                    class="{validate:{required:true, minlength:2,messages:{required:'請輸入姓名',minlength:'請至少輸入兩個字符'}}}"   />
                </p>

                <p>
                    <label for="email">電子郵件</label><em>*</em>
                    <input type="text" name="email" id="email" size="25" 
                        class="{validate:{required:true, email:true,messages:{required:'請輸入電子郵件',email:'請檢查電子郵件的格式'}}}" />
                </p>

                <p>
                    <label for="url">網址</label><em>&nbsp;&nbsp;</em>
                    <input type="text" name="url" id="url" size="25" class="{validate:{url:true,messages:{url:'請檢查網址的格式'}}}" />
                </p>

                <p>
                    <label for="comment">你的評論</label><em>*</em>
                    <textarea id="comment" name="comment" cols="22" class="{validate:{required:true,messages:{required:'請輸入您的評論'}}}"></textarea>
                </p>

                <p>

                    <input class="submit" type="submit" value="提交" />
                </p>
            </fieldset>
        </form>
    </body>

</html>

（三）自定義提示信息並美化
在（二）的基礎上加以美化，加上成功或失敗圖片。
示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>驗證規則和HTML內容分離.html</title>
        <style type="text/css">
            * {
                font-family: verdana;
                font-size: 96%;
            }

            label {
                width: 10em;
                float: left;
            }



            label.error {
                float: none;
                color: red;
                /*padding-left: 5em;*/
                vertical-align: top;
                background-color: yellowgreen;

                background: url("../../../img/unchecked.gif") no-repeat 2px 0px;
                padding-left: 18px;
            }

            label.success {
                background: url("../../../img/checked.gif") no-repeat 2px 0px;
                padding-left: 18px;
            }

            p {
                clear: both;
            }

            em {
                font-weight: bold;
                padding-right: 1em;
                vertical-align: top;
            }

            .submit {
                margin-left: 12em;
            }




        </style>
        <!--第一步 導入jQuery庫和validation插件-->
        <script src="../../jsJava庫/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../jsJava庫/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("#commentForm").validate({
                    rules: {
                        username: {
                            required: true,
                            minlength: 2
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        url: "url",
                        comment: "required"
                    },
                    messages: {
                        username: {
                            required: '請輸入姓名',
                            minlength: '請至少輸入兩個字符'
                        },
                        email: {
                            required: '請輸入電子郵件',
                            email: '請檢查電子郵件的格式'
                        },
                        url: '請檢查網址的格式',
                        comment: '請輸入您的評論'
                    },

                    errorElement: "label", //可以用其他標籤，記住把樣式也對應修改
                    success: function(label) {
                        //label指向上面那個錯誤提示信息標籤em
                        label.text(" ") //清空錯誤提示消息
                            .addClass("success"); //加上自定義的success類
                    }
                });
            });
        </script>

    </head>

    <body>
        <form id="commentForm" action="#" method="get">
            <fieldset>
                <legend>驗證規則和HTML內容分離</legend>
                <p>
                    <label for="username">姓名</label><em>*</em>
                    <input type="text" name="username" id="username" size="25" minlength="2" />
                </p>

                <p>
                    <label for="email">電子郵件</label><em>*</em>
                    <input type="text" name="email" id="email" size="25" />
                </p>

                <p>
                    <label for="url">網址</label><em>&nbsp;&nbsp;</em>
                    <input type="text" name="url" id="url" size="25" />
                </p>

                <p>
                    <label for="comment">你的評論</label><em>*</em>
                    <textarea id="comment" name="comment" cols="22"></textarea>
                </p>

                <p>

                    <input class="submit" type="submit" value="提交" />
                </p>
            </fieldset>
        </form>
    </body>

</html>

（四）自定義驗證規則
在頁面註冊底部，加一個類似驗證碼的內容，例：7+9=？，如果寫的是16，則驗證通過。
示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>驗證規則和HTML內容分離.html</title>
        <style type="text/css">
            * {
                font-family: verdana;
                font-size: 96%;
            }

            label {
                width: 10em;
                float: left;
            }

            label.error {
                float: none;
                color: red;
                /*padding-left: 5em;*/
                vertical-align: top;
                background-color: yellowgreen;
                /*假裝此處有圖片，是個錯誤提示的圖片*/
                background: url("../../../img/unchecked.gif") no-repeat 2px 0px;
                padding-left: 18px;
            }

            label.success {
                background: url("../../../img/checked.gif") no-repeat 2px 0px;
                padding-left: 18px;
            }

            p {
                clear: both;
            }

            em {
                font-weight: bold;
                padding-right: 1em;
                vertical-align: top;
            }

            .submit {
                margin-left: 12em;
            }
        </style>
        <!--第一步 導入jQuery庫和validation插件-->
        <script src="../../jsJava庫/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../jsJava庫/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {

                //自定義一個驗證方法
                $.validator.addMethod(
                    "formula", //驗證方法名稱
                    function(value, element, param) { //驗證規則
                        return value == eval(param);
                    },
                    '請正確輸入數學公式計算後的結果' //驗證提示信息
                );

                $("#commentForm").validate({
                    rules: {
                        username: {
                            required: true,
                            minlength: 2
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        url: "url",
                        comment: "required",
                        valCode: {
                            formula: "7+9"
                        }
                    },
                    messages: {
                        username: {
                            required: '請輸入姓名',
                            minlength: '請至少輸入兩個字符'
                        },
                        email: {
                            required: '請輸入電子郵件',
                            email: '請檢查電子郵件的格式'
                        },
                        url: '請檢查網址的格式',
                        comment: '請輸入您的評論'
                    },

                    errorElement: "label", //可以用其他標籤，記住把樣式也對應修改
                    success: function(label) {
                        //label指向上面那個錯誤提示信息標籤em
                        label.text(" ") //清空錯誤提示消息
                            .addClass("success"); //加上自定義的success類
                    }
                });
            });
        </script>

    </head>

    <body>
        <form id="commentForm" action="#" method="get">
            <fieldset>
                <legend>自定義驗證規則</legend>
                <p>
                    <label for="username">姓名</label><em>*</em>
                    <input type="text" name="username" id="username" size="25" minlength="2" />
                </p>

                <p>
                    <label for="email">電子郵件</label><em>*</em>
                    <input type="text" name="email" id="email" size="25" />
                </p>

                <p>
                    <label for="url">網址</label><em>&nbsp;&nbsp;</em>
                    <input type="text" name="url" id="url" size="25" />
                </p>

                <p>
                    <label for="comment">你的評論</label><em>*</em>
                    <textarea id="comment" name="comment" cols="22"></textarea>
                </p>

                <p>
                    <label for="valCode">驗證碼</label><em>*</em>
                    <input type="text" name="valCode" id="valCode" size="25" />=7+9
                </p>

                <p>

                    <input class="submit" type="submit" value="提交" />
                </p>
            </fieldset>
        </form>
    </body>

</html>

管理cookie的插件–cookie.js

Cookie是網站設計者放置在客戶端的小文本文件. 實現存儲用戶曾經瀏覽過的產品列表,記住用戶喜歡瀏覽哪類新聞等.在用戶允許的情況下,還可以存儲用戶的登錄信息,使得用戶在訪問網站時不必每次都鍵入這些信息.

1.往cookie中存
.cookie(“屬性名”，“屬性值”，path:′/′,expires:10)第三個參數，含義是：保存在當前頁面，有效期10天。2.取 .cookie(“屬性名”)；
3.刪除cookie
$.cookie(‘cookie名’，null);置爲null

以記住用戶名爲例：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jQuery Cookie Plugin</title>
        <script src="../../jsJava庫/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../jsJava庫/jquery.cookie.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                var COOKIE_NAME = 'username';
//              alert($.cookie(COOKIE_NAME));
                if( $.cookie(COOKIE_NAME) ){
                    $("#username").val($.cookie(COOKIE_NAME) );
                }

                $("#check").click(function(){

                    if(this.checked){
                        $.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });
                    }else{
                        $.cookie(COOKIE_NAME, null, { path: '/' });
                    }
                });
            });
        </script>
    </head>
    <body>
          用戶名：<input type="text" name="username" id="username"/> <br/>
         <input type="checkbox" name="check" id="check"/>記住用戶名
    </body>
</html>

自定義插件

方法：①新建一個jquery.自定義插件名.js。
②語法格式：
;(function()//這裏寫插件代碼)(jQuery);這樣的格式是立即調用的匿名函數。前面寫一個；是爲了防止與上一個導入的js文件衝突，通常js文件壓縮時，會把最後一個;作爲空格處理。這樣做解決了不同js之間的衝突。還可以這樣寫：!function( ){

}(jQuery);
//或把！寫成+,!+( )的作用都是把函數轉化成表達式，立即執行。

插件裏的代碼格式（不固定）：
$.fn.extend({
//json數據格式
})

示例：修改顏色的插件

;(function ($) {
    $.fn.extend({
        "color":function (value) {
            if(value == undefined){
                return this.css("color");
            }else{
                return this.css("color",value);             
            }
        }
    });
})(jQuery);

$.extend的作用

把當前對象的屬性提取出來，如果重複則合併或覆蓋，如果沒有就添加。
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../jsJava庫/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){

                //合併
                var $obj = $.extend({
                    odd:"odd",  /* 偶數行樣式*/
                    even:"even", /* 奇數行樣式*/

                },{
                    odd:"111",
                    selected:"selected"

                });

                console.info($obj);
            });


        </script>
    </head>
    <body>
    </body>
</html>

$(“選擇器”，上下文（可以寫this）);//如果不穿第二個參數，默認上下文是document，從當前整個文檔中去找，this是在當前對象下找，提高了查找效率。

一、validation插件

二、metadata.js插件

三、驗證信息自定義（中文）

管理cookie的插件–cookie.js

自定義插件

$.extend的作用

Spring Cloud最最基礎的入門（個人學習版--入門用）

Maven 多模塊父子工程 (含Spring Boot示例)

程序版本（分支）管理策略

一語點醒技術人：你不是Google

從大佬公開課學到的一些知識分享（1）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結