前端常用代碼片段(一)

chnmagnus 發(fā)布于2019-08-21 11:35 / 880人閱讀

最后更新于2019年1月13日

前端常用代碼片段(一) 點(diǎn)這里
前端常用代碼片段(二) 點(diǎn)這里
前端常用代碼片段(三) 點(diǎn)這里
前端常用代碼片段(四) 點(diǎn)這里
前端常用代碼片段(五) 點(diǎn)這里
前端常用代碼片段(六) 點(diǎn)這里

大部分需要引入 jquery-1.9.1.min.js（兼容ie8）

1.回車觸發(fā)事件的代碼

    $(function(){
        $("#username").focus();
        //回車查詢
        document.onkeydown = function(event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 13) {
                $("#signIn").trigger("click");
            }
        };
    });

2.把對象格式的參數(shù)轉(zhuǎn)成鍵值對，并以&分割

/**
 * 把對象格式的參數(shù)轉(zhuǎn)成鍵值對，并以&分割
 * @param arr 要轉(zhuǎn)換的對象參數(shù)
 * @returns {string}
 */
function maiyaBuildParam(arr){
    var result = "";
    for(var key in arr)
    {
        result += key + "=" + encodeURIComponent(arr[key]) + "&";
    }
    result = result.substr(0,result.length-1);
    return result;
}

