Web前端最新【前端】layui前端框架学习笔记，在线前端开发培训

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

});

##### 3.2.2.1 水平导航



> 
> 水平导航: `layui-nav`  
>  当前被选中项: `layui-this`  
>  二级菜单: `layui-nav-child`
> 
> 
> 


##### 3.2.2.2 垂直/侧边导航



> 
> 垂直导航: `layui-nav layui-nav-tree`  
>  侧边导航: `layui-nav layui-nav-tree layui-nav-side`
> 
> 
> 


##### 3.2.2.3 导航主题



> 
> 颜色:`layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）`  
>  徽章:
> 
> 
> 


##### 3.2.2.4 面包屑



> 
> 面包屑导航: `layui-breadcrumb`  
>  自定义分隔符: `lay-separator="-"` 
> 
> 
> 

//…
});

面包屑导航

首页 国际新闻 亚太地区 正文

#### 3.2.3 选项卡



> 
> 导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。  
>  依赖加载组件：`element` （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）
> 
> 
> 


* 实现步骤


1. 引入资源

2. 依赖加载模块

##### 3.2.3.1 默认Tab选项卡



> 
> 默认Tab选项卡: `layui-tab`  
>  选项卡内容: `layui-tab-content`
> 
> 
> 


##### 3.2.3.2 Tab简洁风格



> 
> Tab简洁风格: `layui-tab layui-tab-brief`
> 
> 
> 


##### 3.2.3.3 Tab卡片风格



> 
> Tab卡片风格: `layui-tab layui-tab-card`
> 
> 
> 


##### 3.2.3.4 带删除的Tab



> 
> 以对父层容器设置属性 `lay-allowClose="true"` 来允许Tab选项卡被删除
> 
> 
> 


#### 3.2.4 表格


##### 3.2.4.1 静态表格



> 
> `layui-table`
> 
> 
> 


##### 3.2.4.2 基础属性


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/3d651d5bd2f141dfa2a037d1eb91a63e.png)

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

#### 3.2.5 表单



> 
> 在一个容器中设定 class=“`layui-form`” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。  
>  依赖加载模块：`form` （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）
> 
> 
> 



> 
> `layui-form`
> 
> 
> 


##### 3.2.5.1 基本结构

标签区域

原始表单元素区域

> 
> 常用属性  
>  required：注册浏览器所规定的必填字段  
>  lay-verify：注册form模块需要验证的类型  
>  layui-input-block 占据整行宽度  
>  layui-input-inline 不会占据部分宽度
> 
> 
> 


##### 3.2.5.2 文本框

> 
> `autocomplete`是否自动填充（当浏览器缓存中存在相同的name属性时，会填充）  
>   `placeholder` 为空时,默认显示的文本信息  
>  `class="layui-input"`：layui.css提供的通用CSS类
> 
> 
> 


##### 3.2.5.3 下拉选择框



> 
> `optgroup` 标签给select分组  
>  通过`selected`属性设置默认选中项  
>  `disabled`禁用该选择:可可以设置select和option标签(禁用下拉框和禁用下拉选项)  
>   `lay-search` 来开启搜索匹配功能
> 
> 
> 

<!--第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项（存在value值）作为默认选中项。你可以在option的空值项中自定义文本，如：请选择分类。-->
<div class="layui-form-item">
    <label class="layui-form-label">我是下拉选择框</label>
    <div class="layui-input-inline">
        <!--通过selected属性设置默认选中项-->
        <!--disabled禁用该选择:可以针对所有选择,也可以针对单个item-->
        <!--<select name="city" lay-verify="required" disabled>-->
        <select name="city" lay-verify="required">
            <option value="">请选择一个城市</option>
            <option value="010" selected>北京</option>
            <option value="021">上海</option>
            <option value="0571" disabled>杭州</option>
        </select>

        <select name="quiz" lay-verify="required">
            <option value="">请选择</option>
            <optgroup label="城市记忆">
                <option value="你工作的第一个城市" selected>你工作的第一个城市？</option>
            </optgroup>
            <optgroup label="学生时代">
                <option value="你的工号">你的工号？</option>
                <option value="你最喜欢的老师">你最喜欢的老师？</option>
            </optgroup>
        </select>
        <select name="city" lay-search>
            <option value="">请选择一个城市</option>
            <option value="010">你好啊北京,hello</option>
            <option value="021" selected>上海</option>
            <option value="0571" disabled>杭州</option>
        </select>
    </div>
