【原生JavaScript 与 JQuery】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<button id="btn">一个问题</button>

<script type="text/javascript">

    document.getElementById("btn").onclick = function () {

        alert("原始JS事件触发");

    }

</script>

</body>

</html>

效果：

如果使用JQuery：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<button id="btn">一个问题</button>

<script type="text/javascript">

    $(function () {

       $("#btn").click(function () {

           alert("JQuery触发！");

       });

    });

</script>

</body>

</html>

效果：

【使用Layui】

首先需要导入Layui的资源，这是使用CDN连接：

    <script src="https://www.layuicdn.com/layui/layui.js"></script>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

然后声明Layui模块加载：

    layui.use('layer', function(){

        let layer = layui.layer;

    });

使用Layer模块的方法调用：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script src="https://www.layuicdn.com/layui/layui.js"></script>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<button id="btn">按钮</button>

<script type="text/javascript">

    // 加载Layer模块

    layui.use('layer', function(){

        let layer = layui.layer;

    });

    $(function () {

        $("#btn").click(function () {

            layer.alert("这是layer的警告弹窗");

        });

    });

</script>

</body>

</html>

效果：

使用带有样式的弹窗：

<button id="btn">按钮</button>

<br>

<button id="btn2">按钮2</button>

<script type="text/javascript">

    // 加载Layer模块

    layui.use('layer', function(){

        let layer = layui.layer;

    });

    $(function () {

        $("#btn").click(function () {

            layer.alert("这是layer的警告弹窗");

        });

        //第三方扩展皮肤

        $("#btn2").click(function () {

            layer.alert('内容', {

                icon: 1,

                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅

            });

        });

    });

</script>

效果：

确认框和消息框：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script src="https://www.layuicdn.com/layui/layui.js"></script>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<p> <button id="confirm-btn">确认</button> </p>

<script type="text/javascript">

    layui.use('layer', function(){

        let layer = layui.layer;

    });

    $(function () {

        // 询问框 / 确认框

        $("#confirm-btn").click(function () {

            layer.confirm('您是如何看待前端开发？', {

                btn: ['重要','奇葩'] //按钮

            }, function(){

                layer.msg('的确很重要', {icon: 1}); // 消息框在3秒后关闭

            }, function(){

                layer.msg('也可以这样', {

                    time: 20000, //20s后自动关闭

                    btn: ['明白了', '知道了']

                });

            });

        });

    });

</script>

</body>

</html>

整个弹窗一类的案例演示都在这里：

https://layer.layui.com/

【LayDate】

下载LayDate组件：

https://www.layui.com/laydate/

使用组件：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="./../Resource/laydate/laydate.js"></script> <!-- 改成你的路径 -->

</head>

<body>

<input type="text" id="input-date">

<script>

    //执行一个laydate实例

    laydate.render({

        elem: '#input-date' //指定元素

    });

</script>

</body>

</html>

甚至不需要声明模块直接导包使用：

日期与时间的样式也非常多：

https://www.layui.com/laydate/

【Layui资源文件引用】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="./../Resource/layui-v2.5.6/layui/css/layui.css">

    <script type="text/javascript" src="./../Resource/layui-v2.5.6/layui/layui.js"></script>

</head>

<body>

</body>

</html>

我们需要声明使用的模块：

例如开头使用的这个：

layui.use('layer', function(){

    let layer = layui.layer;

});

Layui提供了这些模块：

 弹出层 layer

 日期与时间选择 laydate

 即时通讯 layim

 分页 laypage

 模板引擎 laytpl

 数据表格  table

 表单 form

 文件上传 upload

 穿梭框 transfer

 树形组件 tree

 颜色选择器 colorpicker

 常用元素操作 element

 滑块 slider

 评分 rate

 轮播 carousel

 流加载 flow

 工具集 util

 代码修饰器 code

常用的模块有这些【对后端来说。。。】

弹出层 layer

分页 laypage

数据表格  table

表单 form

文件上传 upload

树形组件 tree

日期与时间选择 laydate

声明的模块变量一一对应

例如我需要使用这些模块：就都写好一样的标识：

    layui.use(['layer', 'form', 'table'], function () {

        let layer = layui.layer;

        let form = layui.form;

        let table = layui.table;

    });