3.去除表單內(nèi)容兩端的空格，設(shè)置cookie緩存,對象轉(zhuǎn)成字符串

 function submitForm() {
        var param = {
            userName: $.trim($("#username").val()),
            password: $.trim($("#password").val())
            //userName: $("#username").val().trim(),
            //password: $("#password").val().trim()
            //ie8下邊支持$.trim,   不支持$("#").val().trim()
        };
        $.ajax({
            type: "post",
            url: serverIp + "rest/login?" + Math.random() + "&" + BuildParam(param),   
            //這里傳入一個隨機(jī)數(shù)避免ie8緩存問題,下邊cache對ie8無效
            //data: JSON.stringify(param),  //傳入組裝的參數(shù)
            //contentType: "application/json; charset=utf-8",
            cache: false,  //禁用緩存
            dataType: "json",
            success: function (result) {
                if(result.result_code === "1"){
                    $.cookie("userinfo", JSON.stringify(result.data), { expires: 7 });
                    window.location.href = "index.html";
                }else{
                    alert("用戶名或密碼錯誤");
                }
            },
            error: function(msg) {
                alert(msg.message || "操作失?。?);
            }
        })
    }

4.設(shè)置cookie,獲取cookie

//設(shè)置cookie比,并將json數(shù)據(jù)源轉(zhuǎn)成string
    $.cookie("userinfo", JSON.stringify(json), { expires: 7 });

//獲取cookie,并將返回的string格式數(shù)據(jù)解析成json
    JSON.parse($.cookie("userinfo"));
 
//清除cookie
    $.cookie("userinfo",null);

項(xiàng)目示例

//設(shè)置cookie
 $.ajax({
            type: "post",
            url: serverIp + "rest/login?" + Math.random() + "&" + maiyaBuildParam(param),
            dataType: "json",
            success: function (result) {
                if(result.result_code === "1"){
                    $.cookie("userinfo", JSON.stringify(result.data), { expires: 7 });
                    window.location.href = "index.html";
                }else{
                    alert("用戶名或密碼錯誤");
                }
            },
            error: function(msg) {
                alert(msg.message || "操作失?。?);
            }
        })

//獲取和清空cookie
    if(!$.cookie("userinfo")) {
        location.href="login.html";
    }
    $("#loginOut a").click(function () {
        $.cookie("userinfo",null);
    });
    var userinfo = JSON.parse($.cookie("userinfo"));
    if(userinfo) {
        var _src = userinfo.docPic ? userinfo.docPic : (userinfo.docSex == 2 ? "images/women.png" : "images/man.png");
        $("#userInfoImage").attr("src",_src)
        $("#username,#leftusername").html(userinfo.docName);
        $("#jobtitle").html(userinfo.docProfe);
        var docRole = userinfo.docRole == 0 && "醫(yī)師" || "管理員";
        $("#loginuser").html(docRole);
    }
    if(userinfo.docRole == 0) {
        $("#menu-product").show();
        $("#menu-admin,#menu-tongji").hide();
    } else if(userinfo.docRole == 1) {
        $("#menu-product").hide();
        $("#menu-admin,#menu-tongji").show();
    }

說明：
jquery.cookie.js 只允許開發(fā)人員存入字符串，故用JSON.stringify(json)將json轉(zhuǎn)換成string

補(bǔ)充：JSON.stringify與JSON.parse() [ 此類方法在低版本ie上需要引入json2.js ]

parse用于從一個字符串中解析出json對象,如
var str = "{"name":"huangxiaojian","age":"23"}"
JSON.parse(str)
-->
Object
age: "23"
name: "huangxiaojian"
__proto__: Object
注意：單引號寫在{}外，每個屬性名都必須用雙引號，否則會拋出異常。

stringify()用于從一個對象解析出字符串，如
var a = {a:1,b:2}
JSON.stringify(a)
--->
結(jié)果："{"a":1,"b":2}"

5.三目運(yùn)算的另一種寫法

var docRole = userinfo.docRole == 0 && "醫(yī)師" || "管理員";

var _src = userinfo.docPic ? userinfo.docPic : (userinfo.docSex == 2 ? "images/women.png" : "images/man.png");

記得以前看過別人寫的文章里提到有網(wǎng)易的面試題出現(xiàn)過區(qū)分 ||  &&聯(lián)合使用時返回的結(jié)果，當(dāng)時老記不住，現(xiàn)在有這個應(yīng)該容易記了

6.時間格式化

使用方式

new Date().format("yyyy-MM-dd");  // "2017-02-18"

new Date().format("yyyy-MM-dd hh-mm-ss");  //
"2017-02-18 04-41-08"
new Date().format("yyyy-MM-dd hh/mm/ss");  //
"2017-02-18 04/41/18"
new Date().format("yyyy-MM-dd HH/mm/ss");  //
"2017-02-18 16/42/30"

new Date().format("yyyy-MM-dd E HH/mm/ss");
  //"2017-02-18 六 16/51/16"
new Date().format("yyyy-MM-dd EE HH/mm/ss");  //
"2017-02-18 周六 16/51/30"

new Date().format("yyyy-MM-dd EEE HH/mm/ss");  //
"2017-02-18 星期六 16/51/77"

源碼

Date.prototype.format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //12小時
        "H+": this.getHours(), //24小時
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    var week = {
        "0": "日",
        "1": "一",
        "2": "二",
        "3": "三",
        "4": "四",
        "5": "五",
        "6": "六"
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if (/(E+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "周") : "") + week[this.getDay() + ""]);
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
}

7.獲取輸入日期所在周或者前后某周的周一

使用方式

new Date();
  //Sat Feb 18 2017 17:35:25 GMT+0800 (中國標(biāo)準(zhǔn)時間)

getMonday( new Date(),-1);  //
Mon Feb 06 2017 17:40:45 GMT+0800 (中國標(biāo)準(zhǔn)時間)

getMonday( new Date());  //Mon Feb 13 2017 17:34:34 GMT+0800 (中國標(biāo)準(zhǔn)時間)

getMonday( new Date(),1);  //
Mon Feb 20 2017 17:34:43 GMT+0800 (中國標(biāo)準(zhǔn)時間)

源碼

function getMonday(date, offset){
    var today=date || new Date();
    return new Date( today - ((today.getDay() ||7) -1  - (offset||0) *7 )  *864E5  );
}


//改進(jìn)，獲取輸入日期所在周或者前后某周的任意某天
function getWeekAnyday(weekday,offset,date){
    var today=date || new Date();
    return new Date( today - ((today.getDay() ||7) -(weekday||0)  - (offset||0) *7 )  *864E5  );
}

8.獲取輸入日期的前后某天日期

使用方式

new Date();
  //Sat Feb 18 2017 17:35:25 GMT+0800 (中國標(biāo)準(zhǔn)時間)

getOneDayByDate(new Date() ,-2);  //Thu Feb 16 2017 18:20:39 GMT+0800 (中國標(biāo)準(zhǔn)時間)

getOneDayByDate(new Date() ,2);  //Mon Feb 20 2017 18:20:49 GMT+0800 (中國標(biāo)準(zhǔn)時間)

源碼

function getOneDayByDate(date, n) {
    var d = typeof date == "string" && new Date(date) || date;
    d.setTime(d.getTime()+24*60*60*1000*n);
    //return d.getFullYear()+"-" + (d.getMonth()+1) + "-" + d.getDate();  //用于獲取"2017-2-16"格式日期
    return new Date(d);
}

9.My97DatePicker使用

首先引入js

場景1：選擇時間段，前者不能大于后者的時間，后者不能小于前者時間且不大于當(dāng)天時間

給input賦相差一個星期的初始值

 $("#datemin").val(getOneDayByDate(new Date(), -6).format("yyyy-MM-dd"));
 $("#datemax").val(thisDate());

function thisDate() {
    var d = new Date();
    return d.format("yyyy-MM-dd");
}

10.刷新當(dāng)前頁面

//刷新當(dāng)前頁面

 location.reload();

//如果把該方法的參數(shù)設(shè)置為 true，那么無論文檔的最后修改日期是什么，它都會繞過緩存，從服務(wù)器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是完全一樣。

這是原生的方法

11. 判斷元素是否在數(shù)組內(nèi)

js方法

var arr = [1, 2, 3];
// js arr.indexOf(3)
var result1 = arr.indexOf(3); //返回index為2

jquery方法

var arr = [1, 2, 3];
// jquery $.inArray(3, arr)
var result = $.inArray(3, arr); //返回index為2

自定義方法

var arr = [1, 2, 3];
// 自定義 contains(arr, 3)方法
function contains(arr, obj) {
    //while
    var i = arr.length;
    while(i--) {
        if(arr[i] === obj) {
            return i;
        }
    }
    return -1;
}
var result1 = contains(arr, 3); //返回index為2

12.解析url中傳遞的參數(shù)

描述：解析ajax get方式傳遞的參數(shù)，
例如“https://www.zybuluo.com/mdedi...://www.zybuluo.com/static/editor/md-help.markdown”

1.方法一

使用方式

    $.getUrlParam("url"); //"https://www.zybuluo.com/static/editor/md-help.markdown"

源碼

$.getUrlParam = function(name) {
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = decodeURIComponent(window.location.search).substr(1).match(reg);
    if (r!=null) return unescape(r[2]); return null;
};

說明:此方式是將方法拓展到了jquery,也可以定義成方法

使用方式

    getUrlParam("url");  //"https://www.zybuluo.com/static/editor/md-help.markdown"

function getUrlParam(name) {
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = decodeURIComponent(window.location.search).substr(1).match(reg);
    if (r!=null) return unescape(r[2]); return null;
};

2.方法二將攜帶的所有參數(shù)轉(zhuǎn)化成json對象

使用方式

var urlParamsToJson= getUrlParamsToJson(); //Object {url: "https://www.zybuluo.com/static/editor/md-help.markdown"}

源碼

function getUrlParamsToJson() {
    var url = location.href;
    var nameValue;
    var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
    var paraObj = {};
    for (var i = 0; nameValue = paraString[i]; i++) {
      var name = nameValue.substring(0, nameValue.indexOf("=")).toLowerCase();
      var value = nameValue.substring(nameValue.indexOf("=") + 1, nameValue.length);
      if (value.indexOf("#") > -1) {
         value = value.split("#")[0];
      }
      paraObj[name] = value;
    }
    return paraObj;
};

13.封裝折疊（兼容ie8）

html


  
    標(biāo)題+
     內(nèi)容
很多內(nèi)容 
  
  
    標(biāo)題+

#box{
    width:500px;height:400px;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
    display: table-cell;
    vertical-align:middle;
 
}
 
