
js
js的功能
科技达人ლ(′◉❥◉`ლ)
这个作者很懒,什么都没留下…
展开
-
js 导出文件
//转换成Blob数据并下载 convertRes2BlobAndDownload: function(data) { const filename = 'export-'+new Date().getTime()+'.xls'; //type 限制文件类型 application/octet-stream const blob = new Blob([data], { type: 'application/octet-stream' }); //.原创 2022-04-02 11:35:38 · 1316 阅读 · 0 评论 -
String=字符串的方法
<script> // 方法: var arr = "Death is like WIND,always by my side"; var arr = "Death is like WIND,always by my side"; var arr1 =arr.length; console.log(arr1); //显示数组的长度 console.log(arr); //显示数组字符串 // 1.charAt(索引) 重点 /原创 2021-04-23 15:09:59 · 155 阅读 · 0 评论 -
js事件
js中事件的三要素:事件源 事件类型 事件处理 网页上有一个广告,点击右上角的x,广告关闭了。事件源是 右上角的x 事件类型是点击 事件处理:广告关闭 事件源:引发后续事件的HTML标签。 事件类型:比如点击,双击,鼠标移入移出等等 事件处理:一个函数(对DOM进行操作。) 书写一个事件的步骤: 1.获取事件源 2.指定事件的类型 3.书写一个函数,处理对应的事件。事件类型可以分为这么几大类: 1.鼠标事件 2.键盘事件 3.浏览器原创 2021-04-29 19:06:44 · 171 阅读 · 0 评论 -
日期对象
Date对象创建日期对象的方法: 1.new关键字。 var date = new Date(); 2.new关键字,但是可以参入参数。 【不参入参数默认是当前的时间】 【注意】 var date3 = new Date(2020,06,01,15,30,06); 使用上面的方式,月份是从0开始计算的,06就是七月份。 <script> // 1.new 关键字创建对象 var date = new Date(); console.log原创 2021-04-22 19:01:51 · 153 阅读 · 0 评论 -
node的模块大致可分为三大类
node的模块大致可分为三大类1.内置模块(node js原生提供的)可以直接使用2.自定义模块(需要手动的导出)3.第三方模块(需要下载安装然后才可以使用)自定义模块:定义模块:通过module.exports = { } 导出模块通过exporst.属性 = value 导出模块引入模块:const 变量 = require(“模块路径”)node可以操作文件,可以创建服务器,可以连接数据库等等。读取文件: 1.引入fs内置模块 2.调用readFile方法 3.指定原创 2021-06-01 14:11:33 · 1057 阅读 · 0 评论 -
DOM节点
什么是DOM? DOM:document object model 文档对象模型。 DOM是由节点组成的。节点的类型元素节点:HTML标签文本节点:标签中的文字(包含空格和换行。)属性节点:标签的属性DOM可以做什么? 1.可以操作HTML元素(增删改查) 增:添加,在一个节点从DOM节点下添加一个子节点,相当于动态新增了一个HTML标签。 删:删除,将一个节点从HTML中删除,相当于删除了该节点的所有内容以及它包含的子节点。原创 2021-04-26 23:06:50 · 129 阅读 · 0 评论 -
BOM+window+location
js分为三个部分: 1.ECMAScript 语法标准。 2.BOM 操作浏览器部分功能。 3.DOM 操作网页上的元素 【注意】 1.DOM是BOM的一部分。 2.window对象是BOM的顶层对象。所有的BOM对象都是通过window对象延伸出来的,也可以成为window的子对象。什么是BOM? Browser object model 浏览器对象模型 常见的BOM对象: window:代表的是整个浏览器窗口。原创 2021-04-23 20:37:46 · 121 阅读 · 0 评论 -
对象
复杂数据类型: Array 数组 function 函数 Object 对象万物皆对象 我们如果要描述一个人的信息,如果使用基础数据类型,创建的变量之间是独立,不容易看出关系。对象: 特有的属性(属性) 特有的行为(方法) JavaScrpit中的对象可以是生活中的具体事务的一个抽象。 JavaScript中的对象时无序属性的集合。 变量:一个数据 数组:一组数据 对象:放一段可执行的代码。 手机: 分辨率,像素,C原创 2021-04-20 18:43:13 · 112 阅读 · 0 评论 -
DOM浏览器操作
navigator 浏览器信息 (了解) userAgent 浏览器的版本以及型号信息 appName 所有的浏览器都是一样的,都是Netscape platform 显示浏览器所在的系统history 历史记录对象每个浏览器窗口都是有自己的history对象。常用方法: history.back();后退一页 相当于浏览器 ← history.forward();前进一页 相当于浏览器 → history.go(n)原创 2021-04-25 18:27:19 · 262 阅读 · 0 评论 -
数组去重+二维数组
<script> var arr = new Array(1,2,3,1,1,4,7,7,8); // 准备一个新数组 var arr2 = []; // 遍历每一个元素 // for (var i = 0; i < arr.length; i++) { // // 查找它后面的元素中有没有跟它相等的 indexOf方法。 有返回下标,没有返回-1; // var index = arr.indexOf(arr[i],i+1原创 2021-04-20 16:09:30 · 127 阅读 · 0 评论 -
递归
递归: 什么是递归? 函数的一种应用方式。 函数之间可以互相调用。 递归是函数调用函数的一种特殊情况。就是函数调用自己。 在工作中,递归慎用,不到万不得已绝对不要用。递归的特点: 1.函数自己调用自己 2.一般情况都有参数 3.一般情况都有return。写递归的方法: 1.首先要找到递归结束的情况。 2.找本次函数和下次函数执行之间的关系 3.调用下一次函数 <script> function a()原创 2021-04-20 17:16:29 · 73 阅读 · 0 评论 -
传播事件
事件传播机制 当我们在一个元素上触发行为时,js会按照HTML的结构,根据父子级关系,从下往上进行行为的传播。直到window为止。【注意】事件的传播,值局限于同一类型的事件冒泡和捕获冒泡:按照从 目标 到 window 对象的顺序来执行所有的事件。捕获:按照从 window 到 目标 的顺序来执行所有的事件。 on+事件类型的方式绑定,是不能指定捕获的。‘ 只能通过监听的方式去改变事件的传播机制。addEventListener 的第三个参数: true原创 2021-05-06 20:18:07 · 129 阅读 · 0 评论 -
ajax的使用方法
文章目录步骤ajax:Web数据交互方式ajax优点:使用步骤:get请求和post请求的区别:get的方法post方法步骤ajax:Web数据交互方式用于:局部刷新页面。使用场景:1.搜索框实时显示结果2.动态加载页面3.列表页面的分页4.表单的服务器端校验ajax优点:不需要任何插件的支持,利用js就可以使用。提高用户的体验。提高web程序的性能。减轻服务器端的宽带压力。使用步骤:1.常见xmlhttprequest对象2.调用对象的open方法3.原创 2021-06-11 15:56:45 · 178 阅读 · 1 评论 -
移动端布局
移动端布局视口布局视口移动端默认的布局宽度为980px;这个980px是苹果公司首先提出的布局视口,然后其他公司后来纷纷效仿,统一了布局宽度,可以让页面更为完整的展示。视觉视口我们视觉看到的手机屏幕区域。因为手机的屏幕大小和分辨率的不同,在980px下,同样的一个div在不同的手机下看到的大小会不同,那么会操作样式的不同。理想视口为了让每一个设备能够完美的显示网页的内容,我们让布局视口与视觉视口一致,也就是我们说的理想视口。物理像素就是屏幕上最小的发光单位,物理像素点。在PC端,默认是1p原创 2021-04-07 14:33:43 · 221 阅读 · 0 评论 -
SASS
Sass什么是sass是css扩展语言。叫做预处理语言。作用:可以让我们用更少的代码,来实现更多的功能。写css时遇到的痛点维护的时候不方便维护。选择器嵌套时会比较混乱。会出现较多重复冗余的代码。如何使用在vscode中的插件中搜索easysass。安装安装完成后,需要进行一些配置。"easysass.compileAfterSave": true, "easysass.formats": [ //nested:嵌套缩进的 css 代码。//expanded:没有缩进的原创 2021-04-06 09:08:51 · 94 阅读 · 0 评论 -
程序执行的三种结构:if+else if +witch
程序执行的三种结构: 1.顺序结构 从上往下执行 2.选择结构 (分支结构) **if** 单分支 多分支 switch 3.循环if语句语法: if(条件表达式){ 条件表达式的结果为true时,执行的代码。 }多分支: if(条件表达式1){ 条件表达式1的结果为true时,执行的代码。 }else原创 2021-04-18 17:51:58 · 342 阅读 · 0 评论 -
函数:arguments伪数组
arguments:每个函数都有一个arguments。使用存入的参数。arguments的结构类似于数组。(伪数组:不能使用数组的一些方法,但是用法与数组类似。)使用形参:让代码更容易阅读和理解。使用方法:访问第n个参数:arguments[n]获取最后一个参数:arguments[arguments.length-1]获取参数的个数:arguments.length...原创 2021-04-18 21:29:50 · 134 阅读 · 0 评论 -
类型转换
类型转换:将其他的数据类型转为我们想要的数据类型。强制类型转换 转数字: 转字符串: 转布尔值: 自动类型转换 Number(要转换的值) 将任意类型的值转为数字。 【注意】:字符串转换:如果可以转换,转换的结果是数字,不可以转换,结果是NaN。"" 转为 0布尔值: true=>1 false=>0null : 0undefined:NaN 【总结】 能转数字,结果是数字,不能转结果为NaN。parseInt(要转换的数据)将原创 2021-04-17 00:46:56 · 81 阅读 · 0 评论 -
分栏布局
分栏布局将盒子分为若干栏,是垂直上下划分的,每一栏的宽度相等,效果与报纸相差不多。column-count:n(数字)指定分栏数量column-width: 300px;指定分栏的宽度。【注意】column-count与column-width不要同时运用。如果同时设置,column-width无效。column-gap分栏之间的距离column-rule分栏之间的边框column-span分栏的合并 适用于文章的标题部分 column-span: all;...原创 2021-04-07 08:32:35 · 126 阅读 · 0 评论 -
音频视屏标签
音频:audiocontrols:显示控制面板。如果不设置该属性,则页面看不到效果。autoplay:自动播放,但是谷歌浏览器已经将该属性禁止了。loop:循环播放muted:静音视频: video src:引入视频文件的地址。poster:指定视频的封面音频和视频都是行内元素。...原创 2021-04-07 08:47:49 · 93 阅读 · 0 评论 -
javascrpit+书写位置+注释+ js的输出语句+变量:存放数据的容器
js简介**HTML** 网页的结构**CSS** 网页的表现**Javascript** 网页的行为 在这里插入代码片 用户与网页的交互 网页的特效**ECMA:** **ECMAScript**:js语言的标准。 **javascript**:现实。 ES5 ES5 = ES2015 ES2016 ES2017原创 2021-04-16 23:47:47 · 195 阅读 · 0 评论 -
BFC
BFC每一个块级元素应该都是一个独立的盒子,不应该对其他的块级元素或者父盒子操作影响。但是实际情况不是这样的,可能会出现以下几种情况:外边距塌陷外边距重合高度塌陷。BFCblock formatting context 块级格式化上下文官文解释:它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。BFC提供了一个环境,HTML元素在这个环境中按照一定的规则进行布局。说人话:BFC的目的就是形成一个完全独立的空间,让在这个空间中的子元素不会在布局上影响到其他元素。如何生成B原创 2021-04-07 14:57:23 · 68 阅读 · 0 评论 -
新增表单元素
text:输入框password:密码框radio:单选框checkbox:复选框button:按钮submit:提交按钮reset:重置 (了解) email 邮箱地址:必须包含@,@后必须有内容。 url:网络地址 必须包含协议名称 http https search:搜索框 输入框的尾部有一个x,点击会清空输入框的内容 color:颜色选择器 number:数字 min max可以指定数字的最大值和最小值、 step:步长 一次加减的大小,最终值必须是step原创 2021-04-07 08:43:09 · 84 阅读 · 0 评论 -
h5新增语义化标签
H5新特性之语义化标签在日常生活看报,或浏览网页,都有着固定的样式,如:头部,导航,标题等。在html5中,为了方便划分板块结构,增加了新的语义化标签。一、header(重点)header表示表示一个页面或者一个区域块的标题。通常是一些引导和导航信息。<header> <p>this is the page Logo</p> <nav>this is page navigation</nav></header>二原创 2021-04-07 08:45:34 · 215 阅读 · 0 评论 -
常见的算术运算符+自增自减运算符+字符串之间的比较:+ 逻辑运算符:+三元运算符
常见的算术运算符:加 +减 -乘 *除 /幂 ** 2**3 2的三次方 2*2*2 =2**3余数 % 7%3 7/3 =2 。。。。1变量没有赋值时,变量的值是不会发生变化。a = a + 1; 等效于 a+=1;+=-=*=/=%=自增自减运算符自增自减是一元运算符的一种。一元运算符:只能操作一个数值的运算符就叫做一元运算符。自增:自身的值上+1 变量++ ++变量自减:自身的值上原创 2021-04-17 09:29:21 · 409 阅读 · 1 评论 -
基础数据类型+字符串+undefined:null+布尔值+数据内性检测
js中数据的类型分为两类八种:基础数据类型: number 字符串 布尔值:true,false undefined null 复杂数据类型: 对象 object: 数组 array: 函数 function: ES6 symbol ES10 bigint number: 整数和浮点数(小数)原创 2021-04-17 00:38:05 · 164 阅读 · 0 评论 -
移动端网页开发)------响应式网页
移动端网页开发移动端网页开发的两种方案:响应式网页开发一个新的网站。使用移动端的布局方式。响应式网页概念同一个网页会根据视口的不同,显示不同的样式。优缺点优点面对不同分辨率的设备比较灵活。比较快捷的解决多设备的显示适应问题。缺点如果兼容的设备比较多,则工作量比较大,效率比较低。代码会比较臃肿,加载时间会比较长。适用场景如果是一个小型的网站,我们一般使用响应式网页,因为响应式的开发量比较小,开发速度比较快。如果是一个大型的网站,比如说,小米,腾讯新闻等等,适合第二原创 2021-04-07 08:31:39 · 658 阅读 · 0 评论 -
函数的分类+retrun返回值
什么是函数?存放一段可执行代码的盒子。使用函数的步骤:1.定义函数 把代码放到盒子里。(封装函数)2.调用函数 直接操作盒子函数的分类: 系统内置的函数 alert(弹出警示框); document.write(输出文本); console.log(输出到控制台); Number(数字); parseInt(数字转换为整数) 自定义函数定义函数的两种方法:1.声明式语法格式:function 函数名 (参数1原创 2021-04-18 21:17:50 · 268 阅读 · 0 评论 -
外边局重合三种情况
1.相交的两个margin值都为正数,取最大值。2.相交的两个margin值都为负数,取绝对值最大值。3.相交的两个margin值一正一负数,取两者之和。原创 2021-04-07 13:26:25 · 73 阅读 · 0 评论 -
break+continu作用
break:如果执行break,则循环语句中后面的代码都不会执行,并且整个循环都会结束。continue:只能在循环中使用,让本次循环结束,循环语句中后面的代码本次就不会执行了。接着执行下次循环。...原创 2021-04-18 18:53:49 · 75 阅读 · 0 评论 -
for+while+do........whlie循环
for循环循环: 重复做一件事情。 特点: 给定一个条件,条件成立时,重复执行末段代码,直到条件不成立。循环成立的条件: 1.初始值,作为循环的开始。 2.条件判断,决定要不要继续执行循环。 3.执行重复的代码。 4.改变初始值,为了让循环有结束。 语法结构: for(var i= 1;i<要执行的次数;i++;){ 重复执行的代码 } 执行顺序: 1.变量的声明 var原创 2021-04-18 18:50:00 · 114 阅读 · 0 评论 -
数组
数组: 为什么要用数组? 当我们需要一组数据,或者一次定义很多类似的变量时,我们可以使用数组提高开发效率。 数组的概念: 一组数组的集合,其中每个数据叫做元素,在数组中可以放任意类型的元素。 声明数组的方式: 1.字面量(直接赋值,将值写在[ ],每一个元素之间用逗号分隔。) 2.通过new 关键字创建数组。 new Array(数组中存放的数据) 【注意】如果数组中只有一个元素,而且这个元素是一个n原创 2021-04-18 19:23:01 · 81 阅读 · 0 评论 -
3D旋转
3d旋转格式:3D旋转格式:transform:rotateX(旋转角度)transform:rotateY(旋转角度)transform:rotateZ(旋转角度)transform:rotate3d(1,1,1,45deg) 指定对象的3D旋转角度,其中前3个参数分别表示旋转的方向x,y,z取值为0/1 0表示不旋转 1表示旋转 第4个参数表示旋转的角度,参数不允许省略 浏览器默认是2d的,如果我们想要看到3d效果,需要添加一个视距属性。视距:人眼与网页的距离原创 2021-03-30 20:36:05 · 154 阅读 · 0 评论 -
弹性盒子
弹性盒子2009年,W3C提出了一个新的盒模型,弹性和模型(flex),用于解决网页布局中的一些问题。flex的优势1.flex布局的子元素不会脱标。2.属性非常丰富,可以灵活使用,更加便捷的为页面布局。3.IE低版本不支持,IE10-11支持度不高。标准浏览器完全支持。4.移动端支持性也不较高。弹性盒子声明定义使用display:flex或者...原创 2021-03-31 21:34:09 · 332 阅读 · 0 评论 -
css3 动画
1.指定要调用的动画,属性值为动画名animation-name:名字;2.一次动画完成时间animation-duration:2s;3.动画执行的次数,默认是一次,属性值为数字,不需要单位,infinite 无限循环播放animation-iteration-count:1;4.动画执行的运动曲线linear:线性匀速ease:先加速后减速(默认)ease-in:加速ease-in-out:先加速后减速animation-timing-funnction:line原创 2021-03-30 20:32:43 · 70 阅读 · 0 评论 -
3D位移
3D位移:格式:transform:translateX(位移量)transform:translateY(位移量)transform:translateZ(位移量)transform:translate3d(水平位移量,垂直位移量,Z轴位移量)perspective:translateZ为正值,perspective越来越小,则盒子与你的距离越近,看到的效果也就越大。translateZ为0,perapective不管发生任何变化,看到的效果不变。translateZ为负值,per原创 2021-03-30 20:07:48 · 211 阅读 · 0 评论 -
转换
转换是css3中一个特征,可以实现元素的缩放,位移,变形。作用:使元素在位置或者形状上发生一定的改变。属性:transform属性值:scale 缩放translate 位移rotate 旋转skew 倾斜scle 缩放格式:transform:scale(x水平 y垂直)x:表示水平方向上缩放倍数y:表示垂直方向上缩放倍数如果只写一个值表示等比例缩放【注意】1.缩放只是一种视觉效果,不会对别的盒子造成影响2.取值大于1表示,大于表示缩小位移;translate原创 2021-03-29 23:05:15 · 101 阅读 · 0 评论 -
盒模型
盒模型盒模型:box modle。div和span是最常见的两个盒子。图片,表单元素等这些可以看做为文本,他们并不是盒子。1.盒子中的区域一个盒子主要的属性为5个个,widht,right,border,padding,marginwidth 内容的宽(标准盒模型下,不是盒子的宽)height 内容的高(标准盒模型下,不是盒子的高)padding 内边距border 边框margin 外边距2.宽高标准盒模型下,我们设置的宽和高,是内容区域的宽和高并不包含边框,内边距和原创 2021-03-20 09:19:57 · 130 阅读 · 0 评论 -
清除浮动
定义清除浮动元素之间的影响高度塌陷父元素中所有的子元素都浮动后,父元素没有高度,则高度为0在标准流中,父元素的高度默认是由内容的高度撑开,也就是说,子元素的高度就是父元素的高度,但是当父元素都浮动后,子元素就脱离了标准文档流,无法撑开父盒子,对于父盒子来说,它里面没有标准文档流的内容,则导致没有高度。解决方法1.添加高度(不推荐)原因:在网页中,父元素一般不设置高度,而是由内容撑开高度,如果设置了高度,可能会出现底部有大片的留白或者内容溢出。2.父元素设置浮动(不推荐)父元素浮动原创 2021-03-22 18:46:15 · 188 阅读 · 0 评论 -
浮动
1.标准文档流**定义:**内容是从上往下,从左到右书写的。前面的内容或者位置发生变化时,后面的内容也会随之变化。HTML就是一个标签的文档流,网页上内容的位置,与咱们的书写顺序有关。元素的分类标准文档将HTML元素分为三种:1.行内元素 inline2.块级元素 block3.行内块元素 inline-block区别行内元素:与其他行内元素并排不能设置宽高。默认的宽,高就是内容的高。可以设置宽高的,默认的宽为100%,默认的高为内容的高。常见的标签分类块级元素...原创 2021-03-19 22:05:16 · 102 阅读 · 0 评论