</div>

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/88686229d8fa402da2a6f5d1b9b84239.png)


##### 3.2.5.3 复选框



> 
> 属性`title`可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）  
>  属性`checked`可设定默认选中  
>  属性`lay-skin`可设置复选框的风格  
>  设置`value="1"`可自定义值，否则选中时返回的就是默认的on+
> 
> 
> 

标签区域22

---

##### 3.2.5.5 开关



> 
> 其实就是checkbox复选框的“变种”，通过设定 `lay-skin="switch"` 形成了开关风格  
>  属性`checked`可设定默认开  
>  属性`disabled`开启禁用  
>  属性`lay-text`可自定义开关两种状态的文本  
>  设置`value="1"`可自定义值，否则选中时返回的就是默认的on
> 
> 
> 

<div class="layui-form-item">
    <label class="layui-form-label">标签区域22</label>
    <div class="layui-input-block">
        <!--默认风格：-->
        <input type="checkbox" name="xxx" lay-skin="switch" lay-text="开/关闭">
        <input type="checkbox" name="yyy" lay-skin="switch" checked disabled>
        <input type="checkbox" name="zzz" lay-skin="switch" value="1">
    </div>
</div>

##### 3.2.5.6 单选框



> 
> 属性`title`可自定义文本  
>  属性`disabled`开启禁用  
>  设置`value="xxx"`可自定义值，否则选中时返回的就是默认的on
> 
> 
> 

<div class="layui-form-item">
    <label class="layui-form-label">标签区域22</label>
    <div class="layui-input-block">
        <input type="radio" name="sex" value="nan" title="男">
        <input type="radio" name="sex" value="nv" title="女" checked>
        <input type="radio" name="sex" value="" title="中性" disabled>
    </div>
</div>

##### 3.2.5.7 文本域



> 
> `class="layui-textarea"`：layui.css提供的通用CSS类
> 
> 
> 

<div class="layui-form-item">
    <label class="layui-form-label">标签区域22</label>
    <div class="layui-input-block">
        <textarea name="aaa" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
    </div>
</div>

##### 3.2.5.8 组装行内表单



> 
> class=“layui-inline”：定义外层行内  
>  class=“layui-input-inline”：定义内层行内
> 
> 
> 

<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">范围</label>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price\_min" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price\_max" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="password" name="" autocomplete="off" class="layui-input">
        </div>
    </div>
</div>

##### 3.2.5.9 忽略美化渲染



> 
> 对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格
> 
> 
> 

<div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block" >
        <select name="city" lay-search lay-ignore>
            <option value="">请选择一个城市</option>
            <option value="010">你好啊北京,hello</option>
            <option value="021" selected>上海</option>
            <option value="0571" disabled>杭州</option>
        </select>
    </div>
</div>

##### 3.2.5.10 表单方框风格



> 
> 追加 layui-form-pane 的class，来设定表单的方框风格
> 
> 
> 

内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：

单选框

### 3.3 组件示例


#### 3.3.1 弹层组


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c1debf1b45f7406bb90faf1b67a08e18.png)


##### 3.3.1.1 作为独立组件使用(未下载到独立版本)



> 
> 引入jQuery1.8以上的任意版本，  
>  引入layer.js  
>  引入layer.css
> 
> 
> 

##### 3.3.1.2 layui 模块化使用



> 
> 引入layui.css  
>  引入layui.js
> 
> 
> 

layui.use(‘form’, function () {
var layer = layui.layer;
layer.msg(‘hello’);
});

##### 3.3.1.3 内置方法



> 
> `layer.open`  
>  `layer.msg`
> 
> 
> 


##### 3.3.1.4 type-基本层类型



