caicai16的博客

原创 H5拖拽

1、H5拖拽与Js拖拽用途 JS里的拖拽三事件：onmousedown、onmousemove、onmouseup是实现交互性效果，根据鼠标的移动位置让标签元素联动。 2、H5拖拽也可以实现但更简单，例如：百度图片识别、QQ邮箱文件提交、百度网盘文件上传等，并可以获取到文件的名称、大小、修改时间。 3、实例 1）JS拖拽 let Oapp=document.querySelector("#app"); Oapp.onmousedown=function(e){ let x=e.cl

原创 H5适配布局详细介绍

1、为什么需要H5适配布局？ 1）为了适应各种移动端设备/手机，显示相应的布局效果 2）可以适应各个移动端设备，并且在各种分辨率下等比例缩放以及网页可以铺满整个屏幕 2、H5相关性概念知识 ...

原创 H5移动端事件详细介绍

1、PC端与移动端H5事件对比 1）PC端事件： onclick鼠标点击触发 onmousedown鼠标按下触发 onmousemove鼠标移动触发 onmouseup鼠标抬起触发 代码块： // PC端的拖拽事件 let Obox=document.querySelector("#box"); //按下事件 Obox.onmousedown=function(e){ console.log(e); consol

原创 H5技术

H5技术 一、包括： 1、H5适配布局 2、H5移动端事件 3、H5拖拽 4、cookie与本地存储（面试考题） 5、离线存储 6、Canvas 7、多媒体地图（多媒体是发展趋势以及地图是数据可视化） 二、补充其余知识点 1、三大框架：reat搭配Ant Design使用； vue 搭配PC端：element使用，移动端搭配Vant Weap使用； angular搭配 2、原生js使用在网页比较好 3、Express是基于node.js的 4、Echarts统计图（常用） 5、Webpack(打包工具) 6

原创 BOM

BOM Borwser Object Model 浏览器对象模型 了解 1.：一般写法window.open(“传入链接地址”) 2.window.open(“传入链接地址”,"_blank")操作的浏览器，会被浏览器屏蔽掉，提高用户体验，避免跳转的页面多 3.例如：window.open(“http://xxx.com”,"_blank") 4.关闭页面：window.close 掌握 5.1）onresize浏览器的宽高在变动 2）window.innerWidth 可视区的浏览器的宽度 window.

原创 event事件函数

event事件函数里面的关键词 时间对象——存储着和当前事件有关的一些信息 1低版本的.ie 2.标准浏览器里面的事件函数的第一个形参代表事件对象 只要传入形参即可 3.低版本的兼容＜ie9 使用或window.event 不兼容的时候是undefined 4.关于鼠标位置 区别在于滚动条的时候不一样 1).clientX clientY 鼠标到可视区的距离 2).pageX pageY鼠标到文档的距离 5.关于冒泡：事件默认（一直存在的）是会一直向上传递的 （事件从子元素开始到父级直到d

原创 各种设置宽高、距离的获取

各种设置宽高、距离的获取 1.可视区的宽高 document.document.clientWidth,…Height 2.补充～记住：获取其他的元素：document.head~head document.body～body document.title（title的文本内容）~title document.documentElement ~html 3.只读：盒模型中的宽高获取： clientWidth=content+padding clientHeight=content+padding offse

原创 ES6常用语法2

一、for of（ES6） 1.了解for in遍历数组 key数组的下标，arry数组 for in在ES5中的作用是遍历对象的,但是for in可以遍历出原型上面的属性 //for in在ES5中的作用是遍历对象的 let onj={ name;"小菜", age:19, sex:"女", company:"xxx" } for(let key in obj){ console.log(key);//name age sex company console.log(key,obj.[ke

原创 ES6常用语法1一解构赋值...

一、let与const 1)let或const定义的变量的特性：暂时性死区：只要当前作用域中声明过某个变量，那么声明使用该变量就会报错（必记） 例如： 如何避免暂时性死区？ 建议：同个作用域所有的定义全部写在最前面 假如不知道需不需要赋值，则可以采取先不赋值，然后再赋值即可 例如： 2）const与let的区别 const是常量，但是不改变引用，都不会报错 例如 报错： 不会报错 const a={ name:"lala" }； a.age=10; console.log(a); 二、不建议

