随笔档案「2022年7月」 - 香香鲲

全栈：node.js

摘要：什么是node.js Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台。 noed.js的特点 1、noed.js是单线程语言 nod 阅读全文

posted @ 2022-07-30 16:42 香香鲲阅读(61) 评论(0) 推荐(0)

全栈：模块化

摘要：什么是模块化将一个复杂的程序依照一定的规则封装成几个文件, 并进行组合在一起。每个模块的内部数据是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。 nodejs环境中的全局函数: require() require函数是一种运行时同步加载的机制(拷贝该文件)，当node加载该文件后，会阅读全文

posted @ 2022-07-30 16:08 香香鲲阅读(43) 评论(0) 推荐(0)

全栈：mime模块

摘要：mime模块下载mime 在node.js环境下载mime 下载完成后文件中有一个json文件使用mime mine模块 var mime = require("mime") var re = mime.getType('index') console.log(re); 检测js文件：阅读全文

posted @ 2022-07-28 20:42 香香鲲阅读(38) 评论(0) 推荐(0)

全栈：querystring模块

摘要：querystring模块可以把querystring参数解析为一个对象 var urlobj=url.parse(req.url) var queryobj=querystring.parse(urlobj.query) 实例： //querystring模块 var querystring = 阅读全文

posted @ 2022-07-28 17:16 香香鲲阅读(46) 评论(0) 推荐(0)

全栈：网址的组成、url模块

摘要：网址的组成协议://ip:port/pathname?querystring#hash 1、协议 2、ip 3、端口 4、pathname pathname 属性是一个可读可写的字符串,可设置或返回当前 URL 的路径部分。 5、querystring querystring是可以将url请求地址阅读全文

posted @ 2022-07-28 15:41 香香鲲阅读(89) 评论(0) 推荐(0)

全栈：静态网站（__dirname 、__filename）

摘要：实例1： //静态网站1———— var http = require('http') var fs = require("fs") var app = http.createServer((req, res) => { //前端的每一次网络请求这个函数都会重新运行一次 if (req.url = 阅读全文

posted @ 2022-07-28 15:28 香香鲲阅读(42) 评论(0) 推荐(0)

全栈：静态页面

摘要：静态页面实例：前端代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport 阅读全文

posted @ 2022-07-27 22:16 香香鲲阅读(59) 评论(0) 推荐(0)

全栈：前端网页加载

摘要：前端网页加载网页加载一个网页的渲染资源是一个个动态加载的数据组合而成的,不是一次就把整个渲染的页面加载了 1.用户浏览器地址栏输入网址==>请求后端,后端传输一份html编码的文本文档然后就断开连接了 2.浏览器开始运行html文件的编码(此时没有外部图片，js，css，字体库资源等) 2.1解阅读全文

posted @ 2022-07-27 21:40 香香鲲阅读(216) 评论(0) 推荐(0)

全栈：fs模块

摘要：fs模块读取文件 fs.readFile(path,(err,data)=>{}) path 填路径可以绝对可以相对 err代表读取失败 data代表读取成功它是一个buffer类型的数据(二进制数据流) 可以通过toString()转化为字符串注意:res.end()方法接受字符串或者b 阅读全文

posted @ 2022-07-27 21:21 香香鲲阅读(85) 评论(0) 推荐(0)

全栈：http模块

摘要：http模块 var app=http.createServer((req,res)=>{}) 创建一个服务器 app.listen(81) //端口的意义:ip是访问计算机的标志端口就可以进入计算机的具体哪一个程序 res.setHeader( 'content-Type' , 'text/pl 阅读全文

posted @ 2022-07-27 21:14 香香鲲阅读(56) 评论(0) 推荐(0)

全栈：运行环境配置

摘要：环境配置 1、下载node.js，下载了一个12.16.3版本 https://nodejs.org/download/release/v12.16.3/ -->> node-v12.16.3-x64.msi 2、安装node.js到非系统盘根目录，创建文件夹名为nodejs，并在安装时放到这个目录阅读全文

posted @ 2022-07-27 20:52 香香鲲阅读(56) 评论(0) 推荐(0)

ECharts：学习可视化