> 
> 类型：Number，默认：0  
>  layer提供了5种层类型。可传入的值有：  
>  `0（信息框，默认）`  
>  `1（页面层）`  
>  `2（iframe层）`  
>  `3（加载层）`  
>  `4（tips层）`   
>  若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
> 
> 
> 


##### 3.3.1.5 title-标题



> 
> 类型：String/Array/Boolean，默认：‘信息’  
>  title支持三种类型的值，若你传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以`title: ['文本', 'font-size:18px;']`，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以`title: false`  
>  **总结:**  
>  `title :'我是标题'`  
>  `title: ['文本', 'font-size:18px;']`  
>  `title: false`
> 
> 
> 


##### 3.3.1.6 content-内容



> 
> 类型：String/DOM/Array，默认：‘’  
>  content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
> 
> 
> 

/!*
如果是页面层
*/
layer.open({
type: 1,
content: ‘传入任意的文本或html’ //这里content是一个普通的String
});
layer.open({
type: 1,
content: $(‘#id’) //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post(‘url’, {}, function(str){
layer.open({
type: 1,
content: str //注意，如果str是object，那么需要字符拼接。
});
});
/!*
如果是iframe层
*/
layer.open({
type: 2,
content: ‘http://sentsin.com’ //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: [‘http://sentsin.com’, ‘no’]
});
/!*
如果是用layer.open执行tips层
*/
layer.open({
type: 4,
content: [‘内容’, ‘#id’] //数组第二项即吸附元素选择器或者DOM
});

##### 3.3.1.7 area - 宽高



> 
> 类型：String/Array，默认：‘auto’  
>  在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]
> 
> 
> 


##### 3.3.1.8 icon - 图标



> 
> `信息框和加载层的私有参数`  
>  类型：Number，默认：-1（信息框）/0（加载层）  
>  信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2
> 
> 
> 


#### 3.3.2 日期与时间选择


##### 3.3.2.1 作为独立组件使用(未下载到独立版本)


##### 3.3.2.2 在 layui 模块中使用

layui.use(‘form’, function () {
var laydate = layui.laydate;

});

##### 3.3.1.4 基础参数选项



> 
> 通过核心方法：`laydate.render(options)` 来设置基础参数，也可以通过方法：`laydate.set(options)` 来设定全局基础参数.
> 
> 
> 

laydate.render({
elem: ‘#test1’ //指定元素
});

##### 3.3.1.5 elem - 绑定元素



> 
> 类型：String/DOM，默认值：无  
>  必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象
> 
> 
> 

laydate.render({
elem: ‘#test’ //或 elem: document.getElementById(‘test’)、elem: lay(‘#test’) 等
});

##### 3.3.1.6 type - 控件选择类型



> 
> 类型：String，默认值：date  
>  用于单独提供不同的选择器类型
> 
> 
> 




| type可选值 | 名称 | 用途 |
| --- | --- | --- |
| year | 年选择器 | 只提供年列表选 |
| month | 年月选择器 | 只提供年、月选择 |
| date | 日期选择器 | 可选择：年、月、日。type默认值，一般可不填 |
| time | 时间选择器 | 只提供时、分、秒选择 |
| datetime | 日期时间选择器 | 可选择：年、月、日、时、分、秒 |

//日期范围选择
laydate.render({
elem: ‘#test’
,range: true //或 range: ‘~’ 来自定义分割字符
});

//日期时间范围选择
laydate.render({
elem: ‘#test’
,type: ‘datetime’
,range: true
});

//时间范围选择
laydate.render({
elem: ‘#test’
,type: ‘time’
,range: true
});

//年范围选择
laydate.render({
elem: ‘#test’
,type: ‘year’
,range: true
});

//年月范围选择
laydate.render({
elem: ‘#test’
,type: ‘month’
,range: true
});

##### 3.3.1.7 format - 自定义格式



> 
> 类型：String，默认值：`yyyy-MM-dd`  
>  通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下
> 
> 
> 




| 格式符 | 说明 |
| --- | --- |
| yyyy | 年份，至少四位数。如果不足四位，则前面补零 |
| y | 年份，不限制位数，即不管年份多少位，前面均不补零 |
| MM | 月份，至少两位数。如果不足两位，则前面补零。 |
| M | 月份，允许一位数。 |
| dd | 日期，至少两位数。如果不足两位，则前面补零。 |
| d | 日期，允许一位数。 |
| HH | 小时，至少两位数。如果不足两位，则前面补零。 |
| H | 小时，允许一位数。 |
| mm | 分钟，至少两位数。如果不足两位，则前面补零。 |
| m | 秒数，至少两位数。如果不足两位，则前面补零。 |
| s | 秒数，允许一位数。 |

laydate.render({
elem: ‘#test6’
, format: ‘yyyy年MM月dd日’ //可任意组合
});

##### 3.3.1.8 value - 初始值



> 
> 类型：String，默认值：new Date()  
>  支持传入符合format参数设定的日期格式字符，或者 new Date()
> 
> 
> 

//传入符合format格式的字符给初始值
laydate.render({
elem: ‘#test’
,value: ‘2018-08-18’ //必须遵循format参数设定的格式
});

//传入Date对象给初始值
laydate.render({
elem: ‘#test’
,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});

#### 3.3.3 分页



> 
> 模块加载名称：laypage
> 
> 
> 


##### 3.3.3.1 基础参数选项



> 
> 通过核心方法：`laypage.render(options)` 来设置基础参数。由于使用非常简单，本篇直接罗列核心接口的参数选项
> 
> 
> 


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b7221dac1df549a1b4db77e99ac67c00.png)

