客户管理项目总结(前端)
- 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算起。
1 var reg = /cat/g , string = "cat"; 2 var btn = document.getElementById("button"); 3 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)
1 btn.onclick = function(){ 2 alert(reg.test(string)); 3 reg.lastIndex = 0; 4 }
- js正则匹配中文汉字字符：[\u4e00-\u9fa5]
- 不定宽高垂直居中分析
详细：http://www.cnblogs.com/pingfan1990/p/4551289.html?utm_source=tuicool&utm_medium=referral
- 复选框和与之对应的文字对齐
复选框的margin-top可进行微调，也可以增加左右外边距。
1 .checkbox{ 2 vertical-align:middle; 3 margin-top:0; 4 } 5 .text{ 6 font-family:Tahoma; 7 }
- Jquery全选
1 $("[name = allchecked]:checkbox").click(function(){$(":checkbox").attr("checked",this.checked);});
- js二进制，八进制，十进制，十六进制之间的转换
1 var num = (二进制数||八进制数||十进制数||十六进制数); 2 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
1 function getRGB(color){ 2 var str = color.replace(/#/g,""); 3 if(str.length==6){ 4 var one6 = parseInt(str[0]+str[1],16); 5 var two6 = parseInt(str[2]+str[3],16); 6 var three6 = parseInt(str[4]+str[5],16); 7 return "rgb("+one6+","+two6+","+three6+")"; 8 } 9 else if(str.length==3){ 10 var one3 = parseInt(str[0]+str[0],16); 11 var two3 = parseInt(str[1]+str[1],16); 12 var three3 = parseInt(str[2]+str[2],16); 13 return "rgb("+one3+","+two3+","+three3+")"; 14 } 15 else{ 16 return false; 17 } 18 }
- 表单校验
js代码：
1 $("input[data-need='1']").blur(function(){ 2 var $parent = $(this).parent(); 3 $parent.find(".formtips").remove();//每次失去焦点就会验证一次，所以每次开始要去掉之前提示的信息 4 //真实姓名验证 5 if($(this).is(".username")){ 6 if ($(this).val()==""||$(this).val().length>6) { 7 var eNameMsg = "请输入不超过6位的真实姓名"; 8 $parent.append("<span class='formtips errorMsg'>"+eNameMsg+"</span>"); 9 //$(this).focus(); 10 } 11 else{ 12 if(/(\s|\d)+/g.test($(this).val())){ 13 var eNameFormatMsg = "姓名中不能包含数字和空格"; 14 $parent.append("<span class='formtips errorMsg'>"+eNameFormatMsg+"</span>"); 15 } 16 else{ 17 var rMsg = "输入正确"; 18 $parent.append("<span class='formtips rightMsg'>"+rMsg+"</span>"); 19 } 20 } 21 } 22 //电话验证 23 if($(this).is(".phone")){ 24 if ($(this).val()==""||!(/^\d{7,12}$/g.test($(this).val()))) { 25 var ePhoneMsg = "请输入7-12位的电话号码"; 26 $parent.append("<span class='formtips errorMsg'>"+ePhoneMsg+"</span>"); 27 //$(this).focus(); 28 } 29 else{ 30 var rPhoneMsg = "输入正确"; 31 $parent.append("<span class='formtips rightMsg'>"+rPhoneMsg+"</span>"); 32 } 33 } 34 }); 35 // 提交按钮验证 36 $(".save").click(function(){ 37 $("input[data-need='1']").trigger('blur'); 38 var errorLenth = $("form .errorMsg").length; 39 if(errorLenth){ 40 return false; 41 } 42 alert("保存成功,后台刷新此页面"); 43 });
css代码：设置span的display属性可让提示信息出现在对应信息框的右边或者下边
1 span{display: inline-block;text-indent: 1em;font-weight: bold;} .errorMsg{color:red;} 2 .rightMsg{color:green;}
- flex兼容性写法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> 6 <meta content="yes" name="apple-mobile-web-app-capable"> 7 <meta content="black" name="apple-mobile-web-app-status-bar-style"> 8 <meta content="telephone=no" name="format-detection"> 9 <meta content="email=no" name="format-detection"> 10 <style type="text/css"> 11 /* 12 flex：定义布局为盒模型 13 flex-v：盒模型垂直布局 14 flex-1：子元素占据剩余的空间 15 flex-align-center：子元素垂直居中 16 flex-pack-center：子元素水平居中 17 flex-pack-justify：子元素两端对齐 18 兼容性：ios 4+、android 2.3+、winphone8+ 19 */ 20 .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} 21 .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;} 22 .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;} 23 .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} 24 .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;} 25 .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;} 26 </style> 27 </head> 28 <body> 29 30 <div class="flex flex-pack-justify"> 31 <div class="flex-1">模块一</div> 32 <div class="flex-1">模块二</div> 33 <div class="flex-1">模块三</div> 34 <div class="flex-1">模块四</div> 35 </div> 36 37 </body> 38 </html>
- 阻止浏览器对鼠标拖动页面元素会在新窗口打开的默认行为
<body ondragstart="return false"></body>
