- 博客(55)
- 收藏
- 关注
RSS订阅原创 node.js系统模块
Node.js规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到模块内部可以使用exports对象进行成员导出，使用require方法导入其他模块向模块外部导出数据 两种写法是等价的 指向同一个内存空间当exports对象和module.exports对象指向的不是同一个对象时以module.exports为准系统模块：内置模块 querystring内置模块 os路径pathBuffer 前后台数据交互格式只能用stri
2020-09-22 09:55:24
215
原创 Node.js的系统模块の路径操作
为什么要进行路径拼接1.不同的操作系统的路径分割符不统一2.Window上是 \ /3.Linux上是 /（通常被用作网站服务器）路径拼接语法// path.join('路径','路径'....)// 导入path模块const path = require('path');// 路径拼接let finialPath = path.join('itcast', 'a', 'b', 'c.css');console.log(finialPath);// itcast\a\b\
2020-09-14 20:17:38
173
原创 Node.js的系统模块の文件操作
打开当前文件夹 shift加鼠标右键点击在此处打开PowerShell然后输入node 空格 文件目录导出和导入//exports.js// 模块内部定义变量和函数let num = 10;let init = name => console.log(`${name}是一条傻狗`);// 向模块外部导出数据 两种写法是等价的 指向同一个内存空间exports.num = num;module.exports.init = init;//require.js// 在r
2020-09-09 09:05:16
197
原创 安装node.js 以及安装出现的问题
安装官网：https://nodejs.org/en/LTS = Long Term Support长期支持版 稳定版Current拥有最新特性 实验版所以我们使用稳定版开发 选择第一个根据自己电脑品牌和型号选择对应的安装包点击下载 然后开始傻瓜式安装 一直下一步（ 在安装目录需要注意不要使用中文）下载完检查一下node运行环境是否安装成功：搜索WindowsPowerShell 这个就是系统的命令行工具只要显示版本就表示安装成功node环境安装失败的解决办法：1.弹出如下弹框
2020-09-07 19:24:28
3395
原创 js中的事件循环
事件循环event loop：由于主线程不断重复获得任务，执行任务，在获取任务，在执行，所以这种机制被称为事件循环任务队列:在主线程之外还存在一个任务队列，任务队列中存放着需要异步执行的内容。当主线程运行完毕之后，就会去执行任务队列中的任务（不断的重复扫描）直到任务队列清空。事件队列在不同的宿主环境中有差异， 浏览器的环境中， 会把事件队列分为两种1. 宏队列 定时器的回调、 事件的回调， http回调 等都是加入到宏队列中2. 微队列(vip) promise， MutationObser
2020-09-02 20:52:57
1165
3
原创 js对象方法（API）详解
hasOwnProperty(propertyName String)有没办法区分对象的那些属性是自己的，那些是共有属性（从父对象哪里继承来的）？hasOwnProperty()是检查指定的属性是不是自有属性的，如果要检查是共有属性的话，还需要排除没有这个属性 共有属性是指在原型对象中声明的属性参数：propertyName String类型指定的属性名称返回值hasOwnProperty()函数的返回值为Boolean类型。如果对象object具有名称为propertyName的属性
2020-09-01 20:57:19
687
1
原创 jquery实现懒加载
jquery方法的思想：页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascript设置了图片路径，浏览器才会发送请求。懒加载先在页面中把需要延迟加载的图片统一使用一张占位图进行占位，把真正的路径存在元素data-src属性里。页面加载完成后，通过scrollTop判断图片是否在用户的视野，如果在，则将 data-src的值取出来存放到src中。在滚轮事件中重复判断图片是否进入视中，如果在，则将data-url的值取出来存放到src中。html lang="e
2020-08-26 15:49:02
1772
原创 JS实现懒加载
懒加载及应用场景懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。实现的思路：给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-src），监听scroll事件，当图片出现在可视区时，将data-src值赋值给s
2020-08-25 18:47:17
788
1
原创 ajax的应用场景
创建对象这里是引用XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新// 1.创建 ajax请求 依赖一个对象xhr对象 var xhr; if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera,
2020-08-19 19:22:05
826
原创 ajax是什么？为什么使用？怎么理解？
前言：要学习一门市、技术之前，首先我们要了解一下他是什么，为什么使用，有什么好处，该怎么理解。现在就从下文开始了解吧什么是ajax:Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的的网页开发技术。是一种用于提高浏览器和服务器交互效率的快速创建动态网页技术。能够替换传统传统的web交互模式。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使
2020-08-17 20:12:50
2488
原创 js深克隆和浅克隆
一、为什么要克隆？答案是：克隆的对象可能包含一些已经修改过的属性,保留着你想克隆对象的值，而new出来的对象的属性全是一个新的对象，对应的属性没有值，所以我们还要重新给这个对象赋值。即当需要一个新的对象来保存当前对象的“状态”就靠clone方法了。那么我把这个对象的临时属性一个一个的赋值给我新new的对象不也行嘛？可以是可以，但是一来麻烦不说，二来，大家通过上面的源码都发现了clone是一个native方法，就是快啊，在底层实现的。其实js里的克隆跟生活里说的克隆是一样的。有一个本体，克隆出跟本体一摸一
2020-08-12 20:29:12
244
原创 jQuery写飞翔的小鸟
html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> //引入外部css <link rel="styles
2020-08-12 14:53:44
385
原创 jQuery写发送弹幕效果
要求：在输入框输入弹幕内容，点击发送，随机字体大小，随机颜色，随机位置，在显示区生成弹幕。所需技术：jquery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
2020-08-05 18:38:59
380
原创 jquery常用的增删改查方法
增：内部插入append( )内部后面插入内容appendTo( )prepend( )prependTo( )外部插入after（）before( )insertAfter( )insertBefore( )删：empty( )remove( )detach( )替换：replaceWith( )replaceAll( )查：next（）下一个元素prev（）上一个元素nextAll（ )所有下一个元素prevNext( )所有上一个元素siblings( )
2020-08-03 18:56:46
1930
1
原创 jQuery动画效果
jQuery效果显示和隐藏show([speed,[easing],[fn])滑动slideDown([speed,[easing],[fn])事件切换horver({over}out)如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数动画队列及其停止排队方法动画或效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行停止动画加上一个stop()后不管上一次的动画有没有走完，会把上一次的动画给停止了，然后执行下一次的动画stop方法必须写在动画的前面，相
2020-07-28 20:08:02
158
原创 jQuery类操作和对象方法
操作css方法参数只写属性名，则是返回属性值$(this).css("color");参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号$(this).css("color","red");参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号$(this).css({"color":"white","font-size":"20px"});设置类样式方法作用等同于以前的classlist，可以操作类
2020-07-27 20:02:32
413
原创 jQuery选择器
<div class="nav"> <p>儿子</p> <div> <p>孙子</p> </div> </div> <script src="js/jquery.min.js"></script> <script> $(".nav>p").css("background","pink")...
2020-07-22 19:29:33
155
原创 JQuery概述、下载和使用
概述j就是JavaScript; Query 查询;意思就是查询js ,把js中的DOM操作做了封装,我们可以快速的查询使用里的功能jQuery封装了JavaScript 常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。倡导写更少的代码，做更多的事情...
2020-07-20 17:04:13
111
原创 打包2048小游戏到手机
代码：根据上次的讲解，咱们这次继续，只需要在上次代码的最后，在封装一个函数，手机触屏的事件，在start里面调用一下这个函数即可。 //手机触屏事件 remove : function(){ var startX,startY,endX,endY; document.addEventListener('touchstart',function(){ console.log(event); //touches：正在触摸屏幕的所有手指的一个列表。 startX = event.t
2020-07-16 18:46:01
289
原创 经典小游戏2048 代码教学
2048的玩法：使用方向键移动方块，两个数字相同的方块撞在一起后，将会合并为一个数字是原来两倍的新方块!在手机上可以滑动屏幕来移动方块！html代码部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/0710.css">
2020-07-14 18:52:01
1498
原创 异步加载js的三种方式
浅谈：Javascript语言的执行环境是单线程。即一次只能完成一个任务。若有多个任务则需排队逐个执行——前一个任务完成，再执行后一个任务。这种执行模式实现简单，执行环境相对单纯。但随着前端业务日渐复杂，事务和请求等日渐增多，这种单线程执行方式在复杂的业务下势必效率低下，只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行为避免和解决这种问题，J
2020-07-13 15:57:09
520
原创 一看就懂的闭包讲解
概述：函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时，同时自动生成闭包。说白了，就是有函数的地方，就存在closure，无论你是否看得见。...
2020-07-09 08:41:19
196
原创 熟练掌握预编译
前言javascript是解释型语言既然是解释型语言，就是编译一行，执行一行脚本执行js引擎步骤语法分析：是引擎检查你的代码有没有什么低级的语法错误预编译：简单理解就是在内存中开辟一些空间，存放一些变量与函数解释执行：开始执行代码两种类型预编译在script代码执行前发生...
2020-07-06 17:30:23
140
bootstrap栅格系统
Containers（容器）容器是最基本的布局元素在Bootstrap中，特别对于网格布局。流动容器，意味它的容器宽度是会改变的。100%wide宽度。响应断点由于Bootstrap首先被开发为可移动的，所以我们使用一些媒体查询来为布局和界面创建合理的断点。这些断点大多基于最小视口宽度，允许我们在视口更改时扩展元素。Bootstrap主要在用于布局、网格系统和组件的源Sass文件中使用...
2020-05-05 16:19:03
223
原创 了解Bootstrap
1、什么是BootstrapBootstrap来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Les...
2020-05-05 16:16:41
367
原创 纯CSS写轮播
布局：样式：* {margin: 0;padding: 0;/background: silver;/}/初始化页面/.CarouselBox {width: 400px;height: 300px;margin: 100px auto;overflow: hidden;}/设置放置轮播图的盒子/li {width: 400px;height: 300px;f...
2020-04-30 16:08:43
148
原创 用css3绘制3d相册
布局：样式：*{margin: 0;padding: 0;}.wrap{height: 200px;margin-top: 200px;}.cube{width: 200px;height: 200px;margin: 0 auto;position: relative;transform-style: preserve-3d;transform: rotateX...
2020-04-30 15:16:28
203
原创 动画animation
animation: name duration timing-function delay iteration-count direction fill-mode play-state;例：animation: myanimation 2s linear 1s infinite forwards;animation 属性是一个简写属性，用于设置动画属性：animation-nameani...
2020-04-26 09:17:37
628
原创 flex布局
注意：父盒子(容器)设置flex布局之后，子元素(项目)的float，clear和vertical-align属性将失效flex布局原理：通过给父盒子添加flex属性， 来控制子盒子的位置和排列方式display: flex inline-flex传统布局：兼容性好，布局繁琐，局限性，不能在移动端很好的布局flex弹性布局:操作方便，布局极为简单，移动端应用广泛，PC端浏览器支持情况...
2020-04-26 09:11:00
133
原创 CSS3的新增属性
边框圆角：border-radius边框阴影box-shadow：水平偏移 垂直偏移 模糊半径 向外延展的大小 阴影的颜色边框背景图像border-image 了解就好背景图片background：backgrount-image background-repeat background-attachement background-position backgro...
2020-04-18 20:40:57
162
原创 CSS3选择器
关系选择器：通用兄弟选择器：~ 同级所有元素 （只能向后找）相邻兄弟选择器：+ 单个元素 平级 （只能向后找）属性选择器：/*这里的src可以换成其他的属性如class herf name */伪类选择器：:first-child :last-child :nth-child( ) 不能有其他元素:first-of-type( ) ：last-of-type(...
2020-04-18 12:55:07
162
原创 H5新增表单属性
H5新增了多个新的表单输入类型。这些类型提供了更好的输入控制和验证这些类型包括：emailurlnumberrangeDate picker(date, month, week, time, datetime, datetime-local)searchcolor实际使用email提交时会校验内容是否是正确的邮箱格式url在提交表单时，会自动验证 url 域的值。num...
2020-04-12 19:07:01
328
原创 canvas绘图
canvas技术专用于2D绘图位图坐标系三角函数canvas相当于画布，getContext相当于画画的纸绘制路径路径本身不可见，必须用描边stroke( ) 填充fill( ) 裁剪等 绘制出来ctx.beginPath(); 开始路径ctx.moveTo(x,y) 线条开始坐标ctx.lineTo(x,y) 线条结束坐标ctx.closePath();...
2020-04-12 14:25:27
346
原创 var const let的区别
1.let声明的变量，不允许重复声明2.使用 let关键字声明的常量和变量具有块级作用域3.具有临时性死区4.不存在变量提升5.防止变量不会挂在window中，不会造成全局污染防止循环变量变成全局变量常量const:1-5和let一样6.常量必须赋初始值7.常量赋值后不能更改let const var的区别var：函数作用域 变量提升 值可更改let：块级作用域 不...
2020-03-25 23:18:43
117
原创 ES6--解构
文章目录解构赋值：允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。优点：简化书写的长度，提升效率数组解构：例：let [a,b,c]=[1,2,3,4];console.log(a,b,c) //1,2,31、左边还可以用连续逗号的方式跳过右侧对应的值。例：let [a,c]=[1,2,3,4];console.log(a,c) //1,...
2020-03-25 22:39:02
218
原创 ES6
1.简介什么是ES6：ES6是ECMA Script 6.0的简称, 就是语言最新的标准, 发布与15年左右目标让js语言成为能支持去编写大型复杂的应用语言, 成为企业级开发语言javascript和ECMA Script区别?javascript, Java特别火,导致名字一直是javascriptECMA组织制定js标准,不想用java, 叫ECMA Script 6.02.变量...
2020-03-21 19:33:07
140
原创 js异步加载
使用异步加载的原因：由于js是单线程的，使用加载外部文件时，在加载js的时候，自身的HTML以及css会等待js外部文件加载结束了之后才会被浏览器进行加载渲染，因此比较低效，所以用到异步的概念来解决这个方法。有三种方式：第一种 defer 方式优点可以写入内部代码 缺点是必须等dom树加载完成之后才能加载，只有IE浏览器才能使用这种方式<script type="text/java...
2020-03-10 21:29:05
146
原创 js原型链
原型链每一个构造函数都有自己的原型对象 原型对象也是对象 (对象都有一个__proto__属性) 也有自己的原型对象 以此类推 形成的链式结构称之为原型链对象访问原型链中成员的规则就近原则(对象访问成员 先看自己有没有 有则访问 没有则从原型寻找 如果原型有则访问 原型没有 就从原型的原型寻找 以此类推 直到原型链的终点null 如果都没有 属性返回undefined 方法返回程序报错)...
2020-02-16 15:29:46
170
原创 数组去重方法
function ee(arr){ for(var i = 0,result = [],hash=[];i < arr.length;i++){ // 如果hash中以arr当前元素作为key的元素是undefined if(hash[arr[i]] === undefined){ // 为hash添加新元素，key值为arr当前元素，value值赋值为 tr...
2019-12-25 19:36:07
232
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人