就從簡單的說起吧，仔細想想似乎也沒什麼難的東西，只是覺得收貨了一些乾貨而已，可見多麼的弱。
   1.輸入框佔位符的相容問題，placeholder是個很好的屬性，但是ie9及一下版本不支援，這時候就需要一個佔位符相容的外掛了，我用的是jquery.placeholder.js，很好用，引入之後只需要呼叫一下就OK。類似這樣：

    $('input').placeholder();

不過這玩意兒不是萬能的，我最近在做的一個專案就遇到了另外一種問題，真是腦洞大開，想不到的問題都能遇到，隨後我會貼上我的解決方案；
2.懶載入，jQuery有一個很好的外掛解決的這個問題，這個技術方案特別適用於電商之類的圖片比較多的專案，因為它能優化首屏的呈現時間，減少使用者等待，當然和天貓那種公司比不了，人家更絕，用的是BigPipe技術，沒仔細研究過，一種極端的載入方案；
 

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
 <script type="text/javascript" src="jquery.lazyload.js"></script>
 $("img.lazy").lazyload({
     event : "click"//設定事件來觸發載入
     effect: "show",//使用特效,例如淡入淡出，動畫之類的
    threshold :200,//設定臨界點(PX)
    });

3.表單驗證還是用大名鼎鼎的jQuery.validate.js,用起來很方便，API有很多，直接將專案中的程式碼片擼過來了，還是看註釋吧。
 

 $("#yourForm").validate({
            // debug: true,    //開發中用，阻止表單的提交
            rules: {
                username: {
                    required:true,   //必須填寫
                    remote: {
                            url: "check-username.php",     //後臺處理程式
                            type: "post"
 
,
                            dataType: "json",
                            data: {
                                username: function() {
                                    return $("#username").val();
                                }
                            }
                        }
                },
                password: {
                    required:{depends:function(element){
                        return $("#username").is(":filled");  //向上依賴，上邊的非空後再向下驗證
                    }},
                    remote: {
                            url: "check-username.php",     //後臺處理程式
                            type: "post",
                            dataType: "json",
                            data: {
                                password: function() {
                                    return $("#password").val();
                                }
                            }
                        }
                },
                  verif:{
                    required:{depends:function(element){
                        return $("#password").is(":filled");
                    }},
                },
            },
            messages: {
                username: {
                    required: '請輸入使用者名稱',
                    remote:'使用者名稱錯誤，請重新輸入',
                },
                password: {
                    required: '請輸入密碼',
                    remote:'密碼錯誤，請重新輸入',
                },
                verif:{
                    required:"請輸入驗證碼",
                }
            },
            //錯誤提示資訊元素標籤
             errorElement:"em",
            //高亮錯誤的輸入框
            highlight: function(element, errorClass, validClass) {
                $(element).addClass(errorClass).removeClass(validClass);
            },
            //輸入正確後取消高亮
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass(errorClass).addClass(validClass);
            },
            //對一組元素的驗證，用一個錯誤提示??  這個貌似我沒印象了
            groups:{
                login:"username password"
            },
            //將錯誤提示資訊放在一個地方，適用與比較擁堵的頁面
            errorPlacement:function(error,element){
                   error.appendTo("#myInfo");
            }
            //最後再來一個手機號碼正則，很有用，也很常用
            jQuery.validator.addMethod("telphoneValid", function(value, element) {
                var tel = /^1[3|4|5|7|8]\d{9}$/;
                return tel.test(value) || this.optional(element);
            }, "請輸入正確的手機號碼");
        });

表單驗證基本就這些夠用了，目前還沒碰到這個外掛解決不了的問題。
先貼這麼多吧，後邊有些東西還是分開寫吧。