前端开发经常使用技巧

时间 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;