前端中的业务场景

input框H5的新特性

一、accept 规定可经过文件上传控件提交的文件类型。（仅适用于 type="file"）

<input type="file" name="pic" accept="image/gif,image.jpg" />
复制代码

容许上传两种文件类型：gif 和 jpeg

2. autocomplete 规定是否使用输入字段的自动完成功能。

三、disabled 规定当页面加载时是否禁用该 input 元素。（不适用于 type="hidden"）

四、height定义 input 字段的高度。（适用于 type="image"）

五、max规定输入字段的最大值。请与 "min" 属性配合使用，来建立合法值的范围。

6.maxlength规定文本字段中容许的最大字符数（限制输入长度）。

七、pattern规定输入字段的值的模式或格式。例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。

八、placeholder 规定帮助用户填写输入字段的提示。

九、readonly 指示字段的值没法修改。

十、required 指示输入字段的值是必需的。

正则表达式经常使用

. 匹配除换行符之外的任意字符

\w 匹配字母或数字或下划线或汉字 等价于 '[^A-Za-z0-9_]'

\s 匹配任意的空白符

\d 匹配数字

\b 匹配单词的开始或结束

^ 匹配字符串的开始

$ 匹配字符串的结束

复选框全选、全不选、反选

经过给每一个标签绑定相同的id名 而后再for循环每一个进行遍历设置checked的true（全选） false（全不选）值来达到。反选就是if（id名的为checked设置为false）

//表单验证
        function check(){
            var ids = document.getElementsByName("ids");
            var flag = false ;
            for(var i=0;i<ids.length;i++){
                if(ids[i].checked){
                    flag = true ;
                    break ;
                }
            }
            if(!flag){
                alert("请最少选择一项！");
                return false ;
            }
        }
        //全选
        function iselect(){ //其中函数字不能为select 其为JS保留字
            var ids = document.getElementsByName("ids");
            var all = document.getElementById("all");
            for(var i=0;i<ids.length;i++){
                ids[i].checked=all.checked;
            }
        }
        //全选
        function selectAll(){
            var ids = document.getElementsByName("ids");
            for(var i=0;i<ids.length;i++){
                ids[i].checked=true;
            }
        }
        //全不
        function selectNone(){
            var ids = document.getElementsByName("ids");
            for(var i=0;i<ids.length;i++){
                ids[i].checked=false;
            }
        }
        //反选
        function selectInvert(){
            var ids = document.getElementsByName("ids");
            for(var i=0;i<ids.length;i++){
                if(ids[i].checked)
                    ids[i].checked=false ;
                else
                    ids[i].checked=true ;
            }
        }
复制代码

移动端有一万个数据，每一个数据插入一个 li 中，如何在单页面中优化这个 dom

首先，获取 li 的高度，而后计算单屏的高度，而后获取单屏中渲染的 li 的数量,能够提早渲染上一屏和下一屏的数据，而后在滑动的过程当中动态加载 li 进行渲染。对于数据也能够经过 ajax 动态获取，避免一次请求过多，另外请求到的数据能够缓存到变量中，避免重复请求浪费数据。