js技巧

1 JSON.parse()

JSON.parse()
a='{"a":"abc"}';
b='[a,b,c,d]';
a,b 都是字符串 用 JSON.parse(a) -> 得到 原來對象;
原來只知道 json 對象可以用現在知道 數組對象也可以這樣用

那對于 JSON.stringify() 對于數組同樣有效

2 回到頂部

結構部分

 <div class="goTop hide"></div>

css部分

    .goTop{
    position: fixed;
    top: 75%;
    right: 30px;
    width: 60px;
    height: 60px;
    background-image: url("../img/goTop.png");
    background-size: cover;
    cursor: pointer;
}
   .hide{
   display:none;
   }

就是部分

$(window).scroll(function(){
    if ($(this).scrollTop() > 300){
        $(".goTop").removeClass("hide");
    }else {
        $(".goTop").addClass("hide");
    }
});
$(".goTop").on("click",function(){
    $("html,body").animate({scrollTop:0},1000);//回到頂端 耗時1秒
});

3 avalon過濾器的使用技巧

根據后臺返回的數據 根據 自定義顯示

 avalon.filters.Sugar_time = function(str){
    switch(str){
        case "before_breakfast":
        return "?? 早餐前";
        case "after_breakfast":
        return "?? 早餐后";
        case "before_lunch":
        return "?? 午餐前";
        case "after_lunch":
        return "?? 午餐后";
        case "before_dinner":
        return "?? 晚餐前";
        case "after_dinner":
        return "?? 晚餐后";
        case "before_sleeping":
        return "?? 睡覺前";
      
    }
}

<span>{{el.time_interval | Sugar_time}}</span>

4 replace 正則處理字符串 數組

處理"2012-01-05"和"2013-01-01"時間早晚的問題.

var reg = new RegExp('-', 'g');
var l_t = $('#begin_date').val().replace(reg, '');
var r_t = $( '#end_date').val().replace(reg, '');

  if (l_t - r_t > 0) {
                layer.open({
                    content: "親,開始時間 應早于 結束時間 ^_^",
                    type: 1,
                    time: 3,
                    className: 'mylayer',
                    shade: false
                });
                return false;
            }

<script type="text/javascript">
        var acss='red2 blue yellow red2 eee';
        var str='red';
        var str2='red2'
        var reg=new RegExp('\\b'+str2+'\\b','g');
        //alert(reg.test(acss))    
        alert(acss.replace(reg,str))   
        var acss='2012-12-02';
        var str='-';
        var str2='+';
        var reg=new RegExp('\\b'+str+'\\b','g');
        //alert(reg.test(acss))    
        alert(acss.replace(reg,''))   
    </script>

5 登錄表單,注冊表單 對不齊的解決方案

1 可以span標簽設置固定的寬度,
2 也可以讓容器內部元素定位的方式實現.

  <p><span>同戶名:</span> <input type="text" placeholder="4-15個字"></p>
   <p><span>密碼:</span> <input type="text" placeholder="4-15個字"></p>
    <p><span>住址:</span> <input type="text" placeholder="4-15個字"></p>

避免讓用戶短時間之內重復點擊.

//點擊出發時間之后  獲取到觸發點.
var $btn = $(e.target);
//當點擊事件發生后 立刻讓點擊事件 失效
$btn.prop('disabled',true);
........
........
當函數只想完畢以后 在從新讓點擊事件恢復.
$btn.prop('disabled',false);