- 博客(41)
- 收藏
- 关注
RSS订阅
原创 盒子上下、左右居中对齐的常见方式
盒子居中对齐的常见方式首先 html 布局，两层盒子，实现子盒子相当于父盒子上下、左右分别对其。 <div class="div1"> <div class="div2"></div> </div>然后编写 CSS 实现的具体几种方法如下：1 第一种：使用CSS的 position 属性和margin: auto; .div1 { width: 100px;
2020-07-02 10:48:31
13278
1
原创 JSON.stringify() 的使用、toJSON 方法 以及 JSON.parse 方法
JSON.stringify() 的 5 个秘密特性JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串。//初始化一个 user 对象const user = { "name": 'zzz', "age": 24{console.log(user)// [object Object]console.log() 没有帮助我们打印出期望的结果。它输出 [object Object]，因为从对象到字符串的默认转换是 [obje
2020-05-28 14:41:44
1570
原创 css引入的方式有哪些，link和@import的区别是什么
css引入的方式有哪些，link和@import的区别是什么有四种形式:1.链入外部样式表,就是把样式表保存为一个样式表文件,然后在页面中用<link rel="stylesheet" type="text/css" href="*.css">链接这个样式表文件.2.内部样式表,就是把样式表放到页面的区里.<style type="text/css"> div {height: 600px;}</style>3.导入外部样式表,用@import,在与
2020-06-06 11:25:39
624
原创 div内置img元素，底部总有间距
div内置img元素，底部总有间距用一个div包裹一个img，会出现img不能完全覆盖div空间，总会在底边留下一点空隙。解决方法：div设置font-size: 0或line-height: 0，进而行高为0； 不推荐使用img设置 vertical-align: top 或者 middle/，使其不再以默认基线为对齐方式；img设置 display:block，使其变成块级元素。...
2020-05-28 14:42:57
527
原创 express 基本使用之 get & post 请求 & app.use 的使用
express简介web开发框架下载npm install express中间件中间件方法和请求处理函数app.get(‘请求路径’,‘处理函数’)app.post(‘请求路径’,‘处理函数’)// * 表示匹配任何路径app.get('*', (req, res, next) => { console.log(++i); next();});app.get...
2020-04-08 20:07:38
1896
原创 mongodb集合规则
集合规则限定条件// 第三方模块 操作数据库let mongoose = require('mongoose');// 链接数据库mongoose.connect('mongodb://localhost/school', { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => { co...
2020-04-05 11:37:49
464
原创 mongodb增删查改
数据库操作1 添加数据// 第三方模块操作数据库const mongoose = require('mongoose');// 连接数据库mongoose.connect('mongodb://localhost/school', { useNewUrlParser: true, useUnifiedTopology: true }).then(() => { consol...
2020-04-05 11:37:15
172
原创 4.5-mongodb
mysql、Mongodb、redis1 数据库持久化数据、数据库有效管理2 安装必要的软件数据库软件 mongodb 下载地址https://www.mongodb.com/download-center/community数据库可视化操作软件 Robo3T/compass3 基本概念database mongodb软件可以创建多个数据库collection 集合 一组数据d...
2020-04-05 11:36:39
202
原创 浏览器事件环机制解析 宏任务微任务执行顺序
浏览器事件环js单线程（主线程）宏任务 js渲染 ui渲染 定时器(setTimeout/setInterval/setImmdiate) I/o微任务 promise process.nextTick Object.observe MutationObserverVue.nextTick(function() {}) 既使用宏任务又使用微任务。优先使用Promise,再H5ap...
2020-04-05 11:31:21
331
原创 Promise使用（方法）
实例方法then()类方法race()/all()/resolve()/reject()说明let fs = require('fs');function read(path) { return new Promise((resolve,reject)=>{ fs.readFile(path,'utf8',function(err,data) { ...
2020-04-05 11:27:39
146
原创 es6对象变化
对象属性简写let name = 'zizi';let age = 24;// let work = function() {// console.log('working hard');// }let person = { name, //name: name, age, //age: age //work work() { ...
2020-03-24 11:16:41
247
原创 正则表达式基础到复杂使用以及常用量词分析
正则表达式匹配字符串中字符组合的模式^\w+([-+.]\w+)*@\w+([-+])正则测试工具https://tool.oschina.net/regex1 正则表达式的使用1.1 定义// RegExpvar regexp = new RegExp(/456/);console.log(regexp); // /456/// 直接量var regexp2 = /a...
2020-03-18 21:53:51
180
原创 手写浅层拷贝&深层拷贝
浅层拷贝 和 深层拷贝浅复制 更深层次对象级别只拷贝引用 var obj1 = { a: 10, b: 20, info: { c: 30 } }; var target = {}; for(var key...
2020-03-18 21:53:22
128
原创 apply&call&bind比较以及源码实现
apply() & call() & bind()同：用于改变函数中this 的指向异：apply()和call()使用传参不同；apply()和call()可以实现函数调用，而bind()不能 function fn(a, b) { console.log(this); console.log(a, b); ...
2020-03-18 21:50:38
181
1
原创 2.32-call()方法实现继承
call()方法1 call() 可以实现函数调用2 可以改变函数中this指向 第一个参数是要改变this的值 function fun(a, b) { console.log(this); console.log(a, b); console.log('好好学习！'); } ...
2020-03-16 16:20:22
223
原创 构造函数this指向
构造函数this指向：1 构造函数this指的是对象实例2 原型对象函数里面也this也是指向实例对象 // 构造函数 function Student(name,age) { this.name = name; this.age = age; } Student.prototy...
2020-03-16 16:19:46
3090
原创 JS面向对象编程（OOP）
面向对象编程 OOP1 面向对象 & 面向过程面向过程 POP 分析问题所需要的步骤面向对象OOP 以功能对象划分问题二者比较：面向对象面向过程优灵活 复用 维护性能高缺性能比面向过程低没有面向对象灵活、复用、维护2 类和对象笔记本 泛指 类mac笔记本 具体 实例动物 猫2.1 面...
2020-03-16 16:19:10
289
原创 JS动画实现
1 JS动画实现原理原理：通过定时器不断地改变目标位置例子：让div运动到500px的时候停下 <style> * { padding: 0; margin: 0; } .box { width: 200px; height: 2...
2020-03-16 16:17:44
227
原创 练习：窗口滚动定位
窗口发生滚动时候，导航栏和头部定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
2020-03-16 16:17:14
210
原创 练习：商品展示效果放大
模拟商品触碰产生放大效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
2020-03-16 16:16:18
118
原创 DOM三大家族（offset系列 & client系列 & scroll系列）以及其他常用坐标和尺寸属性总结
offset系列el.offsetParent表示元素中带有最近定位的祖先元素，祖先元素都没有定位则返回bodyel.offsetTop表示元素距离其offsetParent上方的偏移el.offsetLeft表示元素距离其offsetParen左边框的偏移el.offsetWidth元素实际宽度 左右border+左右padding+widthel.offs...
2020-03-16 16:15:13
305
原创 小例子：文本框输入文字，在旁边放大提示效果
练习2 输入文字字体放大再提示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
2020-03-03 21:47:27
439
原创 练习：键盘点击某个按钮控制聚焦到输入框
练习 京东按键输入内容 按下s键 光标定位到搜索框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2020-03-03 21:46:27
446
原创 练习：模拟留言发布
实现留言效果，超过5条留言 删除第一条<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
2020-03-03 21:44:53
302
原创 练习：动态创建表格
根据用户输入的行列数创建表格 表格的每一行再增加一列删除列<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
2020-03-03 21:43:44
265
原创 2.24.1-练习：动态创建元素和删除元素
练习描述：在页面中每隔一段时间 创建一个图片 图片大小随机 位置随机进而实现星星的出现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
2020-03-03 21:42:42
158
原创 练习：选项卡
选项卡根据点击事件调取不同的选项<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>选项卡</title> <style type="text/css"> * { margin:...
2020-03-03 21:38:44
158
原创 练习：全选&反选
选择框功能实现，全选和反选<body> <div class='demo'></div> <script> //方法一 var oDiv = document.querySelector('div'); /* oDiv.style.width = '300px'; ...
2020-02-22 18:06:24
126
原创 练习：js实现简易的轮播图效果
制作简易的轮播图效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
2020-02-22 17:58:36
319
原创 练习：js实现点击切换图片
点击切换图片，控制是否可以循环切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
2020-02-22 17:56:38
574
原创 获取焦点/失去焦点（onfocus/onblur）练习
文本框获取焦点，清空信息文本框失去焦点时，如果为空 ，提示 不能为空，如果为非数字，提示不合法，如果长度小于6，提示“长度不够”如果为数字，提示正确 <input type="text" name="" id="text" value="输入内容（数字）" /> <script> let txt = document.getEle...
2020-02-15 19:18:44
394
原创 onchange事件练习：下拉列表 列出三个颜色 选中某种颜色 网页就设置该颜色
下拉列表 列出三个颜色 选中某种颜色 网页就设置该颜色通过onchange事件获取下拉列表的改变，从而改变网页背景色。<body> <!-- 下拉列表 列出三个颜色 选中某种颜色 网页（document.body）就设置该颜色 --> <select name="color" id="color"> <option va...
2020-02-15 19:16:57
1206
原创 JS实现li各行变色，且在各行变色基础上实现鼠标移入变色，移除变为原来的颜色
1、JS实现隔行变色<body> <ul> <li>aaaaaa</li> <li>bbbbbb</li> <li>cccccc</li> <li>ddddddd</li> <li&g...
2020-02-15 19:13:47
2812
原创 js 常用数据类型以及数据类型转换规则（强制类型转换、隐式类型转换）
数据类型一、基本数据类型Boolean(true、false)、Number、String、Undefined(undefined)Null、Symbol二、引用数据类型Object把第一个非数字字符之前的数字转成整数console.log( parseInt(“23.23”) ); // 数字23console.log( parseInt(“23a.23”) ); // 数字23...
2020-02-14 16:59:07
401
原创 js 字符串方法大全以及模板字符串用法
字符串：单引号或者双引号引起来的字符序列。示例： var str = 'hello'; var str = "hi"; var str = new String('hello'); console.log(typeof str); //object字符串操作charAt() 对应位置上的字符charCodeAt() 对应位置上的字符编码...
2020-02-14 16:54:29
1459
原创 常用排序方法实现（冒泡排序、选择排序、插入排序、快速排序、sort排序）
冒泡排序示例：10,2,3，-3,9 第一轮 每轮比较相邻两个数 总共比较4次 3 10 4 -3 9 3 4 10 -3 9 3 4 -3 10 9 3 4 -3 9 10 第二轮 总共3次 第二个较大值确定 3 4 -3 9 10 3 -3 4 9 10 ...
2020-02-14 16:53:52
142
原创 数组常用方法大全（es5 之前 - es5 - es6），以及一些方法的源码实现
数组存储一组关联数据数组定义1、数组直接量（常用）var arr = [] ;var arr2 = [10,20,30];2、通过new创建var arr3 = new Array（）；var arr4 = new Array（10,20,30）；数组访问数组名[下标] 下标0 1 2 3 …数组长度可以通过数组名.length访问数组元素的遍历1、for 循环 ...
2020-02-14 16:51:29
222
原创 对象概念解析、操作
对象Object对象是一个整体 从语法角度就是一个无序属性的集合对象由特征和行为组成 特征在程序中通过属性描述行为用函数描述可以动态添加成员对象定义：var 对象名= ｛属性名：属性值 k:v｝对象调用1、对象名.属性名2、对象名[‘属性名’]3、对象名[变量名]示例： //定义对象 var along = { name: "al...
2020-02-14 16:50:48
212
原创 函数常用知识解析：递归、arguments...
函数函数的概念引入希望某些逻辑或者特定功能的代码块可以被我们控制或者反复使用，此时可以考虑用函数封装最大好处 提高代码复用1、可以对某些逻辑或者功能封装2、将来可以被控制。可以反复使用函数定义一、调用和定义谁在先都可以function 函数名( ) {// 函数体——具体代码}二、函数表达式 必须先定义后调用var 函数名 = function() {// 函数体}...
2020-02-14 16:50:10
174
原创 js结构类型
if -示例： var age = 20; if (age >= 16) { // 条件成立执行大括号的内容 alert("恭喜，您可以报名学习驾照"); }if-else var age = 10; if (age >= 16) { // 条件成立...
2020-02-14 16:48:34
253
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人