原创 日期对象

一、new Date() 返回值是一个对象 固定写法，并且时间是当前自己电脑的时间（只能获取当前本地的时间） 二、具体表示方法 年：get.FullYear() 月：get.Month() 月份是从0开始算起的，所以需要在后面加上1，显示正常的月份 日：getDate() 时：getHourse() 分：getMinutes() 秒：getSecondes() 星期：getDay() 一周的第一天是星期天，对应为0 三、应用：制作时钟 函数返回的值应该保持一致 能不写在定时器中的就不要写在定时器中，

原创 DOM

一、JavaScript的组成 ECMAScript:核心基础，语法规则（提供一些方法） DOM：document object model：文档对象类型，定义各种操作页面元素的属性的方法 BOM: borwser object model:浏览器对象类型，定义各种操作浏览器的属性的方法 二、Dom文档对象模型（提供api操作一些节点） 1.所有和HTML页面相关的操作都是DOM提供的（记住） 2.修改文字：一个元素的子节点（在dom中不仅仅标签是节点。还包括：文本，注释，元素节点。掌握：元素节点，文本节点

原创 常用的数学函数+定时器

一、常用的数学函数 1.绝对值 abs 2.max 一组数中得到最大的数值 min 一组数中得到最小的数值 max 和 min都需要传入一组数据 3.指数函数 pow 4.π的表示 PI 5.三角函数 sin cos tan 注意：角度 和 弧度 的转换 360 = 2π 弧度=角度*π/180 1.绝对值 2.max min 结果 3.指数函数 pow(a,b)传入两个参数，a指数值，b指指数是多少 结果 243 4.π的表示 PI console.log(Math.PI);//2.1415..

原创 取整函数

一、Math方法 random 随机数 [0,1)：注意区间里面的0，1是不可变的 随机返回一个0-1之间的数字，可以随机到0（概率比较低），不可以随机到1（取不到1） 固定口诀： [a,b)//b一定比a大 Math.random()*(b-a)+a //例如：-20到10之间的随机数 console.log(Math.random()*30-20) //例如：随机数取10-20 console.log(Math.random()*10+10) 二、Math取整 1.向下取整 floor（一般取整常用

原创 数组常用的排序方法