##### 3.3.3.2 jump - 切换分页的回调



> 
> 当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
> 
> 
> 

laypage.render({
elem: ‘test1’
,count: 70 //数据总数，从服务端得到
,jump: function(obj, first){
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数

//首次不执行
if(!first){
  //do something
}

}
});

#### 3.3.4 数据表格



> 
> 模块加载名称：table
> 
> 
> 


##### 3.3.4.1 快速使用

js数据格式

{
“code”: 0,
“msg”: “”,
“count”: 50,
“data”: [{
“singer_name”: “周杰伦”,
“singer_pic”: “http://y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.webp”,
“other_name”: “Jay Chou”,
“singer_id”: 4558,
“id”: 1
},
{
“singer_name”: “林俊杰”,
“singer_pic”: “http://y.gtimg.cn/music/photo_new/T001R150x150M000001BLpXF2DyJe2.webp”,
“other_name”: “JJ Lin”,
“singer_id”: 4286,
“id”: 2
}
]
}

##### 3.3.4.2 三种初始化渲染方式



> 
> 默认方式是`方法渲染`  
>  ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/bd4cb6a87f37468f8f02e93de58ced21.png)
> 
> 
> 


##### 3.3.4.3 方法渲染

// 方法渲染
table.render({
elem: ‘#demo2’
, height: 312
, url: ‘singers.json’ //数据接口
, page: true //开启分页
, cols: [[ //表头

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• 

cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.webp",
“other_name”: “Jay Chou”,
“singer_id”: 4558,
“id”: 1
},
{
“singer_name”: “林俊杰”,
“singer_pic”: “http://y.gtimg.cn/music/photo_new/T001R150x150M000001BLpXF2DyJe2.webp”,
“other_name”: “JJ Lin”,
“singer_id”: 4286,
“id”: 2
}
]
}

##### 3.3.4.2 三种初始化渲染方式



> 
> 默认方式是`方法渲染`  
>  ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/bd4cb6a87f37468f8f02e93de58ced21.png)
> 
> 
> 


##### 3.3.4.3 方法渲染

// 方法渲染
table.render({
elem: ‘#demo2’
, height: 312
, url: ‘singers.json’ //数据接口
, page: true //开启分页
, cols: [[ //表头

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• [外链图片转存中…(img-FoIUqT7v-1715205034124)]

常用算法面试题：

• [外链图片转存中…(img-pMr3ZkTp-1715205034125)]

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• [外链图片转存中…(img-wC4iDHrT-1715205034125)]