web前端开发基础-技术方案&常见问题

时间：2017年3月3日09:28:03

    在实际项目的开发过程中，经常会遇到很多很庞杂的问题需要实时处理，加上项目时间节点的控制，处理问题的效率和最优方案的选取是程序员需要不断提升的技能。因此，每一位程序员都需要建立自己的学习记录文档或知识点汇总文档，方便自我能力提升的循序渐进。

    前端开发遇到的问题：

1、禁止手机页面垂直滚动：

$('body).css("overflow","hidden");

$(document).on('touchmove',function(e){ e.preventDefault(); });
body{ position: fixed;}//根据需求添加top,left...
body{ overflow: hidden;
     /*height: 100%;*/
}
html,html{ overflow: hidden; height: 100%; }

2、input元素和textarea元素在移动端显示，出现上阴影：

input[type="text"] {

-webkit-appearance: none;
}

textarea{
-webkit-appearance: none;
}

3、正则表达式校验：

手机号码：/^1(3|4|5|7|8)[0-9]\d{8}$/ || /^1(3[0-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/

邮箱：/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/

        if(!/^1(3[0-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/.test(tel)){
            //不是正确的11位手机号码
            return;
        }
        if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)){
            //不是正确的邮箱地址
            return;
        }

4、页面元素显示样式，元素背景透明，元素内容文字不透明

设置该元素样式：background: rgba(255,255,1,0.55);//前三位参数为16进制色值，末尾参数为透明度

5、z-index设置元素层叠顺序的前提：元素的position样式为relative || absolute || fixed三者之一

6、JavaScript正则对象

match()方法：

str="The rain in SPAIN stays mainly in the plain";

n=str.match(/ain/gi);//g全局匹配 i不区分大小写

match()方法的返回值n为一个字符串数组，n=["ain","AIN","ain","ain"];

\u**** 元字符，用于查找以十六进制数 xxxx 规定的 Unicode 字符。如果未找到匹配，则返回 null。

\u4e00-\u9fa5 匹配中文，这两个unicode值正好是Unicode表中的全部汉字的头和尾，代表了符合汉字GB18030规范的字符集。

至少匹配一个汉字的正则表达式：

[\u4e00-\u9fa5]+://"[]"表示可以匹配这个区间的任何值，“+”代表至少出现1次。

replace()方法：

name= name.replace(/[^a-zA-Z\u4E00-\u9FA5\u2006\u0027]/g,'').replace(/^\s+/g,'');//注册用户名校验

/[^a-zA-Z\u4E00-\u9FA5\u2006\u0027]/匹配26个英文字母大小写+全部汉子+2个IOS系统需要的特字符，以外的全部字符。

/^\s+/g全局匹配以空白字符(空格、制表、回车、换行、垂直换行、换页符)开始的一个或连续多个字符串，"+"表示匹配至少一个结果进行匹配，如：一个空格，或连续的多个空格

7、常见复选框的设计方案，HTML结构如下：
<input id="report" style="margin:0;vertical-align:middle;" type="checkbox" name="isMergeRow" checked/>
<label for="report">合并</label>

8、判断复选框是否选中的jQuery代码如下：
if ( elem.checked ){}else{}
if ( $(elem).prop("checked") ){}else{}
if ( $(elem).is(":checked") ){}else{}

9、选取第一个子元素的两种方案：
$('#table-report-htmltext-div > div').first().css('display','none');
$('#table-report-htmltext-div').children('div:first-child').css('display','none');

10、选取第一个子元素的两种方案：
$('#table-report-htmltext-div > div').first().css('display','none');
$('#table-report-htmltext-div').children('div:first-child').css('display','none');