1.sort是指排序，sort的返回值的正负决定了排序的顺序 常与箭头函数使用，并且传入形参（形参需要再写） api:sort (()=>{}) 目前必记：正序倒（反）序升序降序 例如： 2.reverse() 反序函数 3.concat是连接两个数组，组成一个新的数组/将两个数组连接在一起，组成一个新的数组，但是不改变原数组 例如： let arr1=[1,2,3]; let arr2=[4,5,6,7]; let arr3=arr2.concat(arr2); console.log(arr3

原创 闭包一总结

考题： 一、闭包：被包裹在其他函数中的函数，叫闭包（常用定义）父函数 包裹了子函数，子函数使用了父函数的变量/参数，导致这个变量和参数不会被回收，闭包就产生了 /父作用域 包裹了子作用域，子作用域使用了父作用域的变量/参数，闭包就产生了 例如 闭包产生的原理： 二、闭包的特点 需提及：变量回收机制 变量为什么会回收？因为变量是一直存在内存里面的 变量回收的特点：全局的变量是不会被回收（除非关闭当前网页的时候才会回收） 例如：let x=10;//全局变量 例如：局部变量 function fn(

原创 Math方法、定时器

一、= 的含义 1）如果右边的数据是基础数据类型（字符串、数字、未定义、布尔值、null空指针） 赋值：右边的数据给左边变量，给完之后，左右就没有关系了 2）如果右边的数据是对象（只有对象才有引用关系） 则 = 是引用：右边数据给左边，左右建立引用关系，两个变量建立了引用关系之后，任意一边的改变（是指使用点操作或者 [] 符号的操作）会影响另外一边。但是重新赋值是不会影响的 例如：点操作1 结果： 例如：点操作2 <div id="wrap">123</div> let o

原创 return函数的补充

1.return返回的是一个数据 2.函数体（考题）：当函数没有执行的时候返回的是一个函数体 1）例如 2）执行函数里面的代码 结果 3）返回函数体，但是aa();函数执行了，有返回值123 结果 4）面试题：如果一个函数执行完之后，而return的是一个函数，则一个函数执行完之后变成一个函数表达式，执行完的函数再加上()会再次执行/只要返回值是一个函数，则+()就可以自执行 结果 3.作用:函数执行到return则会立马结束函数 例如： 结果： 2）通常会跟if使用，终止不需要的步骤 默认

原创 break,continue---补充

1.break：在for循环的循环体中，可以直接使用break直接结束循环 例如 结果： 2.continue：循环时，执行到continiue的话，当前这一次的循环体立即结束 例如 结果

原创 ES5的作用域与解析顺序一一仅做了解

面试题（概率不大） 1作用域：定义了变量之后，变量会再一定范围里面起作用，这个起作用的范围就是作用域； 2.ES5中的关键词 1）var 特性：变量提升：解析代码的时候，会先读（当前作用域中）所有的var,并且只解析变量的名字，等号后面是不解析的 例如： console.log(x);//undefined var x=10; //解析如下 var x; console.log(X);//所以打印undefined x=10; //区别于let console.log(x);//报错 let x=10;

原创 函数作用域

1.函数的作用域是定义函数的时候决定的，而不是执行函数的时候决定的。 如下图，函数自执行（掌握） //弹窗的是10，因为不能访问同一个函数的变量，只能去全局作用域里面找。 2.this指向：在任意的作用域里面都有this指向，并且是关键词。 在同一个作用域里面的this指向是相同的，但是采用不同的执行方式，this指向是不一样的，区别于函数的作用域：函数的This指向是执行函数的时候决定的，而不是定义函数的时候决定的。 1）this指向window，因为是使用了window.aa();所以指向window

原创 javascript一函数

1./ /声明一个函数 funct ion goudan() { consolc. log ("DSB") ; } // goudan() ;//主动式触发函数/主动的在合适的位置加()执行 //充当事件函数，事件触发时才执行，不能加() ,因为加上()表示右边为一个函数了，自执行，没有点击效果了 document.onclick = goudan； // document.oncl...

原创 for循环写九九乘法表、菱形

一、九九乘法表 1.使用span <div id="wrap"></div> <script> let oWrap = document.getElementById("wrap"); let text = "";//赋予空字符串，拼接时才不会出现其他的数据类型 for (let i=1;i<=9;i++){ te...

原创 循环与页面操作标签

for循环与innerHTML页面操作标签 作用：使得javascript与DOM(文档对象) 的交互变少，则性能越好，除非是不得已（基础面试会考） <div id="wrap"></div> <script> let owrap=document.get ElementBy1d("wrap") ; for ( let i=0; i<5000;i++...

原创 判断语句

一、补充概念：表达式: 定义:就是有返回值的就是表达式 二、 if条件判断: 1.代码执行的时候 在某种条件下执行A, 其余情况下执行B（注意可以执行多个语句） 2. 判断条件: 两个结果的: true false 如果是： 就是 true 如果不是：就是 false 3. if(A：写表达式){ B } 如果A为真, B里面的内容都会执行 如果 A为假, B里面的就不执行 例如：let food...

原创 循环语句

*循环:做重复的事情,在次数上出错，枯燥乏味。但可以让我们快速实现代码的重复多次的执行、循环。 for循环：能精确控制次数的循环 一、模型: for(A; B; C){ D } 固定次数循坏的标准写法： letlength=1//循环5次。 //为什么要从0开始: JS都是这样定义的，方便后续批量化操作 for(let i = 0;i < length; i++){ console. log...

原创 逻辑运算符的总结

逻辑运算符：多个条件之间的判断 判断条件A 布尔类型 判断条件B 同时满足条件： A为真 B也为真 1.A&&B 与运算符(遇到假就立马返回了) 专业的解释 A为真 返回B A为假 返回A 如何判读一个值到底是真还是假？ 数据 进行识别转换 转成布尔类型，该怎么转？ 六大假值："" 0 undefined null NaN false 例如：3&&2 输出2 或者...

原创 隐式类型转换（悄悄地转换）

隐式类型转换（悄悄地转换）：重点，难点 六大数据类型：数值、对象、数组、布尔值、undefined、null 转数值 Number() 布尔类型转数值 true为1 false为0 字符串转数值 满足的条件按： 看起来像数字，那他就能转 不管怎么转，结果一定是数值类型 转不了就是NaN “Infinity"和"1e12”(科学计数法都可以转数字) 不同进制"0xaa"/“0b101010”...

原创 三目运算符

二选一的时候使用三目运算符选择 判断条件：A?B:C A:条件（true/false） B:选择1（表达式） C:选择2（表达式） A?B:C即为：如果A为真选B 如果A为假选C 注意：进行三目运算的时候一定会返回一个值：值要么是B，要么是C 例如： let xinbie=true; let type=xinbie?“女生”:“男生”; console.log(“我是”+type); 返回值是：我...

原创 javascript运算符的补充

原创 javascript的属性操作与样式操作思维导图

原创 4月23号一运算符思维导图

原创 4月19号一js变量+基本数据类型

转载 H5面试题---介绍js的基本数据类型

js的基本数据类型 Undefined、Null、Boolean、Number、String

原创 Emment语法的使用一思维导图

原创 4月18号一js的数据类型

注意： 变量定义： “=”代表赋值，右边 let是定义变量的关键词一共有20个 保留词：在以后可能有用 1.定义变量 单独定义变量，变量=值 只定义变量，不赋值 =号两边空格不是必须的，但是美观 2定义变量注意点： 变量名称的规则： 字母，数字，＿，$（注意：不能以数字开头） 严格区分大小写 不要无中生有，也不要重复定义（声明） 3.变量的取值类型（数据类型） 1）基础数据类型： number数字...

原创 初识JavaScript一思维导图一4月-17日

原创 补充：4月1号一html新增的语义化标签的使用实例

功能性语义化标签 hgroup标签:一个标题和一个子标题,或者标语的组合** PS:可使用的浏览器 IE 9、Firefox、Opera、Chrome 和 Safari 支持 标签。 注意：IE 8 或更早版本的 IE 浏览器不支持 标签 使用在对网页或区段（section）的标题进行组合 效果图如下 figure标签:用户对元素进行组合,一般用于图片或视频 PS: 可使用的浏览器...

原创 4月5号一制作网站时的心得体会

注意点 1.head: 引入公共样式，新建css文件写入：common.css 2.书写公共样式： < rel=“icon” >把图标插入网页标题 < rel=“shortcut icon” >在收藏夹里显示图标，提高用户体验 < type= “image/x-icon” 引入图片类型> （1）link rel=" icon" href=“favicon. i...

原创 4月2号一温故而知新

补充知识点： 锚点链接：a标签和id选择器的使用（使用在右侧导航栏） 2.高仿轮播 3.复习知识点： 盲点： 样式优先级： 层级由低到高： 通配符（关系选择器权重为0）＜标签选择器（伪元素权重为1）＜伪类选择器（类名，属性选择器权重为10）＜id选择器权重为100＜行内元素权重1000＜!important 属性选择器：伪类选择器之属性选择器 行内元素：不占一行，不可以设置宽高，上下边距以及aut...

原创 4月1号一响应式布局的学习心得

新知识： 响应试布局：一个网站可以兼容多个终端（bootstrap） （1）优点： 1）面对不同的分辨率时，设备的灵活性较强 2）能够快捷的解决在多个设备上适应的问题 3）使用在中小型网站 （2）缺点： 1）为了兼容多个设备，工作量较大，效率不高 2）代码冗余，有很多隐藏无意义的元素，加载速率不会很快 （3）原理：通过css新增的媒体查询，同过匹配不同宽度达到不同的显示效果 （4）媒体查询：能够检...