开发中前端总结
- 下拉框中数据被选中可以使用 selected="selected"
- 下拉框中不允许编辑可以使用 disabled="disabled"
- input输入框可以通过value属性设置输入框中显示的值
- 判断数组中是否存在某个值可以使用includes判断，例如a=[1,2,3],a.includes(1)
- 数组添加数据可以通过push方法
弹性盒子布局
display:flex(弹性盒子布局)详解_display: flex-CSDN博客
JS
JS根据两个日期相减计算年龄
a = new Date(a.replace(/-/g, '/'));
b = new Date(b.replace(/-/g, '/'));
var d = Math.abs(a.getTime() - b.getTime()) / 1000 / 24 / 60 / 60;
var year = Math.floor(d / 365);//不整除取最小的年数
JS遍历
常用方法
js中字符串常用方法总结_15种常见js字符串用法_<a href="#">leo</a>的博客-CSDN博客
<script>
var str="heool"
console.log(str.length);
console.log(str.concat(" lyt"));
console.log(str.includes("he"));
var phone="153884099001";
console.log(phone.match(/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/));
var ls="2033 03 05"
console.log(ls.replaceAll(" ", "-"));
console.log(str.substring(1, 3));
</script>
常见数据类型及判断
typeof
console.log(typeof 123); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"
console.log(typeof null); // "object"
console.log(typeof NaN); // "number"
console.log(typeof document.all); // "undefined"
instanceof
const arr = [1, 2, 3]
console.log(arr instanceof Array) // true
console.log(arr instanceof Object) // true
const obj = { name: "云牧", age: 18 }
console.log(obj instanceof Object) // true
console.log(obj instanceof Array) // false
Js数据类型
数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
对象
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
获取对象的方式：person.lastName 或者 person["lastName"]
字符串
switch
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}正则表达式
判断是否全部是字母：
val = "123456"
var isletter = /^[a-zA-Z]+$/.test(val);
document.write(isletter);
document.write("<br>");
val2 = "asaaa"
var isletter2 = /^[a-zA-Z]+$/.test(val2);
document.write(isletter2);修饰符let、var、const
let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效。
const常量
var x = 10;
// 这里输出 x 为 10
{
var x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 2var x = 10;
// 这里输出 x 为 10
{
let x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 10Json
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
jQuery
选择器
id选择器
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});class选择器
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
显示和隐藏
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});获取值和属性
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标签）
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#runoob").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
</html> 
添加元素
$("p").append("追加文本");
$("p").prepend("在开头追加文本");
删除元素和内容
remove() 方法删除被选元素及其子元素
empty() 方法删除被选元素的子元素
CSS()方法
$("p").css({"background-color":"yellow","font-size":"200%"});遍历
祖先
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
$(document).ready(function(){
$("span").parents();
});后代
children() 方法返回被选元素的所有直接子元素。
$(document).ready(function(){
$("div").children();
});同胞
- siblings()
- next()
- nextAll()
- prev()
- prevAll()
$(document).ready(function(){
$("h2").siblings();
});过滤
first() 方法返回被选元素的首个元素
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。
$(document).ready(function(){
$("p").not(".url");
});Ajax的Get和Post
$.post( URL [, data ] [, callback ] [, dataType ] )
- URL：发送请求的 URL字符串。
- data：可选的，发送给服务器的字符串或 key/value 键值对。
- callback：可选的，请求成功后执行的回调函数。
- dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）
CSS
id和class选择器
id选择器
#para1
{
text-align:center;
color:red;
}class选择器
.center {text-align:center;}注意：多个 class 选择器可以使用空格分开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center {
text-align:center;
}
.color {
color:#ff0000;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中，颜色为红色。</p>
</body>
</html>CSS样式优先级
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式
CSS中background
当使用简写属性时，属性值的顺序为：:
- background-color 颜色
- background-image 图片
- background-repeat 是否重复
- background-attachment 是否固定
- background-position 图片位置
body {background:#ffffff url('img_tree.png') no-repeat right top;}body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}a标签链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>列表
无序列表：ul - li
有序列表：ol - li
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>表格table
table tr td
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>盒子模型
CSS分组与嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
</style>
</head>
<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
<p class="marked">带下划线的 p 段落。</p>
</body>
</html>
display显示
display:none 不显示
display:inline 显示为一行（行级元素）
display:block 分行显示（块级元素）
Position(定位)
position:fixed 位置固定不变
position:relative 相对定位（相对定位元素的定位是相对其正常位置）
position:absolute 绝对定位（绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>）
组合器
' ' 后代组合器（Descendant combinator）
'>' 直接子代组合器（Child combinator）
'~' 一般兄弟组合器（General sibling combinator）
'+' 紧邻兄弟组合器（Adjacent sibling combinator）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
CSS中 块级元素、行内元素、行内块元素区别
CSS中 块级元素、行内元素、行内块元素区别 - 掘金 (juejin.cn)
块级元素
- 每个块级元素都是独自占一行；
- 高度，行高，外边距（margin）以及内边距（padding）都可以控制；
- 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%；
- 多个块状元素标签写在一起，默认排列方式为从上至下；
<address> // 定义地址
<caption> // 定义表格标题
<dd> // 定义列表中定义条目
<div> // 定义文档中的分区或节
<dl> // 定义列表
<dt> // 定义列表中的项目
<fieldset> // 定义一个框架集
<form> // 创建 HTML 表单
<h1> // 定义最大的标题
<h2> // 定义副标题
<h3> // 定义标题
<h4> // 定义标题
<h5> // 定义标题
<h6> // 定义最小的标题
<hr> // 创建一条水平线
<legend> // 元素为 fieldset 元素定义标题
<li> // 标签定义列表项目
<noframes> // 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript> // 定义在脚本未被执行时的替代内容
<ol> // 定义有序列表
<ul> // 定义无序列表
<p> // 标签定义段落
<pre> // 定义预格式化的文本
<table> // 标签定义 HTML 表格
<tbody> // 标签表格主体（正文）
<td> // 表格中的标准单元格
<tfoot> // 定义表格的页脚（脚注或表注）
<th> // 定义表头单元格
<thead> // 标签定义表格的表头
<tr> // 定义表格中的行行内元素
- 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；
- 高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效 上下无效；
- 设置行高有效，等同于给父级元素设置行高；
- 元素的宽度就是它包含的文字或图片的宽度，不可改变；
- 行内元素中不能放块级元素，a 链接里面不能再放链接；
<a> // 标签可定义锚
<abbr> // 表示一个缩写形式
<acronym> // 定义只取首字母缩写
<b> // 字体加粗
<bdo> // 可覆盖默认的文本方向
<big> // 大号字体加粗
<br> // 换行
<cite> // 引用进行定义
<code> // 定义计算机代码文本
<dfn> // 定义一个定义项目
<em> // 定义为强调的内容
<i> // 斜体文本效果
<kbd> // 定义键盘文本
<label> // 标签为 input 元素定义标注（标记）
<q> // 定义短的引用
<samp> // 定义样本文本
<select> // 创建单选或多选菜单
<small> // 呈现小号字体效果
<span> // 组合文档中的行内元素
<strong> // 加粗
<sub> // 定义下标文本
<sup> // 定义上标文本
<textarea> // 多行的文本输入控件
<tt> // 打字机或者等宽的文本效果
<var> // 定义变量
行内块元素
- 高度、行高、外边距以及内边距都可以控制；
- 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；
<button>
<input>
<textarea>
<select>
<img>元素类型转换 display
display：block ，定义元素为块级元素
display : inline ，定义元素为行内元素
display：inline-block，定义元素为行内块级元素
Layui内置模块
util
日期转字符 util.toDateString(time, format)
转化时间戳或日期对象为日期格式字符
参数 time：可以是日期对象，也可以是毫秒数
参数 format：日期字符格式（默认：yyyy-MM-dd HH:mm:ss），可随意定义，如：yyyy年MM月dd日
示例：
util.toDateString(new Date(), "yyyy-MM-dd")
数字前置补零 util.digit(num, length)
数字前置补零
参数 num：原始数字
参数 length：数字长度，如果原始数字长度小于 length，则前面补零，如：util.digit(7, 3) //007
处理事件 util.event(attr, obj, eventType)
<button class="layui-btn" lay-active="e1">事件1</button>
<button class="layui-btn" lay-active="e2">事件2</button>
<button class="layui-btn" lay-active="e3">事件3</button>
JavaScript：
<script>
layui.use('util', function(){
var util = layui.util;
//处理属性 为 lay-active 的所有元素事件
util.event('lay-active', {
e1: function(othis){
alert('触发了事件1');
}
,e2: function(othis){
alert('触发了事件2');
}
,e3: function(othis){
alert('触发了事件3');
}
});
});
</script>admin
打开弹窗 admin.open
var layIndex=admin.open({
title:'批量',
url: ,
area:['800px','']
data:{data:ids},
end:function(){},
success:function(){}
})关闭弹窗 admin.closeDialog()
admin.closeDialog('#addOrUpdateForm5')
layer 弹出层
弹出消息layer.msg()
layer.msg(res.message,{icon：1，time：1000}，function（）{
admin.closeDialog('#addOrUpdateForm5')
})
5773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
