- 博客(52)
- 收藏
- 关注
RSS订阅原创 day30Node.js web模块：服务端与客户端、互联网传输协议、
文章目录一1、服务端与客户端1.1什么是上网1.2享受服务的流程1.3服务器1.4客户端1.5url地址协议：服务器名称：端口号：路径：参数：1.6 域名与ip的关系2、互联网传输协议2.1协议分类2.1.1现实中的协议2.1.2互联网中的传输协议2.2Http协议工作原理2.2.1交互模型2.2.2请求消息2.2.3响应消息2.2.4请求方法2.2.5状态码3、Node创建服务器一__ dirname和 __filename注意：只要对文件或目录进行操作，大家要使用绝对路径 。（ 绝对地址动态化 ）
2021-03-22 21:50:46
245
原创 day29Node.js文件系统
文章目录一、文件系统/模块0.在node中的同步和异步风格1.文件操作1.0关于捕获同步的错误信息1.1 文件信息 fs.stat1.2 写入文件1.3 读取文件1.4 修改文件名称、可以操作文件名称1.5 删除文件2.文件夹操作2.1创建目录2.2读取目录2.3删除目录二、模块系统1.模块概述2.模块的分类2.1 内置模块/核心模块2.2 文件模块每一个js都是被一个匿名函数包起来的自定义模块代码示例1：代码示例2module.exports与exports之间的关系 。实战：封装一个去除左右空格的方法
2021-03-22 21:49:13
212
原创 day28Node.js基础：Node安装、运行与顶层对象、Buffer、模块系统、包和npm
文章目录一、Node简介1.前端与后台2.学习Node的目的3.为什么选择Node4.Node的特点5.Node适合的场景二、Node安装1.下载与安装2.常见cmd操作作用：3.环境变量三、Node运行与顶层对象1.Node的运行2.顶层对象3.全局变量四、Buffer1.常见进制简述2.Buffer的常见操作2.1基本使用2.2常见方法五、模块系统1.模块概述2.模块的分类2.1 内置模块/核心模块2.2 文件模块2.3 模块加载机制和Commonjs简述六、包和npm1.包的概念：2.npm3.npm
2021-03-22 21:46:48
837
原创 day27ES6语法：class、super、深/浅拷贝
文章目录一、class1.面向对象编程1.1 概念面向过程面向对象1.2 类1.3 对象2.class的基本使用3.constructor4.静态、成员(实例)属性/方法二、继承1.基本用法2.super的用法3.面向对象的应用场景3.1 封装公共方法3.2 框架中使用三、深/浅拷贝1.浅拷贝2.深拷贝的实现3.补充一、class1.面向对象编程1.1 概念面向对象是一种以对象为中心的编程思想。面向对象是相对于面向过程来讲的，面向对象把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模
2021-03-22 21:45:08
626
原创 day25ES6语法
文章目录2.第三阶段课程简介3.ECMASCript简介3.1 ES6与ES53.2 ES与JS的关系3.3 总结4.严格模式（了解）4.1 为什么有严格模式4.2 严格模式的特点二、let和const命令1.let命令1.1 基础用法1.2 let命令特点1.2.1 不存在变量提升与暂时性死区1.2.2 不能重复声明1.2.3 块级作用域1.2.4 let和循环2.const命令2.1 基础用法2.2 const特点及建议3.总结三、变量的解构赋值1.概念及意义2.数组解构2.1 完全解构2.2 不完全解
2021-03-22 21:41:20
311
原创 fs.readdirSync递归读取目录
const fs = require(‘fs’)function readdirectory(dir){let files = fs.readdirSync(dir)files.forEach( item=>{let filepath1 = dir + ‘\’ + itemlet stat = fs.statSync(filepath1)if(stat.isFile()){console.log(filepath1);}else{readdirectory(filepath1)}
2021-03-22 21:36:31
2425
原创 day24jQuery插件、zepto
文章目录插件常用插件网站使用过程自定义插件类级别对象级别zepto区别移动端事件插件常用插件网站jquery官网插件 https://plugins.jquery.com/百度—CSDNswiper https://www.swiper.com.cngithubjq22使用过程找用： 2.1 下载 2.2 文件拷贝到用的地方自定义插件类级别类级别:
2021-03-17 19:54:30
95
原创 day23对象、AJAX
文章目录动画show hide toggleslidefadeanimate$对象.animate(params, speed, easing, callback);jq对象.animate(params, options);队列isstopfinishdelayAJAX优缺点$.ajax$.get$.post跨域原理数据序列化动画show hide toggleshow: 显示 hide: 隐藏 toggle: 有就隐藏 没有就显示show/hide/toggle(speed, easing,
2021-03-17 19:53:20
89
原创 day22jQuery链式调用原理、元素三大宽高、操作节点、事件对象、事件绑定、命名空间、事件解绑、合成事件、extend（浅拷贝，深拷贝）
文章目录链式调用原理元素三大宽高操作节点创建节点追加节点父元素开头父元素末尾兄弟之前兄弟之后注意删除节点克隆节点替换节点事件对象事件绑定命名空间事件解绑one合成事件extend浅拷贝深拷贝链式调用原理链式调用: jq的方法都有返回值, 返回操作的对象或被操作以后的对象// var mn = $('.box');// console.log(mn);// var a = mn.css('background', 'red');// console.log(a);// var b = a.pre
2021-03-15 21:44:27
179
原创 day21jQuery的基础知识
文章目录jQuery介绍引入ready使用区别冲突解决对象互转选择器基础选择器层级选择器基础过滤选择器属性过滤选择器子元素选择器表单和表单属性过滤选择器查找查找子节点查找兄弟节点查找父节点过滤节点操作属性操作类名操作样式操作内容操作闭合标签获取设置操作单标签获取设置循环jq方法特点jQuery介绍理念： 写得少 做得多 (write less, do more)优点: \1. 轻量级 \2. 可靠的事件处理机制 \3. 兼容 \
2021-03-15 21:42:39
147
原创 day20JavaScript中的移动端事件，Touch
文章目录移动端移动端问题移动端事件事件对象Touch事件绑定事件委托事件对象事件移动端移动端问题由于浏览器的模拟器时好时坏，移动端一般不适用on来绑定事件, 用事件绑定的方式添加pc端事件在移动端有300ms的延迟如果在移动端的元素下方还有一个元素，如果点击的时候，上层元素消失，这时点击事件会漂移到下层元素, 会触发点击事件避免此种布局按住时间超过300msvar div = document.querySelector('div');// 原生js pc// 由于浏
2021-03-15 21:41:27
110
原创 day18JavaScript中的audio和video
文章目录audio常见属性常见事件常见方法video常见属性常见方法常见事件audioaudio: 音频标签常见属性var audio = document.querySelector('audio');console.log(audio);console.log(audio.duration); // 音频时长 以s为单位console.log(audio.paused); // 暂停状态console.log(audio.ended); // 结束状态console.log(aud
2021-03-15 21:40:14
624
原创 day17 localStorage存储数据 获取数据 删除数据
文章目录localStorage存储数据获取数据删除数据注意localStoragelocalStorage: 存储数据到本地存储数据对象.属性名 = 属性值;setItem('属性名， ‘属性值’);// 对象.属性名 = 属性值;localStorage.username = '1332222111';// setItem('属性名， '属性值');localStorage.setItem('pass', '123123');获取数据对象.属性名getItem(‘属性名
2021-03-15 21:39:07
152
原创 day15AJAX
文章目录AJAX概念执行方式readyStatestatusConten-type:getpost封装区别操作数据evalparsejson数据AJAX概念ajax用来创建快速动态交互式页面的技术; 通过与后台少量的数据交换, 更新页面 在页面不刷新的基础上 更新页面上的某些数据 ajax: Asynchronous javascript and xml 异步 js 和 xml执行方式同步: 在数据请求过程中, 必须等待数据返回
2021-03-15 21:37:38
81
原创 day12JavaScript实现无缝轮播
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> * { margin: 0; padding: 0; list-style: none; } div#cont {
2021-03-15 21:35:07
65
原创 day11事件对象、事件对象属性
文章目录事件对象概念事件对象属性事件对象概念事件对象： 当事件发生的时候，浏览器会将相关事件的信息存储在一个对象中，这个对象就是事件对象 事件相关 鼠标相关 ie/chrome/高版本ff: window.event 低版本ff: 事件处理函数的第一个形参document.onclick = function(ev){ console.log(window.event); // MouseEvent // console.log(ev);
2021-03-15 21:31:17
73
原创 day10JavaScript基础知识：表单事件及方法、BOM、client、offset、scroll、懒加载
文章目录表单快速获取表单元素表单事件重置事件: onreset提交事件: onsubmit聚焦事件: onfocus失去焦点: onblur内容改变 onchangeoninput/onpropertychange表单方法submitresetfocusblurselectBOM概念系统对话框alertconfirmpromptopencloselocationhistorybackforwardgonavigator元素的三大宽高clientoffsetscroll总结懒加载表单快速获取表单元素\1
2021-01-16 09:47:12
172
原创 day09JavaScript基础知识：节点、表格快速获取
文章目录节点DOM节点属性获取子节点获取父节点获取其他节点首节点尾节点上一个兄弟下一个兄弟创建节点追加节点追加到父节点插入到某个节点之前克隆节点删除节点删除子节点删除自己及其中节点替换节点替换子节点替换自身属性操作表格获取节点DOMDOM w3c提供用来操作页面的标准接口页面在生成的时候, 会形成一个树状结构, 每个标签都在树状结构的某一个位置, 称之为节点 这个树状结构称之为DOM树节点属性nodeName: 节点名称 标签–LI P DIVnodeType: 1–12的数字 1–标签 2
2021-01-16 09:45:00
140
原创 day08JavaScript基础知识：数组、中文排序、快速排序
文章目录数组概念创建数组字面量new关键字创建长度 length栈方法pushpopunshiftshiftsplice语法去重排序选择排序冒泡排序sort数组方法joinsliceindexOf/lastIndexOfreverseconcat迭代方法everysomefiltermapforEach中文排序快速排序数组概念数组: 是一个用来存放不定数量不定数据类型的数据的容器 索引: 下标 元素: 值创建数组字面量字面量创建: var 变量 = [值, 值, 值,
2021-01-16 09:43:36
362
原创 day07JavaScript基础知识：时间对象、Moment、字符串对象
文章目录时间对象对象的分类创建时间创建当前时间获取其他格式的时间获取单个时间Moment了解下载地址创建时间格式化时间获取和设置时间其他方法查询字符串对象概念创建方式属性和方法length指定下标字符指定下标字符的编码字符串比较查找indexOflastIndexOf截取substringslicesubstr转换大小写toUpperCasetoLowerCase去除左右空格替换分割和拼接splitjoin时间对象对象的分类原生对象: String Number Boolean Object Arr
2021-01-16 09:41:57
1178
原创 day06JavaScript基础知识：定时器、write、Math
文章目录定时器概念分类延迟定时器间隔定时器清除定时器writeMath定时器概念定时器: 让一段代码延迟或者是间隔多长时间之后去执行一次分类延迟定时器延迟定时器：setTimeout(函数, 时间) 时间：毫秒 ms 1s = 1000ms 让一段代码在等待一段时间执行一次 一次性广告 关不掉的广告setTimeout(function(){ console.log(this); // window console.log(1);}
2021-01-16 09:40:24
113
原创 day05JavaScript基础知识：函数
文章目录函数函数的参数函数的问题作用域作用域的分类变量和函数分类作用域链预解析(变量提升)例子一例子二例子三例子四例子五例子六例子七函数返回值返回值类型获取非行间样式函数封装函数函数的参数形参: 形式参数 接收实参传递过来的数据 function后面的()实参: 具体的数据 传递给形参的数据 调用的()arguments: 实参的集合 每个函数都有 当形参和实参的个数不确定的时候所有的数据类型都可以作为函数的参数 但是一般不用null和undefined 易于出错number
2021-01-09 14:02:29
98
原创 day04JavaScript基础知识：this、自定义属性、自定义索引、网站换肤、函数
文章目录this从属关系概念this的指向this的使用场景场景一场景二自定义属性概念注意使用场景一自定义索引网站换肤函数函数概念声明函数函数声明:表达式声明区别适用范围有目的的函数用作事件处理函数作为对象的方法封装复用函数的参数多个参数argumentsthis从属关系整个页面document来获取 document是父级 祖宗： window 页面中所有的内容都属于window声明的变量、函数都是window的一个属性window = { abc: 1, a
2021-01-07 21:26:47
170
原创 day03JavaScript基础知识：流程控制语句
文章目录流程控制语句分类分支语句ifif elseif else 嵌套switch注意获取元素的方式方式类型通过标签获取通过类名获取区别循环for语法调试方式执行步骤语法二for-inwhiledo-while区别其他语句breakcontinue流程控制语句分类顺序语句: 代码从上往下逐行解析分支语句(条件): 根据条件选择某一条分支执行 if if else switch循环语句: 让一段代码执行固定的次数 for while do-while for-in其他语句： break; con
2021-01-06 21:24:58
598
原创 day02JavaScript基础知识：数据类型用法和举例
文章目录数据类型分类检验数据类型number分类注意NaN的特性stringbooleannullundefinedobjectarrayfunction数组的应用数据存储强制转换为什么要强制转换numberNumberparseIntparseFloatisNaNstringtoStringStringBoolean运算符分类算术运算符赋值运算符比较运算符逻辑运算符&&||!三目运算符隐式转换day02数据类型分类基本数据类型: number string boolean null
2021-01-06 21:21:30
487
原创 day01JavaScript基础知识
文章目录Javascriptjs的历史js和es的关系js的概念特点组成部分引入方式行内内嵌外链注释调试语言alertconsole.log事件三部曲window.onload事件over与enter区别变量概念声明方式命名规范场景操作表单内容操作闭合标签内容innerTextinnerHTML区别变量拼接操作属性操作id操作class操作src操作样式单个属性操作多个属性操作Javascriptjs的历史javascript 为了处理表单的验证1995年，网景公司 布兰登·艾奇 10天
2021-01-04 20:18:12
174
原创 day19grid网格布局
day19grid网格布局Grid 网格布局概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"
2020-12-30 19:48:41
105
原创 day18Filter 函数
文章目录Filter 函数CSS 语法Filter 函数CSS 语法 filter:本身生效**backdrop-filter：下层标签生效**filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();Filter描述none
2020-12-30 19:47:41
73
原创 day17响应式页面布局
文章目录day17响应式响应式布局概念技术要点day17响应式响应式布局概念2010 年 5 月 由国外著名网页设计师 Ethan Marcotte 所提出页面的设计与开发应当根据用户行为以及设备环境 ( 系统平台、屏幕尺寸、屏幕定向等 ) 进行相应的响应和调整。技术要点标签设置<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
2020-12-28 20:02:35
70
原创 day15移动端项目
文章目录day15移动端项目移动端浏览器及内核分析viewport移动端布局解决方案day15移动端项目移动端浏览器及内核分析手机浏览器种类：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器， 搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助 研发的内核，就像国内的手机操作系统都是基于Android修改的。viewportwidth:设置viewport的宽度（即之前所提及
2020-12-26 15:37:49
125
原创 day14CSS3实现银河系动态效果
<style> body{ background-color: #000; perspective: 2000px; } .ul1{ list-style-type: none; width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -1
2020-12-24 21:27:05
599
原创 day13CSS3实现旋转立方体
body{ perspective: 2000px; } .wrap{ width: 300px; height: 300px; border: 1px solid red; margin: 100px auto; position: relative; transform-style: preserve-3d; animation: run 5s...
2020-12-24 21:22:33
75
原创 day14弹性盒子和预处理Less语言
文章目录day14弹性盒子和预处理弹性盒子预处理day14弹性盒子和预处理弹性盒子弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间。displayflexinline-flex设置flex布局后，子元素的float、clear和vertical-align属性将失效.box{ display: flex; }.box{ display: inline-flex; }
2020-12-24 21:18:00
171
原创 day13CSS3过渡、变换与动画、2D、3D
文章目录day13CSS3过渡、变换与动画CSS3过渡属性CSS3的 transform 属性浏览器支持：定义变形原点CSS3动画属性day13CSS3过渡、变换与动画CSS3过渡属性通过CSS3可以在不使用Flash动画或JavaScript的情况下，为元素从一种样式变 换为另一种样式时添加效果。而CSS3过渡就是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容：规定你希望把效果添加到哪个CSS属性上 规定效果的时长transition-property 规定设置
2020-12-23 20:32:17
143
原创 day12CSS3新增选择器、CSS3常用边框属性、CSS3背景属性、CSS3渐变属性、用户界面、多列布局
文章目录day12CSS3简介CSS3简介CSS3新增选择器CSS3常用边框属性CSS3背景属性CSS3渐变属性用户界面浏览器的私有前缀(兼容高版本，提前兼容)多列布局day12CSS3简介CSS3简介CSS3是最新的CSS标准。CSS3新增选择器属性选择器以box开头<style> div[class^="box"] { background:red; }</style><div class="box">
2020-12-22 20:51:33
314
原创 day11pattern校验数字、字符、特殊需求的表达式、multiple属性、list属性
pattern属性<input type="text" name="username" pattern="[0-9]">校验数字的表达式1 数字：^[0-9]*$2 n位的数字：^\d{n}$3 至少n位的数字：^\d{n,}$4 m-n位的数字：^\d{m,n}$5 零和非零开头的数字：^(0|[1-9][0-9]*)$6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$7 带1-2位小数的正数或负数：^(\-)?..
2020-12-21 21:21:51
859
原创 day11HTML5中新增的布局标签、新增的结构标签、新增的其他标签、HTML5兼容、HTML5已移除的标签、新增多媒体标签、新增表单元素属性
day11HTML5基础HTML5中新增的布局标签html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签 （更加语义化）header标签<header>这里是头部区</header>footer标签<footer>这里是页脚区</footer>main标签<main>这里是主体区</main>nav标签&l
2020-12-21 21:19:49
103
原创 day10真等高布局实现
<style> *{ margin: 0; padding: 0; } .a{ width: 900px; background-color: red; margin: 0 auto; overflow: hidden; } .b{ width: 900px; background-color: green; ma
2020-12-18 14:08:13
74
原创 day10假等高布局实现
<style> *{ margin: 0; padding: 0; } .wrap{ width: 900px; margin: 0 auto; border: 5px solid black; overflow: hidden; } .box1{ width: 300px; background-color: red;
2020-12-18 14:07:25
58
原创 day10双飞翼布局实现
<style> *{ margin: 0; padding: 0; } .middel{ width: 100%; height: 400px; background-color: gold; float: left; } .left{ width: 200px; height: 400px; background
2020-12-18 14:06:25
55
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人