1.jquery遍历数组2.layui框架的理解

news2024/11/25 11:33:58

1.jquery遍历数组

2.layui框架的理解

layui.use(["form", "laydate"], 是使用 layui 框架中的模块加载方法 use 来加载并使用 form 和 laydate 这两个模块。

在 layui 框架中,可以使用 use 方法来加载所需的模块,然后使用这些模块提供的功能。

以下是一个示例,展示如何使用 use 方法加载 form 和 laydate 模块:

layui.use(["form", "laydate"], function() {
  var form = layui.form; // 加载并使用 form 模块
  var laydate = layui.laydate; // 加载并使用 laydate 模块
  
  // 在这里可以使用 form 和 laydate 提供的功能
});

在上述示例中,layui.use(["form", "laydate"], 将加载并使用 form 和 laydate 这两个模块。在回调函数中,你可以通过 layui.form 和 layui.laydate 来访问和使用这两个模块提供的功能。

你可以根据自己的需求,在回调函数中编写相应的代码,使用 form 和 laydate 模块提供的方法和功能。例如,可以使用 form.render() 来渲染表单元素,使用 laydate.render() 来创建日期选择器。

需要注意的是,要使用 layui 框架,你需要先在页面中引入 layui 的资源文件,例如 layui.js 或 layui.css。同时,请确保 layui.use 方法被调用之前,已经加载了对应的 layui 资源文件。

1.layui怎样使用各自对应的api方法,首先是初始化,代码如下:

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

var form = layui.form;

var layer = layui.layer;

var laydate = layui.laydate;

form.render();

});

['form','laydate','layer']表示声明需要获取那些对应插件,在下面并对应的初始化对象即可,如(var form = layui.form  表示获取form插件);

form.render();表示渲染layui样式form表单,如果有用到layui的select、radio标签,那么这个方法必须执行,不然select、radio的样式无法渲染出来;

如何获取layui的select选中的值,方法如下:

form.on('select(enditionSelect)', function(data){

console.log(data.value); //得到被选中的值]

$("#endition").val(data.value);

//console.log(data.othis); //得到美化后的DOM对象

});

上面的代码表示给指定的select添加点击事件,并且获取选中值,赋值给对应的input元素;

2.如何使用加载等待(loading)插件,这个需要使用layer插件,使用方法如下:

var loadingId = layer.load(2, {time: 30000});

这里表示加载等待框,使用样式为2,30秒后自动关闭loading插件;

代码手动关闭loading方法如下:

layer.close(loadingId );这个表示根据具体的loading对象来关闭;

layer.closeAll("loading");这个表示关闭所有的loading插件;

3.日期控件,elem是指定对应的Input框,format定义显示的日期格式;

var laydate = layui.laydate;

//执行一个laydate实例

laydate.render({

elem: '#startTime', //指定元素

format: 'yyyy-MM-dd'

});

3.分页插件

//单独引用layui的分页插件

var laypage = layui.laypage;

laypage.render({

elem: 'page',

count: page.count,

limit:page.pageSize,

curr:page.pageNo,

limits:[10,20,50],

layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],

jump: function(obj,first){

if(!first){

pageInfo(obj.curr,obj.limit);

}

}

});

jump表示分页插件上任何点击事件,first表示是否第一页查询,所以需要做(!first)判断;

4.layer.open使用(弹出层)

基本信息弹出层使用,type=0;yes:function(){}是弹出层上的默认“是”按钮的时间函数;

var openIndex = layer.open({

type:0,

content:returnMsg.resMsg,

yes:function(){

layer.close(openIndex);

if(returnMsg.resCode=="000000"){

window.location.reload();

}

}

});

自定义弹出层上面按钮的内容,以及添加对应的事件函数;

layer.open({

content: 'test'

,btn: ['按钮一', '按钮二', '按钮三']

,yes: function(index, layero){

//按钮【按钮一】的回调

}

,btn2: function(index, layero){

//按钮【按钮二】的回调

//return false 开启该代码可禁止点击该按钮关闭

}

,btn3: function(index, layero){

//按钮【按钮三】的回调

//return false 开启该代码可禁止点击该按钮关闭

}

,cancel: function(){

//右上角关闭回调

//return false 开启该代码可禁止点击该按钮关闭

}

});