摘要：折线图： <script src="../echarts.min.js"></script> <script> var box = document.querySelector('#dig') var echarts = echarts.init(box) var option = { title: 阅读全文

posted @ 2022-07-27 13:34 香香鲲阅读(48) 评论(0) 推荐(0)

SVG：绘图

摘要：参考菜鸟：http://home.ustc.edu.cn/~xie1993/svg/svg-tutorial.html 例子： <svg width="800" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">//导入SVG 阅读全文

posted @ 2022-07-27 08:56 香香鲲阅读(78) 评论(0) 推荐(0)

数据存储：localStorage、sessionStorage、cookie三者的区别

摘要：localStorage、sessionStorage、cookie三者的区别（1）存储大小 cookie数据大小不能超过4k ； cookie存储是可以设置过期时间； sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大； c 阅读全文

posted @ 2022-07-24 17:21 香香鲲阅读(95) 评论(0) 推荐(0)

数据存储：cookie

摘要：cookie cookie的组成： Cookie是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。 (1)Name/Value：设置Cookie的名称及相对应的值，对于认证Cookie，Value值包括阅读全文

posted @ 2022-07-24 17:20 香香鲲阅读(190) 评论(0) 推荐(0)

数据存储：localStorage和sessionStorage

摘要：localStorage和sessionStorage localStorage和sessionStorage是window的两个属性，他们代表同一个Storage对象； localStorage和sessionStorage的API： setItem()：将对应的名字和值传递进去，可以实现数据存储阅读全文

posted @ 2022-07-24 17:20 香香鲲阅读(210) 评论(0) 推荐(0)

Canvas：清除画布指定元素

摘要：清除画布指定元素 clearRect() 方法清空给定矩形内的指定像素； JavaScript 语法： context.clearRect(x,y,width,height); 参数描述 x 要清除的矩形左上角的 x 坐标 y 要清除的矩形左上角的 y 坐标 width 要清除的矩形的宽度，以像素阅读全文

posted @ 2022-07-24 17:16 香香鲲阅读(1257) 评论(0) 推荐(0)

Canvas：绘制图片

摘要：绘制图片语法： drawImage()：将原图片像素的内容复制到画布上；第一个参数是源图片，可以是img元素或Image构造函数创建的屏幕外图片对象；三个参数时：指定图片绘制的x、y坐标；五个参数时：指定图片绘制的x、y坐标，以及图片的宽度、高度；九个参数时：裁剪的对象裁剪的位置（阅读全文

posted @ 2022-07-24 17:04 香香鲲阅读(365) 评论(0) 推荐(0)

Canvas：绘制文本信息

摘要：绘制文本信息方法描述 fillText() 在画布上绘制“被填充的”文本 strokeText() 在画布上绘制文本（无填充）三个参数：绘制的内容；起点x坐标；起点y坐标；文本颜色使用fillStyle属性指定；文本字体使用font属性指定，和CSS一致； textAlign属性指定水阅读全文

posted @ 2022-07-24 15:59 香香鲲阅读(144) 评论(0) 推荐(0)

Canvas：曲线的绘制和填充

摘要：曲线的绘制和填充语法 arc()：在当前子路经添加一条弧线；语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise); 参数描述 x 圆的中心的 x 坐标。 y 圆的中心的 y 坐标。 r 圆的半径。 sAngle 起始角，以弧度计。（弧的圆形的三阅读全文

posted @ 2022-07-24 15:42 香香鲲阅读(239) 评论(0) 推荐(0)

Canvas：矩形的绘制

摘要：矩形的绘制语法（1）rect()：在当前子路经添加一条弧线；语法：context.rect(x,y,width,height); 四个参数：起点坐标x,y：左上角坐标；宽度width：矩形的宽度；高度height：矩形的高度；（2）strokeRect()方法可以直接绘制一个矩形；语阅读全文

posted @ 2022-07-24 10:30 香香鲲阅读(1560) 评论(0) 推荐(0)

Canvas：绘制线和填充多边形

摘要：绘制线和填充多边形 1.绘制线段的API是上下文对象的方法； 2.beginPath：开始定义一条新的路径； 3.moveTo：开始定义一条新的子路径，该方法确定了线段的起点； 4.lineTo：将上面定义的线段起点和指定的新的点连接起来； 5.到这里只是规划好了思路，还没有在画布上画出任何图形；阅读全文

posted @ 2022-07-24 09:40 香香鲲阅读(768) 评论(0) 推荐(0)

Canvas：概念

摘要：Canvas 1、了解SVG SVG是一种可伸缩的矢量图型，它基于XML并用于描述图形的语言；不同于用像素来描绘的矩阵图像（JPG、PNG、GIF），SVG是和分辨率无关的； SVG图像可以通过JS和DOM操作来创建和操控； SVG有自己庞大的语法和较大的复杂度，我们这里只是了解下有这种图像格式；阅读全文

posted @ 2022-07-23 10:42 香香鲲阅读(136) 评论(0) 推荐(0)

DOM：多级菜单联动

摘要：菜单联动简单实现三级： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport 阅读全文

posted @ 2022-07-22 22:49 香香鲲阅读(36) 评论(0) 推荐(0)

DOM：滚动时固定导航栏

摘要：简单实现滚动时固定导航栏实例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi 阅读全文

posted @ 2022-07-22 19:52 香香鲲阅读(67) 评论(0) 推荐(0)

JS：js中的语法糖总结

摘要：对象的语法糖 obj.name='zs'//语法糖 obj['name']='zs'//完整写法 obj.age//语法糖函数的语法糖普通函数: function（）{} ==> 箭头函数：（）=>{} 数组的语法糖 arr = [1,2,3] ==> 使用解构： {1，2，3} = arr 阅读全文

