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、Canvas7、多媒体地图（多媒体是发展趋势以及地图是数据可视化）二、补充其余知识点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低版本的.ie2.标准浏览器里面的事件函数的第一个形参代表事件对象只要传入形参即可3.低版本的兼容＜ie9使用或window.event不兼容的时候是undefined4.关于鼠标位置区别在于滚动条的时候不一样1).clientX clientY 鼠标到可视区的距离2).pageX pageY鼠标到文档的距离5.关于冒泡：事件默认（一直存在的）是会一直向上传递的（事件从子元素开始到父级直到d

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

各种设置宽高、距离的获取1.可视区的宽高document.document.clientWidth,…Height2.补充～记住：获取其他的元素：document.head~headdocument.body～bodydocument.title（title的文本内容）~titledocument.documentElement~html3.只读：盒模型中的宽高获取：clientWidth=content+paddingclientHeight=content+paddingoffse

原创 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与const1)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.绝对值 abs2.max 一组数中得到最大的数值min 一组数中得到最小的数值max 和 min都需要传入一组数据3.指数函数 pow4.π的表示 PI5.三角函数 sin cos tan注意：角度 和 弧度 的转换360 = 2π弧度=角度*π/1801.绝对值2.max min结果3.指数函数 pow(a,b)传入两个参数，a指数值，b指指数是多少结果 2434.π的表示 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-20console.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);//undefinedvar x=10;//解析如下var x;console.log(X);//所以打印undefinedx=10;//区别于letconsole.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如果不是：就是 false3. 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为真 返回BA为假 返回A如何判读一个值到底是真还是假？数据 进行识别转换转成布尔类型，该怎么转？六大假值："" 0 undefined null NaN false例如：3&&2 输出2或者...

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

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

原创 三目运算符

二选一的时候使用三目运算符选择判断条件：A?B:CA:条件（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.css2.书写公共样式：< 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）媒体查询：能够检...