【Layui】01 快速入门的更多相关文章

  1. MyBatis 学习总结 01 快速入门

    本文测试源码下载地址: http://onl5wa4sd.bkt.clouddn.com/MyBatis0918.rar 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级 ...

  2. 01快速入门-04-Map、Set和iterable（ES6）

    1.Map 我们知道,在JS中其实对象的方式就跟Java中的Map极为相似,即键值对的方式.JS中,key必须是字符串,实际上Number等值作为key也是合理的,所以为了解决这个问题,在最新的ES6 ...

  3. [Android应用开发] 01.快速入门

    前言 这一篇,主要是把之前[安卓基础]系列的东西,做一个总结和补充.并举了两个例子:电话拨号器.短信发送器做巩固,在此也参考了黑马训练营的教学大纲. Android项目的目录结构 Activity:应 ...

  4. AngularJS快速入门指南01：导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  5. Nginx快速入门菜鸟笔记

    Nginx快速入门-菜鸟笔记   1.编译安装nginx 编译安装nginx 必须先安装pcre库. (1)uname -a 确定环境 Linux localhost.localdomain 2.6. ...

  6. AngularJS快速入门指南02：介绍

    AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HT ...

  7. Yacc 与 Lex 快速入门

    Yacc 与 Lex 快速入门 Lex 与 Yacc 介绍 Lex 和 Yacc 是 UNIX 两个非常重要的.功能强大的工具.事实上,如果你熟练掌握 Lex 和 Yacc 的话,它们的强大功能使创建 ...

  8. SpringMvc_快速入门,深入分析

    目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...

  9. Spring MVC 教程,快速入门,深入分析

    http://elf8848.iteye.com/blog/875830/ Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: ...

  10. Spring_MVC_教程_快速入门_深入分析

    Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

随机推荐

  1. MySQL入门到精通（十）：SQL优化第一篇（2021最新发布）

    SQL优化 1. 对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,创建表时N ...

  2. System.lineSeparator()行分隔符的用法

    System.lineSeparator()具体含义 从JDK的源码中,可以看出:它是从JDK1.7之后开始有的这个方法. 在UNIX系统下,System.lineSeparator()方法返回&qu ...

  3. Ubuntu Server LTS 修改网卡ip地址、固定IP

    Ubuntu Server LTS 修改网卡ip地址方式.固定IP. 18.04 之前版本通过修改/etc/network/interfaces 方式,18.04 版本开始通过netplan 方式: ...

  4. 打开TLS 1.1和1.2而不影响其他协议

    打开TLS 1.1和1.2而不影响其他协议 System.Net.ServicePointManager.SecurityProtocol |= SecurityProtocolType.Tls11 ...

  5. 简单易懂的JSON框架

      分享一个由本人编写的JSON框架.   JSON反序列化使用递归方式来解析JSON字符串,不使用任何第三方JAR包,只使用JAVA的反射来创建对象(必须要有无参构造器),赋值,编写反射缓存来提升性 ...

  6. OOM异常的4种可能分析及常见的OOM异常演示

    OOM异常的4种可能分析及常见的OOM异常演示 OOM异常: OutOfMemoryError 1.JAVA堆溢出JAVA堆用于存储对象实例,只要不断的创建对象,并且保证GC Roots到这些对象之间 ...

  7. docker 报Failed to create thread: Operation not permitted (1) 解决方法

    docker启动容器时报:Failed to create thread: Operation not permitted (1) 原因:docker内的用户权限受限 解决办法1: 启动docker时 ...

  8. 推荐一个vs Nuget部署插件

    写在前面 nuget部署工具, 无论是直接用web上传还是用命令行工具上传,还是其他第三方工具我都没找到满意,直到那天在群里提了一下,有位大佬说了个NuPackvs插件,用了下,感觉基本满足了我的需求 ...

  9. 使用Microsoft.SemanticKernel基于本地运行的Ollama大语言模型实现Agent调用函数

    大语言模型的发展日新月异,记得在去年这个时候,函数调用还是gpt-4的专属.到今年本地运行的大模型无论是推理能力还是文本的输出质量都已经非常接近gpt-4了.而在去年gpt-4尚未发布函数调用时,智能 ...

  10. 2019徐州区域赛 ACEFM 题解 & pollard-rho & miller-rabin & 求出每个子树的重心 板子

    A. Cat 题目大意:你需要在 [L , R] 选取连续的一段,使得这一段的异或和小于给定的数 S. 请求出最长的长度. 做法:我们可以发现 \[(2k) \oplus (2k+1) = 1, (2 ...