posted @ 2022-07-21 20:52 香香鲲阅读(510) 评论(0) 推荐(0)

BOM操作

摘要：BOM操作了解 1.BOM BOM是browser object model的缩写，简称浏览器对象模型由一系列功能的对象构成，核心对象是window BOM缺乏标准(不过所有浏览器都支持)，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C//一定要记住,BOM不是W3C 阅读全文

posted @ 2022-07-21 20:51 香香鲲阅读(141) 评论(0) 推荐(0)

DOM：缓慢动画

摘要：缓慢动画缓动动画: 匀速改变元素的样式就是匀速动画非匀速的改变元素css样式的动画效果就是缓动动画计算公式：设定值=当前+(目标值-当前)*百分比阅读全文

posted @ 2022-07-21 20:45 香香鲲阅读(101) 评论(0) 推荐(0)

DOM：预加载和懒加载

摘要：预加载和懒加载预加载: 提前加载资源--同源加载的优化懒加载: 先不加载等条件成立时再加载懒加载的意义：懒加载的目的主要是作为服务器前端的优化，减少请求数或延迟请求数。预加载懒加载的区别：一个是提前加载，一个是延迟甚至不加载，懒加载可以缓解服务器对的压力。预加载会增大服务器的压力，比如阅读全文

posted @ 2022-07-21 20:28 香香鲲阅读(168) 评论(0) 推荐(0)

DOM：防抖和节流

摘要：防抖和节流使用场景：抽奖登录动画网络加载等待需要做防抖或者是节流操作 1、什么是防抖首先,先去解释一下什么叫做防抖,在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时 2、什么是节流当持续触发事件时，保证一定时间段内只调用一次事件处理函数。所以节流会稀释函数的执行频率防阅读全文

posted @ 2022-07-21 15:55 香香鲲阅读(62) 评论(0) 推荐(0)

DOM：事件代理

摘要：事件代理网页设计中的一种思想，利用事件对象中引用的目标对象这个技术来实现的无论事件触发时是不是目标对象的监听器在监听器内部的事件对象event中都可以访问这个事件的目标对象,利用这个特点去绑定事件给父级元素来代理子级元素的业务,这种设计就是事件代理。事件代理的优点： 1.可以大量节省内存阅读全文

posted @ 2022-07-21 14:26 香香鲲阅读(55) 评论(0) 推荐(0)

DOM：页面的渲染流程

摘要：页面渲染流程 1.页面呈现过程不同的浏览器略微会有些不同。但基本上都是类似的 ①.浏览器把html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树就是html结构，里面包含了所有的html tag，包括用JS添加的元素。 ② 阅读全文

posted @ 2022-07-20 14:57 香香鲲阅读(308) 评论(0) 推荐(0)

DOM：盒子模型

摘要：盒子模型 el.offsetWidth：本身宽度+边框线+左右内边距； el.offsetHeight：本身高度+边框线+上下内边距； el.offsetTop：相对第一个父级节点有定位属性的上偏移量； el.offsetLeft：相对有定位属性的父节点左偏移量； el.clientWidth：本身阅读全文

posted @ 2022-07-20 11:16 香香鲲阅读(64) 评论(0) 推荐(0)

JS：symbol

摘要：es6新增的基本数据: Symbol 例子： var a=new Number(200) var b=100 b.age=20//new Number(100) console.log(b.age)//new Number(100) 它是一个内置全局函数,生成一个独一无二的数据 let s1=Sym 阅读全文

posted @ 2022-07-20 11:13 香香鲲阅读(44) 评论(0) 推荐(0)

CSS：面试题

摘要：1、前端如何进行SEO优化？ 1、title（） 2、descripion（内容摘要） 3、keywords（关键字） link、visited、hover、active顺序：1、效果只有顺序才能正常显示；2、link、visited是静态伪类，hover、active是动态伪类；若不在前面，则会被阅读全文

posted @ 2022-07-20 11:11 香香鲲阅读(49) 评论(0) 推荐(0)

DOM：事件响应链

摘要：事件响应链 1.事件的三个阶段: 先捕获，后目标，再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发事件经过所有元素都没有被处理,这个事件消失事件传递的过程只跟文档树的结构有关系跟界面显示的层叠效果没有任何关系事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事阅读全文

posted @ 2022-07-20 11:10 香香鲲阅读(56) 评论(0) 推荐(0)

DOM：事件对象