layer.open引用对应的dom元素节点;type=1;#interfaceAdd是对应dom的div的id信息;

var layer = layui.layer;

layer.open({

type:1,

title:"新增同步应用接口信息",

shade: 0,//如果你不想显示遮罩,可以shade: 0

area: '600px',

content:$("#interfaceAdd")

});
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/794698.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[CrackMe]Chafe.1.exe的逆向及注册机编写

上手先试一下, 发现其没有对话框, 只有字符串, 搜索"Your serial is not valid"字符串 \ 上来就直接发现关键跳转, 难道这题这么简单吗? 仔细一看实际上远远要复杂 往上一翻发现没有生成serial key的代码, 而是看到了一个SetTimer, 时间间隔设置成了1ms, 之前输入…

访问:http://localhost:8070/actuator/bus-refresh 问题

1、请求发送不出去 原因: 自己 config-server端 application.yml 配置的端口号是8888,访问server修改为配置的端口号 2、请求报错405 几个解决办法: 1、版本问题变为busrefresh 2、bus-refresh加单引号或双引号尝试 3、加配置尝试&#xff1a…

嵌入式_GD32看门狗配置

嵌入式_GD32独立看门狗配置与注意事项 文章目录 嵌入式_GD32独立看门狗配置与注意事项前言一、什么是独立看门狗定时器(FWDGT)二、独立看门狗定时器原理三、独立看门狗定时器配置过程与注意事项总结 前言 使用GD3单片机时,为了提供了更高的安…

服务器数据恢复-Windows服务器RAID5数据恢复案例

服务器数据恢复环境: 一台服务器挂载三台IBM某型号存储设备,共64块SAS硬盘,组建RAID5磁盘阵列; 服务器操作系统:Windows Server;文件系统:NTFS。 服务器故障: 一台存储中的一块硬盘离…

STM32 串口学习(二)

