前端知识以及组件学习总结

开发中前端总结

下拉框中数据被选中可以使用 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中各种遍历方法总结_js遍历-CSDN博客

常用方法

leo的博客-CSDN博客">js中字符串常用方法总结_15种常见js字符串用法_leo的博客-CSDN博客

常见数据类型及判断

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("
");
 
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 为 2


var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

Json


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

jQuery 教程 | 菜鸟教程 (runoob.com)

选择器

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() 方法用于获取属性值


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() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。


$(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

CSS 创建 | 菜鸟教程 (runoob.com)

id和class选择器

id选择器


#para1
{
    text-align:center;
    color:red;
}

class选择器

.center {text-align:center;}

注意：多个 class 选择器可以使用空格分开


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标签链接


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


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>Coffeeli>
  <li>Teali>
  <li>Coca Colali>
ul>
 
<ul class="b">
  <li>Coffeeli>
  <li>Teali>
  <li>Coca Colali>
ul>
 
<p>有序列表实例:p>
 
<ol class="c">
  <li>Coffeeli>
  <li>Teali>
  <li>Coca Colali>
ol>
 
<ol class="d">
  <li>Coffeeli>
  <li>Teali>
  <li>Coca Colali>
ol>
 
body>
html>

表格table

table tr td


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>Firstnameth>
<th>Lastnameth>
tr>
<tr>
<td>Petertd>
<td>Griffintd>
tr>
<tr>
<td>Loistd>
<td>Griffintd>
tr>
table>
body>
html>

盒子模型

CSS分组与嵌套


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 绝对定位（绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于）

组合器

' ' 后代组合器（Descendant combinator）

'>' 直接子代组合器（Child combinator）

'~' 一般兄弟组合器（General sibling combinator）

'+' 紧邻兄弟组合器（Adjacent sibling combinator）


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">事件1button>
<button class="layui-btn" lay-active="e2">事件2button>
<button class="layui-btn" lay-active="e3">事件3button>
 
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')

})

相关阅读:
快手ip地址切换器怎么用？分享使用指南
 NFT Insider #75：The Sandbox 为Avatar 打造特别活动，Ambire 团队发起第一次官方治理投票
 高教社杯数模竞赛特辑论文篇-2023年C题：基于历史数据的蔬菜类商品定价与补货决策模型（附获奖论文及R语言和Python代码实现）（下）
Mysql之执行计划
 leaflet实现自定义线、矩形和扇形的绘制
 2022.4昆明 E Easy String Problem
用crash tool观察ARM64 Linux地址转换
 深度对话｜Sui在商业技术堆栈中的地位
 三、Eureka注册中心
 [附源码]Python计算机毕业设计Django面向高校活动聚App
原文地址：https://blog.csdn.net/m0_59465624/article/details/132818448

前端知识以及组件学习总结

开发中前端总结

弹性盒子布局

JS

JS根据两个日期相减计算年龄

JS遍历

常用方法

常见数据类型及判断

typeof

instanceof

Js数据类型

数组

对象

字符串

switch

正则表达式

修饰符let、var、const

Json

jQuery

选择器

id选择器

class选择器

事件

显示和隐藏

获取值和属性

添加元素

删除元素和内容

CSS()方法

遍历

祖先

后代

同胞

过滤

Ajax的Get和Post

CSS

id和class选择器

id选择器

class选择器

CSS样式优先级

CSS中background

a标签链接

列表

表格table

盒子模型

CSS分组与嵌套

display显示

Position(定位)

组合器

CSS中 块级元素、行内元素、行内块元素区别

块级元素

行内元素

行内块元素

元素类型转换 display

Layui内置模块

util

日期转字符 util.toDateString(time, format)

数字前置补零 util.digit(num, length)

处理事件 util.event(attr, obj, eventType)

admin

layer 弹出层

CSS中块级元素、行内元素、行内块元素区别