#box img{
    vertical-align:middle;
}

20.decodeURI() 函數(shù)解碼處理不了"+"

使用javascript的decodeURIComponent函數(shù)解碼查詢字符串時，處理不了"+"，例如下面

這里需要再做一下處理：

decodeURIComponent(str.replace(/+/g, "%20"));

即在調(diào)用decodeURIComponent函數(shù)之前要先把+替換為%20,這樣就沒有問題了

云服務(wù)器 GPU云服務(wù)器代碼片段添加代碼片段 Python代碼片段 BootStrap代碼片段

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86888.html

發(fā)表評論

登陸后可評論

0條評論

chnmagnus

男|高級講師

我要關(guān)注我要私信

TA的文章

把 RNN 循環(huán)神經(jīng)網(wǎng)絡(luò)植入體內(nèi)，僅憑一張“薄片”，就能直接檢測你有無心律異常

閱讀 3595·2021-09-13 10:28
SecureIDC：$19/月/1GB內(nèi)存/100GB SSD空間/500GB流量/1Gbps端口/

閱讀 1946·2021-08-10 09:43
第三集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫(button組件其一)

閱讀 1018·2019-08-30 15:44
Bootstrap 柵格布局

閱讀 3189·2019-08-30 13:14
解決input 中placeholder的那些神坑

閱讀 1843·2019-08-29 16:56
一個常年更新的CSS采坑合集

閱讀 2946·2019-08-29 16:35
HTML CSS 實(shí)現(xiàn)鼠標(biāo)懸停時圖片拉近效果

閱讀 2852·2019-08-29 12:58
canvas-塔防游戲

閱讀 872·2019-08-26 13:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端常用代碼片段(一)

1.方法一

2.方法二將攜帶的所有參數(shù)轉(zhuǎn)化成json對象

標(biāo)題+

標(biāo)題+

相關(guān)文章

前端常用代碼片段(六)

前端常用代碼片段(四)

前端常用代碼片段(三)

前端常用代碼片段(二)

前端常用代碼片段(五)

發(fā)表評論

0條評論

chnmagnus

男|高級講師

TA的文章

把 RNN 循環(huán)神經(jīng)網(wǎng)絡(luò)植入體內(nèi)，僅憑一張“薄片”，就能直接檢測你有無心律異常

SecureIDC：$19/月/1GB內(nèi)存/100GB SSD空間/500GB流量/1Gbps端口/

第三集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫(button組件其一)

Bootstrap 柵格布局

解決input 中placeholder的那些神坑

一個常年更新的CSS采坑合集

HTML CSS 實(shí)現(xiàn)鼠標(biāo)懸停時圖片拉近效果

canvas-塔防游戲

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端常用代碼片段(一)

1.方法一

2.方法二將攜帶的所有參數(shù)轉(zhuǎn)化成json對象

標(biāo)題+

標(biāo)題+

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！