• Readonly和Disabled的异同

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

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

详细：

 

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

 

• 不定宽高垂直居中分析

详细：

 

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

复选框的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(""+eNameMsg+""); 9                                 //$(this).focus();10                             }11                             else{12                                 if(/(\s|\d)+/g.test($(this).val())){13                                     var eNameFormatMsg = "姓名中不能包含数字和空格";14                                     $parent.append(""+eNameFormatMsg+"");15                                 }16                                 else{17                                     var rMsg = "输入正确";18                                     $parent.append(""+rMsg+"");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(""+ePhoneMsg+"");27                                 //$(this).focus();28                             }29                             else{30                                 var rPhoneMsg = "输入正确";31                                 $parent.append(""+rPhoneMsg+"");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  2  3  4 
      5 
      6 
      7 
      8 
      9 
     10 27 28 29 30 
     
      31     
      
       模块一
      
32     
      
       模块二
      
33     
      
       模块三
      
34     
      
       模块四
      
35 
     
36 37 38 

 

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

具体参见：