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

  • 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>

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

posted @ 2016-12-02 22:52  xingba-coder  阅读(626)  评论(0编辑  收藏  举报