要用跳线帽将PA9与RXD相连,PA10与TXD相连。 软件设计 void uart_init(u32 baud) {//UART 初始化设置UART1_Handler.InstanceUSART1; //USART1UART1_Handler.Init.BaudRatebound; //波特率UART1_Handler.Init.WordLengthUART_WORDLENGTH_8B; //字长为 8 位数据格式U…

Java语言跨平台执行的核心JVM

本文重点 在前面的课程中,我们介绍了java中的三层JDK->JRE->JVM,其中JVM称为Java的虚拟机,只是用来执行的,JRE是运行环境,要想在操作系统中运行,除了JVM还需要类库,JDK=JRE+开发的包和工具。本文就将介绍一下JVM究竟为何物? JVM 有的人会认为JVM是java中的东西…

29.双击喜欢

双击喜欢 html部分 <h3>双击喜欢这个图 <i style"color: red;" class"iconfont icon-xin"></i></h3> <small>你喜欢了 <span class"count">0</span> 次</small> <div class"area&quo…

【iOS】Cocoapods的安装以及使用

文章目录 前言一、Cocoapods的作用二、安装Cocoapods三、使用Cocoapods总结 前言 最近笔者在仿写天气预报App时用到了api调用数据&#xff0c;一般的基本数据类型我们用Xcode中自带的框架就可以转换得到。但是在和风天气api中的图标的格式为svg格式。 似乎iOS13之后Xcode中可…

Baumer工业相机堡盟工业相机如何通过BGAPI SDK获取相机当前实时帧率(C++)

Baumer工业相机堡盟工业相机如何通过BGAPISDK里函数来计算相机的实时帧率&#xff08;C&#xff09; Baumer工业相机Baumer工业相机的帧率的技术背景Baumer工业相机的帧率获取方式CameraExplorer如何查看相机帧率信息在BGAPI SDK里通过函数获取相机帧率 Baumer工业相机通过BGAP…

去除重复字母(力扣)贪心 + 队列 JAVA

给你一个字符串 s &#xff0c;请你去除字符串中重复的字母&#xff0c;使得每个字母只出现一次。需保证 返回结果的字典序最小&#xff08;要求不能打乱其他字符的相对位置&#xff09;。 示例 1&#xff1a; 输入&#xff1a;s “bcabc” 输出&#xff1a;“abc” 示例 2&am…

【亲测可用】Linux上安装Redis教程

一、下载并解压Redis 1、执行下面的命令下载redis&#xff1a; wget https://download.redis.io/releases/redis-6.2.6.tar.gz 2、解压redis&#xff1a; tar xzf redis-6.2.6.tar.gz 3、移动redis目录&#xff0c;一般都会将redis目录放置到 /usr/local/redis目录&#xff1a…

如何利用设备数字化平台推动精益制造?

人工智能驱动技术的不断发展&#xff0c;尤其是基于机器学习的预测分析工具的使用&#xff0c;为制造业带来了全新的效率和价值水平。一直以来&#xff0c;精益生产&#xff08;也叫精益制造&#xff09;在制造业中扮演着重要角色&#xff0c;而现在通过与工业 4.0的融合&#…

rpc通信原理浅析

rpc通信原理浅析 rpc(remote procedure call)&#xff0c;即远程过程调用&#xff0c;广泛用于分布式或是异构环境下的通信&#xff0c;数据格式一般采取protobuf。 protobuf&#xff08;protocol buffer&#xff09;是google 的一种数据交换的格式&#xff0c;它独立于平台语…

pytest---环境切换(base-url)

前言 前面小编介绍了如何通过pytest的插件来实现自动化测试的环境的切换&#xff0c;当时使用的方法是通过钩子函数进行获取命令行参数值&#xff0c;然后通过提前配置好的参数进行切换测试环境地址&#xff0c;今天小编再次介绍一种方法&#xff0c;通过pytest的插件&#xff…

three.js入门二:相机的zoom参数

环境&#xff1a; threejs&#xff1a;129 &#xff08;在浏览器的控制台下输入&#xff1a; window.__THREE__即可查看版本&#xff09;vscodewindowedge 透视相机或正交相机都有一个zoom参数&#xff0c;它可以用来将相机排到的内容在canvas上缩放显示。 注意&#xff1a;…

二、SQL-5.DQL-9).执行顺序

一、案例&#xff1a; 查询年龄大于15的员工的姓名、年龄&#xff0c;并根据年龄进行升序排序 select name, age from emp where age > 15 order by age asc; 先执行①from&#xff08;定义emp的别名为e&#xff09;&#xff0c;再执行②where&#xff08;调用别名e&…

基于Spring包扫描工具和MybatisPlus逆向工程组件的数据表自动同步机制

公司产品产出的项目较多。同步数据库表结构工作很麻烦。一个alter语句要跑到N个客户机上执行脚本。超级费时麻烦。介于此&#xff0c;原有方案是把增量脚本放到一resource包下&#xff0c;项目启动时执行逐行执行一次。但由于模块开发人员较多&#xff0c;总有那么一两个机灵鬼…

大数据课程D2——hadoop的概述

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 了解hadoop的定义和特点&#xff1b; ⚪ 掌握hadoop的基础结构&#xff1b; ⚪ 掌握hadoop的常见命令&#xff1b; ⚪ 了解hadoop的执行流程&#xff1b; 一、简介 1…

ElasticSearch Window Linux部署

文章目录 一、Window 集群部署二、Linux 单节点部署三、Linux 集群部署 一、Window 集群部署 创建 elasticsearch-cluster 文件夹&#xff0c;在内部复制三个elasticsearch服务 修改集群文件目录中每个节点的 config/elasticsearch.yml 配置文件 # -----------------------…

[Linux] 初识应用层协议: 序列化与反序列化、编码与解码、jsoncpp简单使用...

写在应用层之前 有关Linux网络, 之前的文章已经简单演示介绍了UDP、TCP套接字编程 相关文章: [Linux] 网络编程 - 初见UDP套接字编程: 网络编程部分相关概念、TCP、UDP协议基本特点、网络字节序、socket接口使用、简单的UDP网络及聊天室实现… [Linux] 网络编程 - 初见TCP套接…