前端開發經常使用技巧

時間 2019-12-06

標籤前端開發經常使用技巧简体版

原文原文鏈接

一、背景圖片中部放大、縮小html

<html>
<head>
    <title>測試背景圖片屬性</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <style>
        .back{width:200px;height:200px;line-height:200px;background-image:url("http://a.hiphotos.baidu.com/image/pic/item/f9dcd100baa1cd11daf25f19bc12c8fcc3ce2d46.jpg");background-repeat:no-repeat;background-size:90%;background-position:center;}
    </style>
</head>
<body>
    <div class="back"></div>
    <script>
        $(".back").mouseover(function(){
            $(".back").animate({backgroundSize:'95%'},1000,function(){});
        });
        $(".back").mouseout(function(){
            $(".back").animate({backgroundSize:'90%'},500,function(){});
        });
    </script>
</body>
</html>

二、字母、數字、下劃線兩種及以上組合正則表達式：jquery

//驗證密碼的規則，字母數字下劃線符號，6-20位
function checkPwd(pwd) {
    var regex = new RegExp('^(?![0-9]+$)(?![a-zA-Z]+$)(?![\_]+$)[0-9A-Za-z\_]{6,20}$');
    return regex.test(pwd);
}

三、Cookie跨頁面訪問取不到值ajax

指定可訪問cookie的路徑
　　默認狀況下，若是在某個頁面建立了一個cookie，那麼該頁面所在目錄中的其餘頁面也能夠訪問該cookie。若是這個目錄下還有子目錄，則在子目錄中也能夠訪問。例如在www.xxxx.com/html/a.html中所建立的cookie，能夠被www.xxxx.com/html/b.html或正則表達式

www.xxx.com/ html/ some/c.html所訪問，但不能被www.xxxx.com/d.html訪問。爲了控制cookie能夠訪問的目錄，須要使用path參數設置cookie，語法以下：document.cookie="name=value; path=cookieDir";其中cookieDir表示可訪問cookie的目錄。例如：document.cookie="userId=320; path=/shop";就表示當前cookie僅能在shop目錄下使用。若是要使cookie在整個網站下可用，能夠將cookie_dir指定爲根目錄，例如：document.cookie="userId=320; path=/";瀏覽器

指定可訪問cookie的主機名
　　和路徑相似，主機名是指同一個域下的不一樣主機，例如：www.google.com和gmail.google.com就是兩個不一樣的主機名。默認狀況下，一個主機中建立的cookie在另外一個主機下是不能被訪問的，但能夠經過domain參數來實現對其的控制，其語法格式爲：document.cookie="name=value; domain=cookieDomain";以google爲例，要實現跨主機訪問，能夠寫爲：document.cookie="name=value;domain=.google.com";這樣，全部google.com下的主機均可以訪問該cookie。cookie

四、img設置默認圖片地址dom

<img src="圖片的url地址" alt="圖片XX"/>

　　當在頁面顯示的時候，萬一圖片被移動了位置或者丟失的話，將會在頁面顯示一個帶X的圖片，非常影響用戶的體驗。即便使用alt屬性給出了"圖片XX"的提示信息，也起不了多大做用。測試

　　其實，能夠這樣處理：當圖片不存在的時候，會觸發onerror事件，咱們能夠在該事件中作一下補救的工做，好比：

　　a、讓這個圖片元素隱藏：

<img src="圖片的url地址" alt="圖片XX" onerror="this.style.display='none'"/>

　　b、用默認的圖片替換：網站

<img src="圖片的url地址" alt="圖片XX" onerror="this.src='默認圖片的url地址'"/>

　　注意：若是使用不當，在IE內核的瀏覽器下會形成死循環。好比：當【默認圖片的url地址】也加載不成功（好比網速比較慢的時候）或不存在的話，就會反覆的加載，最後形成堆棧溢出錯誤。this

　　所以，須要用下面兩種方法解決：

　　a、更改 onerror 代碼爲其它處理方式或者確保 onerror 中的默認圖片足夠小，而且存在。

　　b、控制onerror事件只觸發一次，須要增長這句話：this.onerror=null; 增長後以下：

<img src="圖片的url地址" alt="圖片XX" onerror="this.src='默認圖片的url地址;this.onerror=null'"/>

經測試，上面的方法在IE各個版本及谷歌、火狐瀏覽器中都支持。

五、js返回頂部：

document.documentElement.scrollTop = document.body.scrollTop =0;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。