摘要：事件中的this和事件对象 this 1.行内: <button type="button" onclick="fn(this)">xxx</button> <script type="text/javascript"> function fn (e) { console.log(e,this)// 阅读全文

posted @ 2022-07-19 16:31 香香鲲阅读(36) 评论(0) 推荐(0)

DOM：事件类型

摘要：事件类型鼠标事件 onclick 、ondblclick 、onmousedown、onmouseup、onmouseover、 onmousemove、onmouseleave 、onmouseenter、 onmouseout 、onwheel 、onscroll 、onload 1、clic 阅读全文

posted @ 2022-07-19 15:49 香香鲲阅读(190) 评论(0) 推荐(0)

DOM：事件-绑定与解绑

摘要：事件事件,就是函数在某种状态下被调用.JS捕捉到的发生在网页上的行为,官方称为事件句柄,是交互体验的核心功能事件的三要素: 1 事件源 2 事件类型（点中，点中不松开，鼠标滚动...） click 3 事件处理程序handler 绑定事件 1.行内绑定方式在标签行内的事件值上写上标志"jav 阅读全文

posted @ 2022-07-19 11:02 香香鲲阅读(123) 评论(0) 推荐(0)

CSS：设置透明度

摘要：1、opcity 2、rgba（）例： <style> body{ background-color: rgba(215, 187, 187, 0.5); opacity: 0.5; } </style> html效果：阅读全文

posted @ 2022-07-18 09:21 香香鲲阅读(91) 评论(0) 推荐(0)

CSS：轮播图

摘要：完美轮播图实例：部分代码—— <style> * { padding: 0; margin: 0; } html { font-size: calc(100vw / 750); } .swiper { width: 100vw; height: 280.3rem; overflow: hidden 阅读全文

posted @ 2022-07-17 11:31 香香鲲阅读(133) 评论(0) 推荐(0)

CSS：calc计算属性-拓展

摘要：（1）calc() 只作用于属性值你唯一可以使用calc()函数的地方是在值中。 .el { font-size: calc(3vw + 2px); width: calc(100% - 20px); height: calc(100vh - 20px); padding: calc(1vw + 阅读全文

posted @ 2022-07-17 11:29 香香鲲阅读(204) 评论(0) 推荐(0)

CSS：文本效果（white-space、overflow、text-overflow）

摘要：（1）white-space 设置元素对内容中的空格的处理方式值描述 normal 默认。文本空白换行会被浏览器忽略。 pre 保留文本原样式比如空格或换行 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。 pre-wrap 保留空白符序列，保留换行符。如果文本超出容阅读全文

posted @ 2022-07-17 11:27 香香鲲阅读(283) 评论(0) 推荐(0)

CSS：移动端布局（视口，rem单位（视窗单位））

摘要：移动端布局（1）布局概念 1. 静态布局直接使用px作为单位不推荐不会适应屏幕 2. 流式布局宽度使用%百分比，高度使用px作为单位通常还会加上最大值和最小值 3. 自适应布局创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media媒体查询来切换多个布局 <meta n 阅读全文

posted @ 2022-07-17 11:20 香香鲲阅读(534) 评论(0) 推荐(0)

CSS3：多媒体查询 Media Queries

摘要：@media可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则，实现适应显示。媒体查询可用于检测很多事情，例如： viewport(视窗) 的宽度与高度设备的宽度与高度朝向 (智能手机横屏，竖屏) 。分辨率目前很多针对苹果手机，Android 手机，平板等设备都会阅读全文

posted @ 2022-07-17 11:16 香香鲲阅读(133) 评论(0) 推荐(0)

CSS3：弹性盒子-Flexbox

摘要：CSS3弹性盒子 -Flexbox display:flex; 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 flex-direction:指定主轴的方向；：column；列：row；水平，左->右：column-reverse ：row- 阅读全文

posted @ 2022-07-17 11:12 香香鲲阅读(65) 评论(0) 推荐(0)

CSS3：多列显示

摘要：CSS3多列显示（流式布局） column-count：指定某个元素应分为的列数数值/auto； column-width：指定列的宽度； length/auto； cloumn-span：指定某个元素应该跨越多少列； none/allnone/all； column-gap：指定列之间的间隙；阅读全文

posted @ 2022-07-17 11:06 香香鲲阅读(65) 评论(0) 推荐(0)

CSS3：动画：animation

摘要：CSS3动画：animation animation：动画名字所需时间运动曲线延迟时间循环次数(n>0 整数/无限次infinite) 反省运动； animation:mymove(name) 3s ease-in-out 1s reverse（反向） alternate（交替效果） alt 阅读全文

posted @ 2022-07-17 11:05 香香鲲阅读(65) 评论(0) 推荐(0)

CSS3：转换transform（平移，旋转，缩放，倾斜，透视）

摘要：CSS3转换：是元素改变形状、尺寸和位置一种的效果； transform： translate() 平移例：水平X轴 -translateX（200px）垂直Y轴 -translateY（200px） X、Y轴同时设置上一个会被下一个覆盖；同时写： transfrom：translate（阅读全文

posted @ 2022-07-17 11:04 香香鲲阅读(718) 评论(0) 推荐(0)

CSS3：过渡 transition

摘要：transition：property（要过渡的属性）-duration（花费的时间）-timing-function（运动曲线）-delay（延迟时间）例： transition：all（所有的属性都变化） 2s linear 2s； transition：width 2s linear，hei 阅读全文

posted @ 2022-07-17 11:04 香香鲲阅读(65) 评论(0) 推荐(0)

CSS：盒子定位居中

摘要：盒子定位居中：文字居中：text-align：center（inline inline-block）单行文本在盒子垂直居中：line-height：盒子的高度；盒子在父盒子中水平居中：margin ： 0 auto；盒子在父元素中水平垂直居中：一般情况下，设置父元素相对定位；子元素绝对阅读全文

posted @ 2022-07-17 10:56 香香鲲阅读(287) 评论(0) 推荐(0)

CSS：隐藏元素的方式

摘要：隐藏元素的方式： 1、display：none；真实隐藏后元素不在占空间，子元素一起隐藏；子元素不能通过设置display进行反隐藏 2、visibility：visible；显示 hidden；隐藏 3、opacity：0；透明隐藏元素；还是会占据空间；（0-1：1）；子元素不能通过设置opaci 阅读全文

posted @ 2022-07-17 10:55 香香鲲阅读(215) 评论(0) 推荐(0)

CSS：定位，边偏移

摘要：定位：定位模式-position： static：静态定位标准文档流表现形式一样 fixed：固定定位相对于body进行定位 -不写偏移量；脱离文档流；不再是父元素的100%； top:0️⃣ relative：相对定位特性：一般用在父元素上；默认宽度依旧是父元素的100%；相对于阅读全文

posted @ 2022-07-17 10:42 香香鲲阅读(443) 评论(0) 推荐(0)

CSS：标准盒模型、IE盒模型（面试题）

摘要：页面布局的本质是盒子（box），是 CSS 布局的对象和基本单位，一个页面就是由 n 个盒子组成的。一个基本的盒模型，包括 content（width/height）、padding、border、margin。盒模型分成两类：标准盒子模型和 IE 盒子模型。标准盒模型的 width 指 co 阅读全文

posted @ 2022-07-17 10:40 香香鲲阅读(79) 评论(0) 推荐(0)

CSS：设置边框三角形

摘要：边框三角形 border:大小-线性- 透明（transparent）宽高为零背景颜色为边框颜色具体属性可查看：https://www.cnblogs.com/LIXI-/p/16486047.html 阅读全文

posted @ 2022-07-17 10:33 香香鲲阅读(133) 评论(0) 推荐(0)

CSS：外边距盒子水平居中，外边距合并-同层级

摘要：外边距盒子水平居中在父元素中居中：上下0px；左右auto；必须满足两个条件： 1 必须是块元素； 2 盒子制定了宽度；因为块元素的宽度默认是父元素的100% auto 左右外边距平分父元素宽度空间方法：只需要给左右的外边距都设置为auto，就可以使块级元素水平居中。margin: 0 a 阅读全文

posted @ 2022-07-17 10:30 香香鲲阅读(217) 评论(0) 推荐(0)

CSS：边框border

摘要：双实线：double 单实线：solid 点线：dotted 虚线：dashed 边框：上边框总体设置： border-top-width： border-top-color： border-top-style：右边框： border-right-width： border-right-colo 阅读全文

posted @ 2022-07-17 10:29 香香鲲阅读(253) 评论(0) 推荐(0)

CSS：盒子阴影

摘要：盒子阴影： box-shadow：水平位置垂直位置模糊距离阴影尺寸扩大/缩小阴影阴影颜色内/外阴影; h-shadow 水平（必填）：允许负值 v-shadow 垂直（必填）：允许负值 blur 模糊距离（可选）值越高，越模糊； spread 尺寸（可选） color 颜色(默认：黑色) 阅读全文

posted @ 2022-07-17 10:28 香香鲲阅读(56) 评论(0) 推荐(0)

CSS：凹凸文字，空心文字，精灵图（面试题），盒模型

摘要：凹凸文字 class=‘ao’凹 class=‘to’凸 text-shadow：空心文字 -<p> -webkit-text-fill-color: 颜色; -webkit-text-stroke-color: 颜色; -webkit-text-stroke-width: 大小; 精灵图(雪碧图阅读全文

posted @ 2022-07-17 10:15 香香鲲阅读(131) 评论(0) 推荐(0)

CSS：CSS背景及属性-background

摘要：CSS背景 1、background-color：背景颜色属性： transparent；背景透明 2、background-image：背景图片属性： url()；图片地址 3、background-repeat：背景平铺属性： no-repeat；不重复 repeat；xy方向都平铺 re 阅读全文

posted @ 2022-07-17 10:11 香香鲲阅读(426) 评论(0) 推荐(0)

CSS：标签的显示模式及转换

摘要：标签的显示模式及转换块级元素：宽高默认由内容撑开。宽是父容器的100%。行内元素：默认宽高是由内容撑开的行内块级：可以设置宽高，不会引起换行标签显示模式转换： display 行内元素：inline 行内块级：inline-block（行内转成行内块级）块级：block img、input 阅读全文

posted @ 2022-07-17 10:11 香香鲲阅读(95) 评论(0) 推荐(0)

CSS：CSS层叠性，基础优先级，优先级权重

摘要：CSS层叠性：如果权重高，则覆盖另一个属性；如果权重相同，使用就近原则；基础优先级：！important 是提高单行样式的语法，空格和css属性值隔开进行书写！important>行内>内部=外部>id选择器>类选择器>标签选择器>*通配符>继承>浏览器默认继承 *font具有继承性优阅读全文

posted @ 2022-07-17 10:07 香香鲲阅读(101) 评论(0) 推荐(0)

CSS：属性选择器，伪元素选择器

摘要：属性选择器：选择器含义 [attr] 存在attr属性即可 [attr=val] 属性值完全等于val [attr*=val] 属性值里包含val字符并且在“任意”位置 [attr^=val] 属性值里包含val字符并且在“开始”位置 [attr$=val] 属性值里包含val字符并且在“结束”位阅读全文

posted @ 2022-07-17 10:05 香香鲲阅读(45) 评论(0) 推荐(0)

CSS：伪类选择器，复合选择器

摘要：@import 引入css 需要写在style标签中 @import：url（../） input>type>color:取色器 1. id属性只能有一个id值 class属性可以有多个class值 2. id属性值不能使用别人已使用的 class可以使用的多类选择器 3. # . 结构伪类选择器阅读全文

posted @ 2022-07-17 10:04 香香鲲阅读(135) 评论(0) 推荐(0)

CSS：字体属性，基础选择器

摘要：字体属性： font-size: smlaller;x-small;xx-small;large;x-large;xx-large; 16px:浏览器默认大小 px：像素；相对长度单位，相对于2560px电脑分辨率 pt：点；1/72英寸 in：英寸 font-weight：（100~700/90 阅读全文

posted @ 2022-07-17 09:58 香香鲲阅读(116) 评论(0) 推荐(0)

CSS：CSS样式写法

摘要：行内样式：直接使用style 内部样式：选择器{键值} 外部样式：CSS文件；标签选择器{}=元素选择器；通过link标签引入行内样式>内部=外部，覆盖现象，就近原则，后来者居上阅读全文

posted @ 2022-07-17 09:55 香香鲲阅读(118) 评论(0) 推荐(0)

CSS：embad标签（加载音频），video标签（加载视频）

摘要：embad标签: 属性： src： width： height： embad：加载音频属性： src：音频资源的地址 controls：显示控件 muted：静音播放 loop：循环播放 autoplay：自动播放 source：解决浏览器的兼容-src IE11与chrome内核相同 video 阅读全文

posted @ 2022-07-17 09:54 香香鲲阅读(932) 评论(0) 推荐(0)

CSS：不常用标签，H5新增属性，input的属性值

摘要：<lable for=''> <input id=''></input>> </lable> <select> <option value='0'></option> <option value='1'></option> </select> button标签表示一个按钮但是如阅读全文

posted @ 2022-07-17 09:48 香香鲲阅读(132) 评论(0) 推荐(0)

CSS：标签及其属性，锚点设计，特殊字符，列表

摘要：块级标——head,h1-h6,div（块级）+span(无修饰),span(行内元素),-双标签 p-paragraph段落标签、段落标签-有段前与段后,i,b,s,u,em,strong,del,ins,br（换行标签-break-单标签-不是块级）,hr（水平线-单标签）,（倾斜，加粗，删除线阅读全文

posted @ 2022-07-17 09:40 香香鲲阅读(266) 评论(0) 推荐(0)

CSS：标签

摘要：1、标题标签<h> 2、段落标签<p> 只能嵌套内联元素（行内元素：span、i 、 s 、u 、em、 strong 、ins 、del）不能嵌套块元素（可以设置宽高，引起换行的标签）和自己自动换行，无其他样式 3、首行缩进 %nbsp 空格 4、水平线标签 <hr> 单标签：meta、br 5 阅读全文

posted @ 2022-07-17 09:17 香香鲲阅读(89) 评论(0) 推荐(0)

CSS：入门了解

摘要：使用软件：vscode VScode的使用快捷键及基础常识： ctrl+f:搜索拆分:向右拆分(分屏) 了解笔试题:面试题:口述题注释: ctrl+? f5:刷新页面快捷键: ! +enterhtml: 5! +tab html: 5! +tab en:英语 fr法语 zh:中文 zh-CN: 阅读全文

posted @ 2022-07-17 09:14 香香鲲阅读(43) 评论(0) 推荐(0)

CSS：实现垂直水平居中的方法

摘要：1、水平居中 text-align ：center; 适用于行内元素 margin：0 auto; 适用于块级元素 dispaly：flex; justify-content:center; 适用于行内元素和块级元素 margin-left:50%;transform:translateX(-50% 阅读全文

posted @ 2022-07-16 21:24 香香鲲阅读(194) 评论(0) 推荐(0)

DOM：透明模态弹窗

摘要：简单实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte 阅读全文

posted @ 2022-07-16 17:43 香香鲲阅读(89) 评论(0) 推荐(0)

DOM：JSON数据导入并在网页显示

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2022-07-16 16:03 香香鲲阅读(201) 评论(0) 推荐(0)

DOM：元素的增删改查发、克隆

摘要：对文档树中的节点们可以用js进行增删改查：增： 1、创建元素:这个元素是不会渲染到页面上的,它不在DOM中传入字符串（标签的名字） var box=document.createElement("div") 2、添加到文档树中,x.appendChild(y) 把y节点对象添加到x节点中 bo 阅读全文

posted @ 2022-07-16 10:56 香香鲲阅读(195) 评论(0) 推荐(0)

DOM：信息录入系统

摘要：实现简单的信息录入系统：方案一：简单实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name= 阅读全文

posted @ 2022-07-16 09:35 香香鲲阅读(258) 评论(0) 推荐(0)

DOM：手机底部导航切换效果

摘要：总结了两种方法：方法一： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> </head> <body> <style> 阅读全文

posted @ 2022-07-14 23:25 香香鲲阅读(71) 评论(0) 推荐(1)

DOM：表单登陆验证

摘要：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> </head> <body> <style> #p1, #p2 { vis 阅读全文

posted @ 2022-07-14 21:19 香香鲲阅读(48) 评论(0) 推荐(0)

DOM：点击图片更换背景图片（换肤）

摘要：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> </head> <body>  <style> bo 阅读全文

posted @ 2022-07-14 19:53 香香鲲阅读(318) 评论(0) 推荐(0)

DOM：表格的行点击变换

摘要：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> <style> table { border: 1px red solid 阅读全文

posted @ 2022-07-14 19:14 香香鲲阅读(44) 评论(0) 推荐(0)

DOM：表格的列点击变换

摘要：表格的列点击变换简单实例代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> <style> table { bord 阅读全文

posted @ 2022-07-14 19:07 香香鲲阅读(44) 评论(0) 推荐(0)

DOM：表格隔行变色

摘要：表格隔行变色实例代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> <style> table{ border: 1 阅读全文

posted @ 2022-07-14 18:51 香香鲲阅读(56) 评论(0) 推荐(0)

JS：通过方法获取节点，元素属性等

摘要：为什么学习获取元素的方法和属性？操作页面方法： document.getElementById('写id名不是id选择器') 获取id元素速度最快（标签对象挥着类） document.getElementsByClassName(‘写类名不是类选择器’) 获取类名元素（类数组，装的元素）阅读全文

posted @ 2022-07-14 18:34 香香鲲阅读(1106) 评论(0) 推荐(0)

DOM：概述

摘要：什么是DOM操作文档对象模型 DOM 是document object model 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口把文档中的代码翻译成一个对象模型在这个模型中所有相关的标签属性注释文本等等12种数据都翻译为一种类型的对象统称节点对象这些对象之间在文阅读全文

posted @ 2022-07-14 17:23 香香鲲阅读(39) 评论(0) 推荐(0)

JS：promise笔试题

摘要：笔试题： setTimeout(() => { console.log(0); }); new Promise(resolve => { console.log(1); setTimeout(() => { resolve(); var p1=new Promise((n1,n2)=>{n1(20) 阅读全文

posted @ 2022-07-14 17:14 香香鲲阅读(226) 评论(0) 推荐(0)

JS：promise-任务队列和事件循环

摘要：事件循环是什么首先，JavaScript是一门单线程的语言，这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环在JavaScript中，所有的任务都可以分为同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行异步任务：异步执行的任务，比如ajax网络请求，setTim 阅读全文

posted @ 2022-07-14 16:44 香香鲲阅读(378) 评论(0) 推荐(0)

JS：异步编程-promise

摘要：promise对象（1）概述 promise是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无阅读全文

posted @ 2022-07-14 16:15 香香鲲阅读(253) 评论(0) 推荐(0)

JS：类-Class

摘要：class类类是用于创建对象的模板。我们使用 class 关键字来创建一个类，类体在一对大括号 {} 中，我们可以在大括号 {} 中定义类成员的位置，如方法或构造函数。每个类中包含了一个特殊的方法 constructor()，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的阅读全文

posted @ 2022-07-12 23:54 香香鲲阅读(5757) 评论(0) 推荐(0)

JS：箭头函数

摘要：箭头函数（1）箭头函数定义箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体(参数) => {函数体} 基本语法实例： //普通函数 var f = function(a){ return a; } f(1); //1 //箭头函数 var f = a => a f 阅读全文

posted @ 2022-07-12 22:15 香香鲲阅读(19316) 评论(0) 推荐(5)

JS：笔试题（new）

摘要：function fn() { rank = function () { alert("艾伦") } console.log(this); return this } fn.rank = function () { alert("黛西") } fn.prototype.rank = function 阅读全文

posted @ 2022-07-12 19:28 香香鲲阅读(185) 评论(0) 推荐(0)

JS：ES5、ES6数组的方法总结（面试题）

摘要：*加粗为ES6方法 Array.of()：将参数中所有值作为元素形成数组。 Array.from()：将类数组对象或可迭代对象转化为数组 find()：查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。 findIndex()：查找数组中符合条件的元素索引，若有多个符合条件的元素，阅读全文

posted @ 2022-07-12 16:01 香香鲲阅读(236) 评论(0) 推荐(0)

JS：ES6对象新增及方法

摘要：新增 *加粗常用 1、变量声明：const和let 2、箭头函数 3、二进制和八进制字面量 4、对象和数组解构 Object.is(value1, value2) map和reduce map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。 reduce{}：接收一个函数（必阅读全文

posted @ 2022-07-12 12:44 香香鲲阅读(990) 评论(0) 推荐(0)

JS：ES6数组新增方法

摘要：数组（1）数组创建 Array.of()：将参数中所有值作为元素形成数组。 console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] // 参数值可为不同类型 console.log(Array.of(1, '2', true)); // [1, '2' 阅读全文

posted @ 2022-07-12 12:39 香香鲲阅读(322) 评论(0) 推荐(0)

JS：ES6-新增数值方法

摘要：数值（1）数值的表示二进制表示法新写法: 前缀 0b 或 0B 。 console.log(0b11 3); // true console.log(0B11 3); // true 八进制表示法新写法: 前缀 0o 或 0O 。 console.log(0o11 9); // true con 阅读全文

posted @ 2022-07-12 12:35 香香鲲阅读(127) 评论(0) 推荐(0)

JS：ES6-字符串

摘要：字符串（1）子串的识别 ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法 includes()：返回布尔值，判断是否找到参数字符串。 startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。 endsWith()：返回布尔值，参数字符串是阅读全文

posted @ 2022-07-11 22:49 香香鲲阅读(180) 评论(0) 推荐(0)

JS：Map

摘要：Map Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。 Map和Object的区别： - 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。- Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。- Map 的阅读全文

posted @ 2022-07-11 21:17 香香鲲阅读(138) 评论(0) 推荐(0)

JS：Set

摘要：Set Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。 Set中的特殊值 Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待： +0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复； undefined 与 undefined 是恒等的，阅读全文

posted @ 2022-07-11 21:17 香香鲲阅读(294) 评论(0) 推荐(0)

JS：arr-map-set的转换

摘要：*Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。实例：数组转map:必须是二维数组 var arr=[[1,"hello"],[2,"h5"],[3,{name:"karen"}]] var m1=new Map(arr) console.log(arr,m 阅读全文

posted @ 2022-07-11 20:01 香香鲲阅读(412) 评论(0) 推荐(0)

JS：解构赋值

摘要：解构赋值（1）概述解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。（2）解构模型在解构中，有下面两部分参与：解构的源，解构赋值表达式的右边部分。解构的目标，解构赋值表阅读全文

posted @ 2022-07-11 18:22 香香鲲阅读(526) 评论(0) 推荐(0)

JS：let var const 区别

摘要：ES6新增加了两个重要的 JavaScript 关键字: let 和 const let 声明的变量只在 let 命令所在的代码块内有效（块级作用域、局部作用），ES6 推荐在函数中使用 let 定义变量，而非 var。 const 声明一个只读的常量，一旦声明，常量的值就不能改变。 *let：不存阅读全文

posted @ 2022-07-08 16:46 香香鲲阅读(73) 评论(0) 推荐(0)

JS：ES5、ES6区别？ES6版本如何更新（面试题）

摘要：一、ES5 ES6 区别？ 1、通过不同语法作答（1、es6新增了箭头函数，es5没有；2、ES6中新增了块级作用域，es5没有；3、ES6引入Class概念，不再像ES5一样使用原型链实现继承；4、ES6中可以设置默认函数参数，es5不行；5、ES6中新增了promise特性。） 2、优化性能阅读全文

posted @ 2022-07-08 16:18 香香鲲阅读(271) 评论(0) 推荐(0)

JS：正则表达式

摘要：正则表达式：Regular Expression 语法：（1）/正则表达式主体/ （2）双斜杠后边还可以加字母i、g、m，表达其属性 i （ignoreCase ）执行匹配时忽略大小写 g（global）执行全局匹配（查找所有匹配而非在找到第一个匹配后停止） m（multiline）执行多行匹配阅读全文

posted @ 2022-07-08 16:17 香香鲲阅读(128) 评论(0) 推荐(0)