前端中的业务场景

女爷i 2022-10-01 10:49 171阅读 0赞

## input框H5的新特性 ##

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

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

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

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

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

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

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

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

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

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

**9、readonly** 指示字段的值无法修改。

**10、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 动态获取，避免一次请求过多，另外请求到的数据可以缓存到变量中，避免重复请求浪费数据。

转载于:https://juejin.im/post/5cb5cf50f265da03a630cddd