Web、JS、JQ知识整理二
8.21
BOM浏览器对象模型
Browser Object Model，浏览器对象模型，讲浏览器相关对象
- window
是BOM的全局变量，window的属性也是全局属性，window的方法也是全局方法
window所有方法与属性均是全局，可直接调用
//document是windows对象上的一个属性
document.getElementById('box')
//等价 window.document.getElementById('box')
常见弹出窗口
alert() 警告框
是window对象上的一个方法，等价 window.alert(String类型的字符串)
<body>
<script src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
window.alert()
alert("这是一个警告框，点击")
</script>
</body>
confirm() 确认框
等价 window.confirm(String类型的字符串)，返回一个boolean值，确定true、取消false
prompt() 弹出输入框
弹出输入框prompt(提示信息，默认值)，返回一个string类型的值
第一个参数，提示信息；第二个参数是默认值；返回类型是字符串，返回内容：输入内容
存在两个参数，可以都不写或者顺序写一个
open() 自定义弹出框
自定义弹出框open(url,…)，返回一个window
第一个参数是弹出窗口的url、 第二个参数是弹出的目标，跟a标签的target一致
返回值是弹出页面的window对象，弹出窗口与本身的窗口具有父子关系
在弹出的页面中，使用window.opener访问父页面的内容
a标签的targe: _ self、_ blank、_ parent、_ top
window属性
innerHeight、innerWidth
浏览器的有效高宽（显示内容区的高宽）
console.log(document.write("height:" + window.innerHeight));
console.log(document.write("width:" + window.innerWidth));
location对象
url地址 href= protocol+//+hostname+:+port+pathname
//url地址. protocol//hostname:port/pathname
console.log("href: " + location.href)
// 主机名（域名）
console.log("hostname: " + location.hostname);
// 当前页面的路径和文件名
console.log("pathname: " + location.pathname);
// 端口名
console.log("port: " + location.port);
// 网络协议 http: https:
console.log("protocol: " + location.protocol);
location.href
location.href属性，用于获取和设置当前页的url
document.getElementById('gotoBaidu').addEventListener('click', ()=>{
// 在前端的js代码中跳转页面
location.href = 'http://www.baidu.com'
})
location.reload()
location.reload()函数，用于重新加载页面(F5)
history 浏览历史记录
history，专门用来存储历史记录信息的
必须存在后退或者前进的记录，不然会一直在这个页面上，不会前进或后退
forward()、back()
history.forward() ，前进一个页面
history.back() ，后退前一个页面
// 浏览历史记录
document.getElementById('b').addEventListener('click', ()=>{
history.back() //在历史页面中后退一步
})
document.getElementById('f').addEventListener('click',()=>{
history.forward() //在历史页面中前进一步
})
go(n)
n>0，前进几个页面
n<0，后退几个页面
// 浏览历史记录
document.getElementById('b').addEventListener('click', ()=>{
history.go(-3) //在历史页面中后退三步
})
document.getElementById('f').addEventListener('click',()=>{
history.forward(5) //在历史页面中前进五步
})
localStorage 浏览器本地存储器
localStorage.setItem(键,值)， 存入信息
localStorage.getItem(键)， 读取信息，无论何时均可取
localStorage.removeItem(键) ，删除指定信息
localStorage.clear()， 清除localStorage中所有信息
localStorage.setItem("name", "hqyj") //保存信息
console.log(localStorage.getItem("name")); //读取信息
localStorage.removeItem("name") //删除信息
localStorage.clear() //清除localStorage的所有信息
定时器
setInterval()、setTimeout()、clearInterval()
setInterval(方法，时间) 定时器函数，单位毫秒，每一段时间钟执行一次定时器中的方法
setInterval()，第一个参数是要执行的方法，第二个参数是定时时间，单位毫秒
setInterval(function(){},500) 等价 setInterval(()=>{},500)，返回一个定时器对象 clearInterval(定时器对象) 参数是定时器的返回值
setInterval(“alert(‘welcome’)”,1000) ; ——每隔一秒钟弹出一个对话框
clearInterval(定时器对象)，清理定时器对象，参数是定时器的返回值
setTimeout(方法，时间) ，单位毫秒，全局函数，达到指定延迟的时间后只执行一次回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打地鼠</title>
<style type="text/css">
#main{
width: 530px;
height: 430px;
margin: 100px auto;
border: 1px solid black;
}
#main>div{
width: 100px;
height: 100px;
background-color: #f5f5f5;
float:left;
margin-top: 5px;
margin-left:5px;
}
.imgbox{
background-image: url('./img/animal2.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.btn{
width: 140px;
height: 60px;
margin: auto;
}
.btn button{
font-size: 30px;
border: none;
background-color: none;
}
</style>
</head>
<body>
<div id="main">
</div>
<div class="btn">
<button id='mybtn'>开始游戏</button>
</div>
</body>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
let i=20
let total=0;
while(i-->0){$('#main').append("<div></div>")}
$('.btn #mybtn').click(()=>{
//让开始按钮失效 按钮添加属性disabled
console.log('sadfs')
$('#mybtn').attr('disabled','true')
//$('#mybtn').off('click');
// $(this).off('click')
//间隔器
let b=setInterval(()=>{
//先清除所有带有div背景的样式
$('#main>div').removeClass('imgbox')
//随机一个添加带背景的样式
let index=Math.floor(Math.random()*($('#main>div').length))
$('#main>div:eq('+index+')').addClass('imgbox')
// 随机生成多次添加，其可以张图片
// let index1=Math.floor(Math.random()*($('#main>div').length))
// $('#main>div:eq('+index1+')').addClass('imgbox')
},1000)
//指定时间清除定时器
setTimeout(function(){
$('#main>div').removeClass('imgbox')
clearInterval(b)
$('.btn button').removeAttr('disabled')
alert('您已共打中'+total+'次')
},10000)
})
//addClass()、removeClass()、hasClass()
$('#main>div').click(function(){
///判断当前点击是否存在某种样式，有即加一份
if($(this).hasClass("imgbox")){
$(this).removeClass('imgbox')
total++;
}
})
</script>
</html>
setInterval()与setTimeout()区别
setTimeout()，是一个全局函数。在浏览器的window对象和Node.js中都可以直接使用，它的作用是在指定的延迟后执行一次回调函数
setInterval()，也是一个全局函数。同样在浏览器的window对象和Node.js中都可以直接使用，它的作用是每隔指定的时间间隔就执行一次回调函数，直到使用clearInterval函数取消
执行次数不同
setTimeout的本质是延迟执行，只执行一次，一般用于延迟指定的时间后执行一次回调函数；
setInterval的本质是定时执行，会不断重复执行，直到取消
执行频率不同
setTimeout是在指定的延迟后执行回调函数，只执行一次
setInterval则是每隔指定的时间间隔就执行一次回调函数，直到取消
实际应用不同
setTimeout一般用于需要延迟执行的场合，例如动画效果的延迟、按钮的防抖等setInterval一般用于需要定时执行的场合，例如轮播图的切换、时钟的更新等
数组[] 的方法
push(元素)，往数组末尾存入一个元素
join(指定字符)，数组元素用指定字符拼接为一个字符串,返回一个string类型字符串
<script type="text/javascript">
//数组的方法，js数组无长度限制、数组长度不固定
// push() 往数组中存入一个元素
let arr=[]
// arr[0]='JAVA'
// arr[1]='HTML'
arr.push('JAVA')
arr.push('HTML')
arr.push('JavaScrpit')
for(let i=0;i<arr.length;i++){
console.log(arr[i])
}
//join() 数组元素用指定字符拼接为一个字符串,返回一个string类型字符串
console.log(arr.join(','))
</script>
arr.forEach((arg1,arg2,arg3)=>{})方法的参数是一个函数，这个函数有三个参数：
第一个参数arg1：当前循环的数组元素；
第二个元素arg2：当前循环的数组元素下标；
第三个元素arg3：整个数组对象
循环处理的代码，写在箭头函数中
<script type="text/javascript">
let arr=[]
arr.push('Java')
arr.push('Html')
arr.push('JavaScript')
arr.push('jQuery')
arr.push('Vue')
//callbackfn回调函数、函数式接口
//arr.forEach((arg1,arg2,arg3)=>{})
//forEach方法的参数是一个函数，其中函数有三个参数
//第一个参数arg1：当前循环的数组元素；第二个元素arg2：当前循环的数组元素下标；
//第三个元素arg3：整个数组对象
//循环处理的代码，写在箭头函数中
arr.forEach((i)=>{
console.log(i)
})
</script>
字符串方法
| 符号 | 功能 | 符号 | 功能 |
|---|---|---|---|
| 变量1==变量2 | 判断值是否相等，忽略类型 | 变量1===变量2 | 全等，判断类型和值是否都相等 |
| 变量.length | int类型无length属性、String类型变量的长度 | 变量.charAt(i) | 返回指定位置的字符，下标从0开始,越界返回空 |
| 变量.indexOf(指定的字符串) | 返回指定的字符串在另一个字符串中第一次出现的位置 若不存在该指定字符串，则返回-1 | 变量.lastIndexOf(指定的字符串) | 返回指定的字符串在另一个字符串中最后一次出现的位置 若不存在该指定字符串，则返回-1 |
| 变量.replace(指定字符串，新字符串) | 替换第一个匹配的字符串，返回一个新的字符串 | 变量.replaceAll(指定字符串，新字符串) | 替换所有匹配的字符串，返回一个新的字符串 |
| 变量.slice(下标1，下标2) | 截取一端字符串，范围：左闭右开 | 变量.split(‘指定字符’) | 按指定字符将一个字符串拆分为数组 指定的字符串可以有多个字母、空字符、一个字符 |
| 变量.trim() | 去空格,去除左右空格 | 变量.toLowerCase()转小写 变量.toUpperCase()转大写 | 大小写转换 |
| parseInt(数字字符串) | 字符串转整数 只要是数字开头的字符串都可以转整数，后面的非数字的字符可忽略 | isNaN() | 判断是否,不是一个数字； true，不是数字；false，是数字 |
| parseFloat(小数字符串) | 字符串转小数，与parseInt类似 | 变量.toFixed(保留位数) | 小数取为位数，存在四舍五入 |
| 正则表达式 | ^首、$尾、+ 一个或多个、*零个或多个 |
与=
let s1='123'
let s2=123 //int类型无length属性
//==判断值是否相等
console.log(s1==s2)//true
//=== 全等，判断类型和值是否都相等
console.log(s1===s2)//false
length属性与变量.charAt(i)
let s1='123'
let s2=123 //int类型无length属性
//length属性
//int类型无length属性
console.log(s2.length)//undefined
//String类型的变量才有lenght属性
console.log(s1.length) //3
let s3='123abc456abc'
//变量.charAt(i),返回指定位置的字符，下标从0开始,越界返回空
console.log(s3.charAt(3))//a
变量.indexOf(指定的字符串)与变量.lastIndexOf(指定的字符串)
let s3='123abc456abc'
//变量.indexOf(指定的字符串)，返回指定的字符串在另一个字符串中第一次出现的位置
//若不存在该指定字符串，则返回-1
console.log(s3.indexOf('abc'))//3
//变量.lastIndexOf(指定的字符串)，返回指定的字符串在另一个字符串中最后一次出现的位置
//若不存在该指定字符串，则返回-1
console.log(s3.lastIndexOf('abc'))//9
变量.replace(指定字符串，新字符串)与变量.replaceAll(指定字符串，新字符串)
let s3='123abc456abc'
//变量.replace(指定字符串，新字符串)，替换第一个匹配的字符串，返回一个新的字符串
console.log(s3.replace('abc','xxx'));//123xxx456abc
//变量.replaceAll(指定字符串，新字符串)，替换所有匹配的字符串，返回一个新的字符串
console.log(s3.replaceAll('abc','xxx'));//123xxx456xxx
变量.slice(下标1，下标2)与变量.split(‘指定字符’)
let s3='123abc456abc'
//变量.slice(下标1，下标2)，截取一端字符串，范围：左闭右开
console.log(s3.slice(3,6));//abc
let s4='Java,Html,JavaScript'
//变量.split('指定字符')，按指定字符将一个字符串拆分为数组
//指定的字符串可以有多个字母、空字符、一个字符
let arr=s4.split(',')
console.log(arr);//['Java', 'Html', 'JavaScript']
//把字符拆分为字母数组
console.log(arr[0].split(''));// ['J', 'a', 'v', 'a']
变量.trim()
// 变量.trim() 去空格,去除左右空格
let s5=' abc dfs '
console.log(s5.trim()) //abc dfs
变量.toLowerCase()与变量.toUpperCase()
let s4='Java,Html,JavaScript'
//大小写转换 变量.toLowerCase()转小写、变量.toUpperCase()转大写
console.log(s4.toLowerCase())//java,html,javascript
console.log(s4.toUpperCase())//JAVA,HTML,JAVASCRIPT
parseInt(数字字符串)、parseFloat(小数字符串)、变量.toFixed(保留位数)
//parseInt(数字字符串)字符串转整数
//只要是数字开头的字符串都可以转整数，后面的非数字的字符可忽略
//若字符串不是字符串开头，返回NAN
//isNaN()判断是否,不是一个数字
console.log(parseInt('123'))//123
console.log(parseInt('abc123'))//NaN 不是一个数字 isNaN()判断是否是不是一个数字
console.log(parseInt('123abc'))//123 数字开头，后续字母忽略不计
//parseFloat(小数字符串),特效与parseInt类似
console.log(parseFloat('3.14'))//3.14
console.log(parseFloat('3.14afs'))//3.14
console.log(parseFloat('b3.14'))//NAN
//小数取为位数
//变量.toFixed(保留位数)，存在四舍五入
let f=8.88*4.77//42.3576
console.log(f.toFixed(2))//42.36
正则表达
//正则表达式
//^首，$尾
let p=/^[0-9]+$/
//+ 一个多个数字，必须以数字开头与以数字结尾
console.log(p.test('1235'))//true
console.log(p.test('123h'))//false
8.22
事件
组件显示与隐藏效果
| 对象.hide()、对象.show()、对象.toggle() | 对象隐藏、显示 |
| 对象.fadeOut(time)、对象.fadeIn(time)、对象.fadeToggle() | 对象淡出、淡入 |
| 对象.slideUp()、对象.slideDown()、对象.slideToggle() | 对象上滑、下滑 |
| 对象.animate(style中的样式) | 自定义动画 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<input type="button" value="隐藏/显示" id='btn1'>
<input type="button" value="淡出/淡入" id='btn2'>
<input type="button" value="上滑/下滑" id='btn3'>
<input type="button" value="自定义动画" id='btn4'>
<div class="box1">
</div>
<script src="./js/jquery-1.12.4.min.js"></script>
<!-- 提供动画效果，即随着时间推移图像变化 -->
<script type="text/javascript">
// 通过按钮绑定事件，隐藏与显示div
let isShow=true;
$('#btn1').click(()=>{
//对象.hide() 隐藏标签即display:none
//对象.show() 显示标签即display:block
// if(isShow){
// $('.box1').hide()
// isShow=false
// }
// else{
// $('.box1').show()
// isShow=true
// }
//对象.toggle()，对象在显示与隐藏中来回切换
$('.box1').toggle()
})
//对象淡入、淡出
$('#btn2').click(()=>{
//对象.fadeOut(time) 隐藏标签,慢慢淡出;可自定义时间，单位毫秒
//对象.fadeIn(time) 显示标签,慢慢淡入;可自定义时间，单位毫秒
// $('.box1').fadeOut(5000)
// $('.box1').fadeIn()
//对象.fadeToggle()，对象在显示与隐藏中来回切换，淡入、淡出
$('.box1').fadeToggle()
})
//下滑、上滑
$('#btn3').click(()=>{
//$('.box1').slideUp()//上滑收起
//$('.box1').slideDown()//下滑展开
$('.box1').slideToggle()//两种状态切换
})
//自定义动画
$('#btn4').click(()=>{
//对象.animate({设置块})
$('.box1').animate({
width:'200px',
height:'200px',
left:'200px',
top:'0px',
})
})
</script>
</body>
</html>
JQuery
选择器
过滤选择器
-
$(“div.test”) 获取所有具有class属性且值为test的div
-
:eq() 指定索引的节点
-
:lt() 小于指定索引的节点
-
:gt() 大于指定索引的节点
-
:selected 获取被选中的节点 (下拉菜单)
-
:checked 获取被选中的节点（单选、复选）
-
input[name=xxx] 获取带有name属性且值为xxx的input标签
节点操作
JS的方式获取的节点称为DOM对象，Jquery的方式获取的节点称为Jquery对象
DOM对象操作的方式和Jquery对象操作的方式不同
改变节点的样式、内容、属性
| 功能 | 功能 | ||
|---|---|---|---|
| 对象.text()、对象.html() | 获取和修改文本、HTML | 对象.val() | 获取和修改value值 |
| 对象.css() | 获取和设置样式 | 对象.attr()、对象.prop() | 获取和设置属性 |
| 对象.addClass(string类型) 对象.removeClass(string类型) | 添加与删除className |
获取和修改文本
- 对象.text()，读取或修改文本(innerText)
读取文本：对象.text()
修改文本[覆盖]：对象.text(string类型的文本内容)； [将之前的覆盖]
修改文本[追加]：对象.text(对象.text()+string类型的文本内容)；
[先将之前的文本内容读取，再与新添加进行拼接，而后修改]
-
对象.html()，读取或修改HTML(innerHTML)
读取HTML标签：对象.html()
修改HTML标签[覆盖]：对象.html(string类型的标签文本内容)； [将之前的覆盖]
修改HTML标签[追加]：对象.html(对象.html()+string类型的标签文本内容)；
[先将之前的HTML标签内容读取，再与新添加的进行拼接，而后修改]
$('.box1').text($('.box1').text()+txt)//追加，先读再存
$('.box1').html('<a href="http://www.baidu.com" target="_blank">百度</a>')
获取和修改value值
-
对象.val()，读取或修改表单标签的value
读取表单标签：对象.val()
修改表单标签：对象.val(string类型的修改值)
$('#txt1').val()
获取和设置样式
-
对象.css()，读取或修改标签样式(style.xxx)
读取标签的样式：对象.css(‘样式名’)
修改标签的样式：对象.css(‘样式名’，‘修改值’)
样式名与css相同
$('.box1').css('border-color','blue')
获取和设置属性
-
对象.attr()，读取或修改标签的属性
读取标签的属性：对象.attr(‘属性名’)
修改标签的属性：对象.attr(‘属性名’，‘修改值’)
-
对象.prop()，修改标签的属性
-
对象.removeAttr() 删除属性
$('#img1').attr('src','./img/girl.jpg')
添加与删除className
- 对象.addClass(string类型)，给标签添加class(className)
- 对象.removeClass(string类型)，删除标签的class
- 对象.toggleClass(string类型)，对c某个class的添加、删除之间切换
$('.box1').addClass('active')//给标签新增一个class
$('.box1').removeClass('active')
$('.box1').toggleClass('active')
DOM对象与Jquery对象之间互转
DOM对象转换为Jquery对象：$(DOM对象)
Jquery对象转换为DOM对象：Jquery对象[0]/Jquery对象.get(0)
var div = document.getElementById("myDiv");
var $div = $("#myDiv");
//DOM => Jquery
div.innerText="xxx";//正确
$(div);//这样就会将DOM对象转换为jquery对象
$(div).innerText="xxx";//错误
//Jquery => DOM
$div.innerText="xxx";//错误
$div.get(0);//这样就会将jquery对象转换为DOM对象
$div.get(0).innerText="xxx";//正确
$(document).ready(()=>{ 代码块 })事件、页面加载完成、页面初始化事件
添加节点[增加标签]
- 添加哥哥节点
- 原节点.before(新节点)
- 新节点.insertBefore(原节点)
- 添加弟弟节点
- 原节点.after(新节点)
- 新节点.insertAfter(原节点)
- 添加第一个子节点
- 父节点.prepend(子节点)
- 子节点.prependTo(父节点)
- 添加最后一个子节点
- 父节点.append(子节点)
- 子节点.appendTo(父节点)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>增加和删除标签</title>
<style type="text/css">
.box1{
width: 200px;
hight:200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="append/prepend" id='btn1'>
<input type="button" value="after/before" id='btn2'>
<input type="button" value="remove" id='btn3'>
<input type="button" value="empty" id='btn4'>
<div class="box1">
<p>第一个</p>
<p>第二个</p>
<p>第三个</p>
</div>
<script src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('#btn1').click(()=>{
//在子标签的末尾插入一个标签：对象.append(标签字符串、标签对象)
//在子标签的前面插入一个标签：对象.prepend(标签字符串、标签对象)
//时子标签的子标签
$('.box1').append('<p>append</p>')
$('.box1').prepend('<p>prepend</p>')
})
$('#btn2').click(()=>{
//选择器:eq(n),选择选择器下标为n的标签
//在子标签后面插入一个标签：对象.after(标签字符串、标签对象)
//在子标签前面插入一个标签：对象.before(标签字符串、标签对象)
//是子标签的兄弟标签
// $('.box1 p:first')
//$('.box1 p:last')
//选择p下标为1的标签
$('.box1 p:eq(1)').after('<span>after</span>')
$('.box1 p:eq(1)').before('<span>before</span>')
})
$('#btn3').click(()=>{
//选择器:eq(n),选择选择器下标为n的标签
//删除子标签(包括其子标签)：对象.remove()
// $('.box1 p:eq(2)') 选择p下标为2的标签
//$('.box1 p:last')
$('.box1 p:last').remove()
})
$('#btn4').click(()=>{
//清空子标签中所有的子标签：对象.empty()
$('.box1').empty()
})
</script>
</body>
</html>
删除节点[删除标签 ]
- remove()，删除当前标签(包括子标签)
- empty()，删除当前标签下的所有子标签，保留自身
遍历节点
- 获取同级节点
- 节点.sublings()
- 获取之前的所有节点
- 节点.prevAll()
- 获取之后的所有节点
- 节点.nextAll()
- 获取父节点
- 节点.parent()
- 获取子节点
- 节点.children()，所有子标签[只包含儿子]，参数还可以设置选择器
绑定事件
节点.事件函数(function(){});
- $(“div#md”).click(function(){});
- $(“div#md”).bind(“click”,function(){});
常用事件
-
click单击
-
mouseenter鼠标进入
-
mouseout鼠标离开
-
hover鼠标进入和离开
节点.hover(function(){鼠标进入时触发},function(){鼠标离开时触发}); -
focus聚焦
-
blur光标离开
-
change改变
表单绘制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#top,#bottom,#tbl1,#btn1,#tbl2{
margin: auto;
}
#top{
width: 300px;
height: 300px;
}
#bottom{
width: 600px;
height: 300px;
}
#tbl1,#tbl2{
border-collapse: collapse;
}
#tbl1{
margin-top:20px ;
}
#btn1{
display: block;
width: 130px;
height: 30px;
}
.put{
width: 200px;
height: 25px;
}
#tbl1 td{
width: 300px;
height: 30px;
}
#bottom{
/* overflow: scroll; */
overflow-y: auto;
}
#tbl2 td,#tbl2 th{
border: 1px solid black;
width: 120px;
height: 50px;
text-align: center;
line-height:50px ;
}
</style>
</head>
<body>
<div id="top">
<table id='tbl1' cellpadding="15">
<tr><td>姓名：<input type="text" name='name' class="put"></td></tr>
<tr><td>
籍贯： <select name="britharea" class="put">
<option value="">请选择</option>
<option value="重庆">重庆</option>
<option value="贵州">贵州</option>
<option value="云南">云南</option>
<option value="江西">江西</option>
</select>
</td></tr>
<tr><td>
性别：<input type="radio" name="sex" value='男'>男
<input type="radio" name="sex" value='女' checked >女
</td></tr>
<tr><td>
爱好： <input type="checkbox" name="hobby" value="唱歌">唱歌
<input type="checkbox" name="hobby" value="跳舞">跳舞
<input type="checkbox" name="hobby" value="打球" checked>打球
</td></tr>
</table>
<input type="button" value="新增" id="btn1">
</div>
<div id="bottom">
<table id="tbl2">
<tr>
<th>姓名</th>
<th>籍贯</th>
<th>性别</th>
<th>爱好</th>
<th>选择</th>
</tr>
</table>
</div>
<script src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
let exchang=false
let dataTr
//新增按钮，追加内容至表单
$('#btn1').click(()=>{
//获取数据
let name=$('input[name="name"]').val()
let britharea=$('select[name="britharea"]').val()
let sex=$('input[name="sex"]:checked').val()
let hobbys=$('input[name="hobby"]:checked').map((index,current)=>{
return $(current).val()
}).get().join(',')
//将数据追加至表单
if(exchang){
let childs=dataTr.children()
childs.eq(0).text(name)
childs.eq(1).text(britharea)
childs.eq(2).text(sex)
childs.eq(3).text(hobbys)
exchang=false
}
else{
// $('#tbl2').append('<tr>'+
// '<td>'+name+'</td>'+
// '<td>'+britharea+'</td>'+
// '<td>'+sex+'</td>'+
// '<td>'+hobbys+'</td>'+
// '<td>'+'<input type="button" value="修改">'+
// '<input type="button" value="删除">'+
// '</td>'+
// '</tr>'
// )
$('#tbl2').append(`<tr>
<td>${name}</td>
<td>${britharea}</td>
<td>${sex}</td>
<td>${hobbys}</td>
<td><input type="button" value="修改">
<input type="button" value="删除"></td></tr>`)
}
//添加完，清除表单数据，恢复至初始状态
$('input[name="name"]').val("")
$('select[name="britharea"]').val("")
$('input[value="女"]').prop('checked','checked')
$('input[name="hobby"]').each((index,current)=>{
$(current).removeProp('checked','checked')
})
$('input[value="打球"]').prop('checked','checked')
})
$(tbl2).click((e)=>{
let b=$(e.target).parent().parent()
//修改按钮，值返回表单
if(e.target.value=='修改'){
let childs=b.children()
let name=childs.eq(0).text()
let britharea=childs.eq(1).text()
let sex=childs.eq(2).text()
let hobbys=childs.eq(3).text().split(',')
$('#tbl1 input[name="name"]').val(name)
$('#tbl1 select[name="britharea"]').val(britharea)
$('#tbl1 input[value='+sex+']').prop('checked',true)
$('#tbl1 input[name="hobby"]').each((index,current)=>{
let c=$(current)
// c.removeProp('checked',true)
c.prop('checked',false)
for(let i=0;i<hobbys.length;i++){
if(hobbys[i]==c.val()){
c.prop('checked',true)
break
}
}
})
exchang=true
dataTr=b
}
//删除按钮，删除当前行
else if(e.target.value=='删除'){
if(confirm('确认删除当前行')){
b.remove()
}
}
})
</script>
</body>
</html>
8.23
JSON
- json，一种数据格式，广泛用于前后端数据交互
- json文件扩展名：.json
- 只能由以下符号组成：{} [] “” : ,
- 引号只能用双引号
- 字符串用引号，数字和boolean不加引号；属性也要用引号
- json文件中无注释
Json格式的字符串与Js对象之间的转换
JSON.stringify(js对象)，js对象转化为JSON格式的字符串
JSON.parse(JSON对象)，JSON格式的字符串转换为JS对象
AJAX异步请求
AJAX，异步JavaScript和XML；是一个抽象概念
用于向后台发送异步请求，后台返回数据，主要返回JSON数据[可以返回xml、text、html]
异步请求可实现局部刷新
同步执行：synchronized，按照一定顺序、排队执行；两个线程的执行存在一定先后顺序，具有线程安全
异步执行：同时执行，各做各的，具有线程不安全；两个线程可能会同时执行
JQuery的AJAX请求
发送请求：get、post、ajax()
$.ajax({
url:'',//请求的地址
data:{
a:'xx',
b:'yy'
},//请求时携带的参数
type:'post/get/delete/put',//请求方式
dataType:'json',//参数类型
success:function(res){
//success为请求成功后的回调函数
//res为请求后的结果
},
error:function(res){
//error为请求失败后的回调函数
//res为请求后的结果
}
})
遍历foreach、each、map
| 用法 | |
|---|---|
| foreach | 用于原生对象数组 |
| each | JQ对象数组 |
| map | 可以用于原生对象数组、也可以用于JQ对象数组，均存在返回值 |
foreach遍历
- 用于原生对象数组
- 第一个参数当前遍历到的元素
- 第二个参数当前遍历到的元素下标
- 第三个参数完整的数组
- 无返回值
each遍历
- 用于JQ对象数组
- 第一个参数是当前遍历到的元素下标
- 第二个参数当前遍历到的元素
- 第三个参数完整的数组
- 无返回值
map遍历
- 可以用于原生对象数组、也可以用于JQ对象数组，均存在返回值
- map在原生对象数组时
- 第一个参数当前遍历到的元素
- 第二个参数当前遍历到的元素下标
- 第三个参数完整的数组
- 返回一个原生数组
- map在JQ对象数组时
- 第一个参数是当前遍历到的元素下标
- 第二个参数当前遍历到的元素
- 第三个参数完整的数组
- 返回一个JQ数组，通过get()方法得到原生数组
8.24-8.25
Layui
Layui，面向全层次的前后端开发者，易上手开源免费的Web UI组件库；
安装与运行
layui文件放置位置
下载并解压框架包layui，放置项目根目录下
在页面html中引入css和Js文件
引入css文件：在head部分中，link标签，href属性里写layui.css文件的路径
引入js文件：在body部分里，script标签，scr属性里写layui.js文件的路径
在layui.use()方法的回调函数里写代码
在script标签下，写入layui.use([所需用的组件],function(){回调函数、写代码})
组件的使用
简单主件，不含js
直接复制到body中
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
复杂组件，含js
body块中，容器标签
script块中，layui.use([组块模块]，回调函数)，导入组块模块
script块中，组块.render({属性设置，其中elem属性值，指是哪个选择器})；写render，书写参数
绘制数据表格
主要两个步骤，第一，编写一定格式的json数据文件；第二，使用layui组件绘制数据表格并将json数据导入；
json数据格式的文件
json数据格式的文件，是一个对象，即用大括号括起来{}
必须存在的属性有，“code”、“msg”、“count”、“data”
“code”：属性值有0、1选项；为0，才能正常将json中数据获取
“msg”：属性值为string类型字符串，一般做提示语句，可为""
“count”:是数据的总行数，用于自动分页，一般默认10行为一页
“data”：是导入表格的数据，一般用[{},{}…]
json文件只允许，“” ， : {} [] 这五种符号存在，且属性必须也要用"“括起，其中只有数字不许要用”"括起，其它均需要
{
"code":0,
"msg":"",
"count":20,
"data":[
{
"bookId":"1001",
"bookName":"理想国",
"bookAuthor":"Rose",
"bookPrice":1123.45,
"bookDate":"2010-02-02",
"bookNum":520,
"typeId":1
},
{
"bookId":"1002",
"bookName":"格林童话",
"bookAuthor":"TH",
"bookPrice":2076,
"bookDate":"1990-03-01",
"bookNum":1000,
"typeId":2
},
{
"bookId":"1003",
"bookName":"活着",
"bookAuthor":"YH",
"bookPrice":3000,
"bookDate":"2014-07-01",
"bookNum":2000,
"typeId":3
}
]
}
使用layui组件绘制数据表格
以复杂组件(含js)的步骤进行
body块中，容器标签
这是一个table表格标签
<table class="layui-hide" id="test" lay-filter="test"></table>
script块中，layui.use([组块模块]，回调函数)，导入组块模块
在本网页中会用到table组块，因此需要先导入
<script>
// 一个组件可直接写；多个组件需要使用[]
layui.use('table', function() {
var table = layui.table
})
</script>
script块中，组块.render({属性设置，其中elem属性值，指是哪个选择器})；
elem属性：指向的是对应哪个标签的id选择器
其中table标签的id为test，因此id选择器为#test
url属性：指是需要导入的json数据文件位置
page属性：值为boolean类型；值为true，则开启分页设置，默认为false，关闭分页设置
cols属性：二维表[[{},{},{}…]]，即每个{}代表着一列，在{}中存在以下一些参数
-
field：设定字段名，表格数据列的唯一标识；是将JSON文件的每个属性对应至表格中哪列
当json某个属性的名字为A，则识别A属性的列的field属性为’A’
-
title：设定标题名称，在数据表格中该属性所展示的名字，自命名
-
width：设置单元格的宽
-
sort：boolean类型值，true为可对该列进行排序，默认false
其中排序只对当前已展示的数据进行排序，无法做到全部数据进行排序
其他属性值，可在官网进行了解，其他
<script>
// 一个组件可直接写；多个组件需要使用[]
layui.use(['table'], function() {
var table = layui.table
table.render({
elem: '#test',
// 第一个url告知在哪取数据
url: 'book.json',
//json文件格式
/*
"code":0, //是否返回异常，0正常、1异常
"msg":"", //提示信息
"count":1000, //数据总条数，自动分页
"data":放数据
*/
//page，开启分页设置；默认false，不分页；true，分页
page: true,
//全局定义常规单元格的最小宽度，layui 2.2.1 新增
cellMinWidth: 80,
//以上均是基础参数
//cols列 [[]]二维表，必须是此格式
//以下是cols表头参数
/*
field：设定字段名，表格数据列的唯一标识；是将JSON文件的每个属性对应至表格中哪列
title：设定标题名称
*/
cols: [
[
//对于比较长的列不设宽度
{
field: 'bookId',
width: 100,
title: '书号',
sort: true
},
{
field: 'bookName',
width: 100,
title: '书名'
},
{
field: 'bookAuthor',
width: 100,
title: '作者',
sort: true
},
{
field: 'bookPrice',
width: 100,
title: '价格'
},
{
field: 'bookDate',
title: '出版日期'
},
{
field: 'bookNum',
title: '数量',
width: 100,
sort: true
},
{
field: 'typeId',
title: '类型',
width: 100,
sort: true
},
]
],
/* 异步数据参数:
method：接口http请求类型，默认：get
url：接口地址，默认会自动传递两个参数：?page=1&limit=30(该参数可通过 request 自定义)
page 代表当前页码、limit 代表每页数据量
parseData:function(){return{自行设置对应关系}}
request: {
//该页码参数名与每页数据量参数名更改
pageName: 'curr' //页码的参数名称，默认：page
,limitName: 'nums' //每页数据量的参数名，默认：limit
}
*/
});
})
</script>
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script src="./layui/layui.js"></script>
<script>
// 一个组件可直接写；多个组件需要使用[]
layui.use(['table'], function() {
var table = layui.table
var $ = layui.jquery
table.render({
elem: '#test',
// 第一个url告知在哪取数据
url: 'book.json',
//json文件格式
/*
"code":0, //是否返回异常，0正常、1异常
"msg":"", //提示信息
"count":1000, //数据总条数，自动分页
"data":放数据
*/
//page，开启分页设置；默认false，不分页；true，分页
page: true,
//全局定义常规单元格的最小宽度，layui 2.2.1 新增
cellMinWidth: 80,
//以上均是基础参数
//cols列 [[]]二维表，必须是此格式
//以下是cols表头参数
/*
field：设定字段名，表格数据列的唯一标识；是将JSON文件的每个属性对应至表格中哪列
title：设定标题名称
*/
cols: [
[
//对于比较长的列不设宽度
{
field: 'bookId',
width: 100,
title: '书号',
sort: true
},
{
field: 'bookName',
width: 100,
title: '书名'
},
{
field: 'bookAuthor',
width: 100,
title: '作者',
sort: true
},
{
field: 'bookPrice',
width: 100,
title: '价格'
},
{
field: 'bookDate',
title: '出版日期'
},
{
field: 'bookNum',
title: '数量',
width: 100,
sort: true
},
{
field: 'typeId',
title: '类型',
width: 100,
sort: true
},
]
],
});
})
</script>
</body>
</html>
首页布局
网页主要布局框架，参考官方网页布局框架
点击菜单显示内容
- 内容区域用iframe. 每个功能页面可以是完整页面
- 内容区域用div，每个功能页面是页面的片段， 用ajax获取页面内容，填充到div
本次均采用方法一
显示内容区域，使用iframe标签，并为属性name命名
对于点击菜单的部分，采用a标签连接，并href属性，指向连接的下一个网页，属性target设置为iframe的name名
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">头部标题</div>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">图书管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">图书录入</a></dd>
<dd><a href="10-book.html" target="main">图书查询</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">会员管理</a>
</li>
<li class="layui-nav-item"><a href="javascript:;">借阅管理</a></li>
<li class="layui-nav-item"><a href="">系统管理</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<iframe src="" name='main' frameborder="1" width="100%" height="760px"></iframe>
</div>
</div>
</div>
增删改查页面
每行的工具按钮toolbar属性
在表头参数，增加一列， 设置toolbar属性，属性值为id选择器
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
<!-- 每行工具按钮 -->
<!-- 1、在cols表头参数属性中：增加一列，设置toolbar属性 ：值为对应的选择器对象
2.添加一段按钮标签
-->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
每行，复选框
{type: 'checkbox', fixed: 'left'},//添加复选框，便于多选几行
表格头部工具栏toolbar属性
基础参数添加toolbar属性，属性值为id选择器；defaultToolbar控制是否显示默认工具栏
toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
defaultToolbar:[] ,//头部工具栏默认工具按钮，控制是否显示默认工具栏;按需要显示['filter','print','exports']
<!-- 开启头部工具栏
1、在基本参数属性中加入toolbar属性:值为对应的选择器对象
2、添加一段按钮标签
-->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
<button class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
<button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
</div>
</script>
行工具按钮的事件
tool行工具按钮事件，test是table标签的lay-filter属性的值
其中回调函数中的返回的形参(obj)：
event属性：按钮的lay-event属性的值，用来判断点的是哪个按钮
data属性：是这行数据对象
//监听行工具事件, tool行工具按钮事件，test是table标签的lay-filter属性的值
table.on('tool(test)', function(obj){
//obj对象的data属性是这行数据对象；
// event属性是按钮的lay-event属性的值，用来判断点的是哪个按钮
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
} else if(obj.event === 'edit'){
}
});
表头工具栏事件
toolbar头部工具栏事件，test是table标签的lay-filter属性的值
其中回调函数中的返回的形参(obj)：
event属性：按钮的lay-event属性的值，用来判断点的是哪个按钮
table.checkStatus(obj.config.id)为checkStatus属性，checkStatus.data就是选中行的数据，它是数组类型
//头工具栏事件， toolbar头部工具栏事件，test是table标签的lay-filter属性的值
table.on('toolbar(test)', function(obj){
//读取选中行的数据， checkStatus.data就是选中行的数据，它是数组类型
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'add': //新增
break;
case 'edit': //修改
break;
case 'del': //删除
break;
};
});
在修改事件中打开修改窗口
多窗口模式，层叠置顶，layer.open({})，具体参考lay.open用法
layer提供了5种层类型，可传入的值有：
0（信息框，默认）、1（页面层）、2（iframe层）、3（加载层）、4（tips层）
content：可传入的值是灵活多变的
不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
//多窗口模式，层叠置顶
layer.open({
type: 2 //iframe
,title: '修改图书信息'
,area: ['390px', '260px'] //宽， 高
,shade: 0.5 //透明度，0~1
,maxmin: true //是否显示最大最小按钮
,offset: [ //居中显示
($(window).height()-260)/2
,($(window).width()-390)/2
]
,content: 'bookupdate.html'
});
form表单
具体表单内容，官网参考表单
对于主键不愿被修改，则采用< input type=“hidden” name=“boolId” >，即可获取主键，但在修改时不被展示出来。
其中每种表单标签重要的属性:
name：该表单名，尽量与json文件中属性名一致对应上，便于后期增删改
autocomplete：默认存在历史记录、可设置为"off"，表示不保存历史记录
placeholder：输入字符串，表示提示语句
<!--主键隐藏-->
<form class="layui-form" lay-filter="formUpdateBook" action="">
<!--input type="hidden"：主键隐藏 -->
<input type="hidden" name="boolId">
<div class="layui-form-item">
<label class="layui-form-label">书名</label>
<div class="layui-input-block">
<input type="text" name="bookName" autocomplete="off" placeholder="请输入书名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">作者</label>
<div class="layui-input-block">
<!-- lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" -->
<input type="text" name="bookAuthor" placeholder="请输入作者名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">价格</label>
<div class="layui-input-inline">
<input type="text" name="bookPrice" placeholder="请输入价格" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">日期</label>
<div class="layui-input-inline">
<input type="text" name="bookDate" id="bookDate" placeholder="yyyy-MM-dd" autocomplete="off"
class="layui-input">
</div>
<div class="layui-inline">
<label class="layui-form-label">数量</label>
<div class="layui-input-inline">
<input type="text" name="bookNum" placeholder="请输入数量" autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类型</label>
<div class="layui-input-block">
<select name="typeId" lay-filter="aihao">
<option value=""></option>
<option value="0">文学</option>
<option value="1">历史</option>
<option value="2">计算机</option>
<option value="3">小说</option>
<option value="4">教辅</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="switchTest">提交信息</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
数据回写到表单中form.val()
form.val(‘formUpdateBook’,{表单name:值}一个对象)
表单form的一个属性与值：lay-filter=“formUpdateBook”；
修改方式一:(手动修改值)
form.val('formUpdateBook', {
"bookName": "Java从入门到精通"
,"bookPrice": 123.45
,.....
});
parent.xx访问父页面的全局变量,调用form.val()方法回写表单
parent.xx访问父页面的全局变量，获取父页面的全局数据，调用form.val()方法回写表单
父页面定义一个行数据的全局变量
var data = {}
行工具按钮事件中，把当前行的数据给全局变量赋值
表头工具栏事件中，把选中行的数据给全局变量赋值
在弹出修改窗口里面用parent.data获取父页面的数据，然后调用form.val()回写数据到表单
其中，formUpdateBook是form标签的lay-filter属性的值
//parent.xx访问父页面的全局变量，获取父页面的全局数据，调用form.val()方法回写表单
//父页面有一个全局变量data，对象parent.data是个对象
form.val('formUpdateBook', parent.data);
form提交和关闭窗口
switchTest是提交按钮的lay-filter属性值
layer.alert(content, options, yes匿名函数) 是 Layer 弹层插件的方法，用于显示一个警告框
//表单提交事件，switchTest是提交按钮的lay-filter属性值
form.on('submit(switchTest)', function(data) {
//layer.alert(content,[, options][, yes])
layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'},
function(){
//修改功能的ajax请求省略
//自动关闭弹窗界面ifarem窗口
var index =parent.layer.getFrameIndex(window.name)
parent.layer.close(index)//执行关闭
}
)
return false; //阻止form标签的提交刷新
});
删除
在行工具栏按钮和表头工具栏按钮事件中写如下代码
layer.confirm('确认要删除当前行吗?', function(index){
//ajax提交后台去删除，在回调函数刷新表格
//刷新表格，test就是表格标签的id（或者是基础参数的id）
table.reload('test', {
page: {
curr: 1 //重新从第 1 页开始
}
});
layer.close(index);
});
汇总案例
按如下表创建json文件，完成分页表格显示功能，完成修改功能（到表单数据回写），完成删除功能（确认提示框，表格刷新）
json数据文件
{
"code":0,
"msg":"",
"count":14,
"data":[
{
"id":1,
"typeName":"书籍",
"pid":0,
"created":"2017-11-02 14:04:24",
"updated":"2017-12-25 17:16:44",
"isChild":1
},
{
"id":10,
"typeName":"电子",
"pid":0,
"created":"2017-12-23 09:32:13",
"updated":"2017-12-23 09:32:18",
"isChild":1
},
{
"id":11,
"typeName":"手机",
"pid":10,
"created":"2017-12-23 09:32:36",
"updated":"2017-12-25 18:00:15",
"isChild":1
},
{
"id":12,
"typeName":"电脑",
"pid":10,
"created":"2017-12-23 09:32:53",
"updated":"2017-12-23 09:32:56",
"isChild":0
},
{
"id":13,
"typeName":"食品",
"pid":0,
"created":"2017-12-23 09:33:06",
"updated":"2017-12-23 09:33:10",
"isChild":1
},
{
"id":14,
"typeName":"白酒",
"pid":13,
"created":"2017-12-23 09:33:22",
"updated":"2017-12-23 09:33:25",
"isChild":0
},
{
"id":2,
"typeName":"杂志类",
"pid":1,
"created":"2017-11-07 09:44:53",
"updated":"2017-11-23 12:56:36",
"isChild":0
},
{
"id":3,
"typeName":"科普类",
"pid":1,
"created":"2017-11-07 09:45:07",
"updated":"2017-11-23 13:56:43",
"isChild":0
},
{
"id":4,
"typeName":"专辑",
"pid":2,
"created":"2017-11-07 09:45:35",
"updated":"2017-11-23 13:57:15",
"isChild":0
},
{
"id":5,
"typeName":"家电",
"pid":0,
"created":"2017-12-23 09:30:07",
"updated":"2017-12-23 09:30:16",
"isChild":1
},
{
"id":6,
"typeName":"电视",
"pid":5,
"created":"2017-12-23 09:30:33",
"updated":"2017-12-23 09:30:37",
"isChild":0
},
{
"id":7,
"typeName":"服装",
"pid":0,
"created":"2017-12-23 09:31:00",
"updated":"2017-12-23 09:31:25",
"isChild":1
},
{
"id":8,
"typeName":"男装",
"pid":7,
"created":"2017-12-23 09:31:19",
"updated":"2017-12-23 09:31:22",
"isChild":0
},
{
"id":9,
"typeName":"女装",
"pid":7,
"created":"2017-12-23 09:31:35",
"updated":"2017-12-23 09:31:37",
"isChild":0
}
]
}
表格页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格页面</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="typeData" lay-filter="typeData"></table>
<!-- 行工具按钮 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 头工具按钮 -->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addData">增加</button>
<button class="layui-btn layui-btn-sm" lay-event="upData">修改</button>
<button class="layui-btn layui-btn-sm" lay-event="delData">删除</button>
</div>
</script>
<script src="./layui/layui.js"></script>
<script type="text/javascript">
var data={}
layui.use(['table'],function(){
//layer = layui.layer; 独立版的layer，无需执行这一句
var table=layui.table,
$=layui.jquery;
table.render({
elem:'#typeData',
url:'./typeData.json',
page: true,
// 头部按钮工具toolbar
toolbar:'#toolbarDemo',
//自定义头部工具栏右侧图标defaultToolbar['filter', 'exports', 'print']
defaultToolbar:['filter'],
//title:'类别表',
cols:[[
{type:'checkbox',fixed:'left',width:100},
{field:'id',title:'编号',sort:true,width:100},
{field:'typeName',title:'类型名',width:100},
{field:'pid',title:'类别',sort:true,width:100},
{field:'created',title:'出版时间'},
{field:'updated',title:'更新时间'},
{field:'isChild',title:'子代',width:100},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
})
//行工具事件
table.on('tool(typeData)', function(obj){
data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除这行么', function(index){
//关闭弹出框
layer.close(index)
// ajax()异步处理、在数据源中删除这些数据
//对表格进行重载
againTable()
});
} else if(obj.event === 'edit'){
formUpdata()
}
});
//头工具栏事件
table.on('toolbar(typeData)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'addData':
layer.msg("新增")
break;
case 'upData':
if(checkStatus.data.length==1){
data=checkStatus.data[0]
formUpdata()
}else{
layer.msg("请选择一条进行修改")
}
break;
case 'delData':
if(checkStatus.data.length>0){
layer.confirm('真的删除这'+checkStatus.data.length+'行么', function(index){
//关闭弹出框
layer.close(index)
// ajax()异步处理、在数据源中删除这些数据
//对表格进行重载
againTable()
});
}else{
layer.msg('请至少选择一条进行删除')
}
break;
};
});
function formUpdata(){
layer.open({
type:2,
title:'修改该行数据',
area:['390px','450px'],
shade:0.5,
offset:[
//高、宽
($(window).height()-450)/2,
($(window).width()-360)/2
],
//type为iframe,content内容可再嵌套一个iframe网页
content:'./typeTableUp.html'
})
}
function againTable () {
//表格重新加载：table.reload(table标签中属性lay-filter值)
table.reload('typeData', {
page: {
curr: 1 //重新从第 1 页开始
}
// ,where: {
// key: {
// id: demoReload.val()
// }
// }
});
}
})
</script>
</body>
</html>
表格修改弹窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./layui/css/layui.css">
<style type="text/css">
body{
padding: 10px;
}
</style>
</head>
<body>
<!-- 表单 -->
<form class="layui-form" action="" lay-filter="formUpData">
<!-- 标识符隐藏 -->
<input type="hidden" name="id">
<div class="layui-form-item">
<label class="layui-form-label">类型名</label>
<div class="layui-input-block">
<input type="text" name="typeName" autocomplete="off" placeholder="请输入类型名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类别</label>
<div class="layui-input-block">
<select name="pid">
<option value="">请选择...</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出版日期</label>
<div class="layui-input-block">
<input type="text" name="created" id="creatDate" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">更新日期</label>
<div class="layui-input-block">
<input type="text" name="updated" id="upDate" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">子代</label>
<div class="layui-input-block">
<select name="isChild">
<option value="">请选择...</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="putBtn">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script src="./layui/layui.js"></script>
<script type="text/javascript">
layui.use(['laydate','form'],function(){
var laydate=layui.laydate,form=layui.form;
//type:'datetime' : yyyy-MM-dd HH:mm:ss
laydate.render({
elem:'#creatDate',
type:'datetime'
})
laydate.render({
elem:'#upDate',
type:'datetime'
})
//formUpData 是form表单中属性lay-filters的值
//parent是父网页、子网页可访问父网页的全局变量
//表单赋值form.val(表单的属性lay-filters值,{一个对象,键值对 表单的name属性值:展示的值})
//父网页的data变量存入的是当前行的属性
form.val('formUpData',parent.data)
//监听提交按钮
//'submit(putBtn)'：submit是表单的一种type，putBtn是该按钮的lay-filter属性值
//function(){}：回调函数，形参是该表单自动返回一个对象，其中field属性是该表单上对应的值，即js类型数据{name属性值:展示的值....}
form.on('submit(putBtn)',function(data){
//js对象转JSON格式字符串：JSON.stringify(js对象)
//JSON格式字符串转js对象：JSON.parse(JSON格式字符串)
layer.alert(JSON.stringify(data.field),{title:'确定提交么'},function(index){
//此处需要与ajax进行交互将修改的数据存入数据源中
layer.close(index)
//找到表单弹窗窗口的index
var index=parent.layer.getFrameIndex(window.name)
//调用父网页自动关闭弹窗
parent.layer.close(index)
})
//防止form在点击submit按钮时，表单就全局刷新
return false
})
})
</script>
</body>
</html>
总体菜单布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 管理系统大布局 -</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">类型布局</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">类型管理</a>
<dl class="layui-nav-child">
<dd><a href="./typeTable.html" target="main">类型表格</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">类型筛选</a>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<iframe name='main'src="" frameborder="0" width="100%" height="700px"></iframe>
</div>
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
});
});
</script>
</body>
</html>
图片转存中…(img-M4bVCq5K-1693646199240)]
总体菜单布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 管理系统大布局 -</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">类型布局</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">类型管理</a>
<dl class="layui-nav-child">
<dd><a href="./typeTable.html" target="main">类型表格</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">类型筛选</a>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<iframe name='main'src="" frameborder="0" width="100%" height="700px"></iframe>
</div>
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
});
});
</script>
</body>
</html>
[外链图片转存中…(img-6nDTGSzo-1693646199242)]
1997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
