客户管理项目总结(前端)

• Readonly和Disabled的异同

Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：

Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。

详细：http://www.nowamagic.net/html/html_ReadonlyAndDisabled.php

 

• js正则RegExp的实例属性lastIndex

lastIndex:整数，表示开始搜索下一个匹配项的字符位置，从0算起。

var reg = /cat/g , string = "cat";
var btn = document.getElementById("button");
btn.onclick = function(){
4 　alert(reg.test(string));
5 }

原因：第一次点击弹出true，第二次点击弹出false，第三次又是true，接下来又是false；原因在于reg.test(string)每执行一次，RegExp的实例属性lastIndex就会改变一次；第一次准备执行时，lastIndex为0；第一次执行完后，匹配到了cat，此时lastIndex为3；再次匹配时就会从lastIndex为3的地方匹配，那个地方为空，所以匹配就是false了，然后lastIndex变成0了；所以第三次匹配的时候，就会是true。

解决办法：每次执行一次使lastIndex = 0;或者直接用字面量表示：/cat/g.test(string)

btn.onclick = function(){
    alert(reg.test(string));
    reg.lastIndex = 0;   
}   

 

• js正则匹配中文汉字字符：[\u4e00-\u9fa5]

 

• 不定宽高垂直居中分析

详细：http://www.cnblogs.com/pingfan1990/p/4551289.html?utm_source=tuicool&utm_medium=referral

 

• 复选框和与之对应的文字对齐

复选框的margin-top可进行微调，也可以增加左右外边距。

.checkbox{
    vertical-align:middle;
    margin-top:0;                      
}
.text{
     font-family:Tahoma;  
}

 

• Jquery全选

$("[name = allchecked]:checkbox").click(function(){$(":checkbox").attr("checked",this.checked);});

 

•  js二进制，八进制，十进制，十六进制之间的转换

var num = (二进制数||八进制数||十进制数||十六进制数);
num.parseInt(num,2||8||10||16).toString(2||8||10||16);

parseInt()接收两个参数，第一个是任意的数值num，第二个是num本身所对应的进制，parseInt()的结果是转化为10进制数；

toString()是将前面的num转化为对应的字符串，里面接收一个参数，将参数改成需要转化后的进制数即可，参数可以是2，8，10，16；

 

• js16进制颜色值转化为rgb

     function getRGB(color){
        var str = color.replace(/#/g,"");
        if(str.length==6){
            var one6 = parseInt(str[0]+str[1],16);
            var two6 = parseInt(str[2]+str[3],16);
            var three6 = parseInt(str[4]+str[5],16);
            return "rgb("+one6+","+two6+","+three6+")";
        }
        else if(str.length==3){
            var one3 = parseInt(str[0]+str[0],16);
            var two3 = parseInt(str[1]+str[1],16);
            var three3 = parseInt(str[2]+str[2],16);
            return "rgb("+one3+","+two3+","+three3+")";
        }
        else{
            return false;
        }
18     }

 

• 表单校验

js代码：

                $("input[data-need='1']").blur(function(){
                    var $parent = $(this).parent();
                    $parent.find(".formtips").remove();//每次失去焦点就会验证一次，所以每次开始要去掉之前提示的信息
                    //真实姓名验证
                    if($(this).is(".username")){
                            if ($(this).val()==""||$(this).val().length>6) {
                                var eNameMsg = "请输入不超过6位的真实姓名";
                                $parent.append("<span class='formtips errorMsg'>"+eNameMsg+"</span>");
                                //$(this).focus();
                            }
                            else{
                                if(/(\s|\d)+/g.test($(this).val())){
                                    var eNameFormatMsg = "姓名中不能包含数字和空格";
                                    $parent.append("<span class='formtips errorMsg'>"+eNameFormatMsg+"</span>");
                                }
                                else{
                                    var rMsg = "输入正确";
                                    $parent.append("<span class='formtips rightMsg'>"+rMsg+"</span>");
                                }
                            }
                    }
                    //电话验证
                    if($(this).is(".phone")){
                            if ($(this).val()==""||!(/^\d{7,12}$/g.test($(this).val()))) {
                                var ePhoneMsg = "请输入7-12位的电话号码";
                                $parent.append("<span class='formtips errorMsg'>"+ePhoneMsg+"</span>");
                                //$(this).focus();
                            }
                            else{
                                var rPhoneMsg = "输入正确";
                                $parent.append("<span class='formtips rightMsg'>"+rPhoneMsg+"</span>");
                            }
                    }
                });
                // 提交按钮验证
                $(".save").click(function(){
                    $("input[data-need='1']").trigger('blur');
                    var errorLenth = $("form .errorMsg").length;
                    if(errorLenth){
                        return false;
                    }
                    alert("保存成功,后台刷新此页面");
                });

css代码：设置span的display属性可让提示信息出现在对应信息框的右边或者下边

span{display: inline-block;text-indent: 1em;font-weight: bold;} .errorMsg{color:red;}
.rightMsg{color:green;}

 

• flex兼容性写法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
/* 
   flex：定义布局为盒模型
   flex-v：盒模型垂直布局
   flex-1：子元素占据剩余的空间
   flex-align-center：子元素垂直居中
   flex-pack-center：子元素水平居中
   flex-pack-justify：子元素两端对齐
   兼容性：ios 4+、android 2.3+、winphone8+
    */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
</style>
</head>
<body>

<div class="flex flex-pack-justify">
    <div class="flex-1">模块一</div>
    <div class="flex-1">模块二</div>
    <div class="flex-1">模块三</div>
    <div class="flex-1">模块四</div>
</div>

</body>
</html>

 

• 阻止浏览器对鼠标拖动页面元素会在新窗口打开的默认行为

<body ondragstart="return false"></body>

具体参见：http://www.runoob.com/jsref/event-ondragstart.html