- 博客(65)
- 收藏
- 关注
RSS订阅原创 面向对象--拖拽
<style> #box{ width: 100px; height: 100px; background-color: bisque; border-radius: 50%; position: absolute; ...
2020-02-07 10:22:21
101
原创 构造函数的继承
构造函数的继承继承：通过“某一种方式”让一个对象，可以访问并使用到另一个对象中的内容。这种行为我们叫做 继承！继承的作用： 节省了各个构造函数中，大量重复声明的属性和方法。提高了开发效率，并节省了内存继承的方式一： call和apply方法的使用 ，达成了构造函数继承的作用构造函数的继承： 优点 简约易使用缺点 只可以继承(借用) 构造函数中的内容无法继承(借用) 原型中的内容...
2020-02-07 10:21:57
211
原创 操作符
instanceof: 判断一个实例对象 是否是某个函数的实例对象名 instanceof 函数名 // 先引入之前封装的深拷贝的方法 <script src="deepCopy.js"></script> function Animal(){ this.name = "join"; } ...
2020-02-06 17:38:08
118
原创 传值和传址
复杂数据类型–传址：浅拷贝： 只拷贝数值，不拷贝地址。 节省内存。但相互影响 let DadProto = { name :"张三", age:20 } let SonProto = DadProto; SonProto.name = "李四"; console.log(Son...
2020-02-06 17:37:23
185
原创 原型
每次通过构造函数去实例化对象，都会生成一个新的内存空间当项目开发中，往往大量的内存使用，会严重影响性能 function Person(name,sex){ this.name = name; // this.age = age; this.sex = sex; this.hobby = function(){ ...
2020-02-06 17:37:02
51
原创 面向对象创建对象的方式
面向对象它是一个变成思路，不会改变我们预期的效果。优点： 使用面向对象，会让代码的复用性大大的提高，便于迭代创建对象1. 字面量 let nan = "性别"; let obj = { name:"哈哈", nan:"男", age:"17", hobby:function(){ co...
2020-02-06 10:32:26
72
原创 数组的扁平化
数组对象的方法数组扁平化不是一个具体的方法，而是通过具体的方法来达成的效果 let arr = [ ["哈哈",18], ["哈哈",18], ["哈哈",18], ["哈哈",18], ["哈哈",18,["哈哈",17,["哈哈",18]]] ]; arr = arr.flat(3); ...
2020-02-06 10:31:31
80
原创 Es6-数组新增的方法
这个文件中所说的三个方法： 都是构造函数的方法 Array.方法名()不是数组对象的方法，注意调用格式 数组名.方法名()Array.from: 将类数组转化为数组类数组： 有下标，有length， 但是无法使用数组的方法参数1： 需要转化的类数组参数2； 处理的方式(可选的)参数3： 函数执行时this的指向(可选) <ul> <...
2020-02-05 17:21:17
164
原创 箭头函数和模板字符串
箭头函数的几种方式：1. () => 返回值 function fn(){ //原来的函数 } let fn = () => 2; //箭头函数 console.log(fn());2. 形参 => 返回值 let fn2 = num => num*2; console.log(fn2(10));3. (形参,形参) ...
2020-02-05 17:20:54
249
原创 Set对象和 map对象
Set对象Set: 本质是一个函数作用： 用来构建某一个类型对象通常我们把这类型的函数，叫做 构造函数//Set() 可以接受 指定目标 来作为参数;//和直接使用的区别： 达成去重的目的let arr = [1,2,2,3,3,4,4,5];let s = new Set(arr);console.log(s);[1,2,3,4,5]console.log(s.size);//...
2020-02-05 17:20:27
149
原创 解构赋值和 展开运算符
解构： 解开目标的整体结构赋值： 将目标中的数据 赋值到我们定义的变量中对象的解构赋值：注意点：{}中，名字必须和obj中保持一致也就是说 变量名必须和属性名一致 let {a,b} = obj; console.log(a,b);数组的解构赋值数组中的注意点： 保持顺序一致 let arr = [1,2,3,4,5]; let [q,w,e,r] = arr; conso...
2020-02-05 12:36:27
606
原创 弹性盒模型
开启弹性盒模型 .main{ width:3"rem"; height:5"rem"; background:"red"; display: flex; justify-content:space-around; align-items: center; }根据主轴上的位置变化对齐方式：flex-start:...
2020-02-05 12:35:15
59
原创 响应式布局
@media: 声明关键字screen：设备的类型and : 关键字 (连接，指定)() : 媒体特性(就是屏幕尺寸){} ： 指定的样式当 screen的屏幕尺寸 符合 指定的尺寸时， 执行指定的样式max-width: 屏幕小于等于指定尺寸时 触发 (最多)min-width: 屏幕大于等于指定尺寸时 触发 (最少)移动端开发的两种主流方案之一： 响应式布局兼容...
2020-02-05 09:43:50
143
原创 em 和rem
em 是一个相对的距离单位参考父级的font-size1em == 父级的 1 * font-size备注：em 通过自身父级的字体大小， 会转换为px公式： 实际px == 1em * 父级的字体大小优点： 方便我们设置段落间隙缺点： 当嵌套多层的时候，需要自己去计算rem: 和em基本类似，区别点在于： em相对自身父级的字体， rem只相对html的字体大小rem: ro...
2020-02-05 09:43:12
92
原创 移动端-视口和像素
meta标签： 告诉浏览器一些设置信息是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口的尺寸相匹配meta视口标签存在5个指令width: 设置布局视口的宽度， 一般都是device-width(设备宽度)initial-scale: 初始缩放比例。 1即是100%， 2是200% ，以此类推maximum-scale: 最大缩放比例minimum-scale: 最小缩放比...
2020-02-05 09:42:21
114
原创 es6的let 和 const
使用let 在同一作用域中 声明了相同的变量名，会导致上述错误先使用 后声明 出现的错误let : 写法和var 一致， 用来声明变量 let a = 10; console.log(a);let 和 var 的具体区别：var :重复声明作用域： 全局作用域 函数作用域(局部作用域)可以预解析(变量提升)let :不可以重复声明作用域： 全局作用域 块级作用域(...
2020-02-04 13:46:48
60
原创 自定义动画
自定义动画(也叫关键帧动画)： 其中，制作动画和绑定动画两个过程缺一不可备注:1） 衣服可以制作很多件2） 同一件衣服也可以给多个人穿绑定动画animation 属性是一个简写属性，用于设置六个动画属性：animation-name ：动画名称 必填animation-duration： 动画执行所需的时间 必填animation-timing-function： 动画执行的速...
2020-02-04 13:44:21
328
原创 2d效果
旋转 单位是 度 deg位移 单位是 像素 px <div style="transform: rotateZ(-30deg)">旋转</div> <div style="transform: translateX(150px)">位移</div>缩放 正常比例是 1 大于1 为放大 小于1 为缩小 没有单位 ...
2020-02-03 19:51:10
181
原创 拖拽属性
拖拽属性是H5的新特性：是指鼠标点击源对象之后，不松手将其拖拽到目标对象，或半途松手(释放)的过程拖拽 Drag源对象： 指定的鼠标点击的一个事物，例如： 一个元素，一个图片等目标对象： 指定是我们拖动源对象后，预计要进入的区域1. 被拖动的源对象可以触发的方法：1) ondragstart: 源对象开始被拖动2) ondrag: 被拖动过程中3) ondragend: 源对...
2020-02-03 19:50:45
463
原创 本地储存和临时储存
localStorage : 永久存储(相对)，其中的数据不随着浏览器的开关而改变sessionStorage： 临时存储(相对), 当浏览器关闭时，数据消失(页面刷新时，不会受到影响)使用之前看看是否支持本地储存 var ipt = document.getElementsByClassName("ipt")[0]; var but = document.ge...
2020-02-03 19:49:59
476
原创 html5新增的语义化标签
新增的语义标签主体结构元素 主要用来划分区域 <nav>导航</nav> <article>主体</article> <section>用来表示段或者章节(模块)</section> <aside>主体之外的附属信息 例如侧边广告栏</aside> ...
2020-02-02 16:52:06
109
原创 canvas的基本使用
如果浏览器的版本过低 会导致canvas无法使用 <canvas width="500px" height="300px" id="cc" style="border: 1px solid;"> 请升级浏览器 </canvas>获取标签 var cc = document.getElementById("cc"); 通...
2020-02-02 10:03:47
90
原创 html5的新特性-audio
controls: 用户控制界面(标签自带)autoplay: 自动播放 用于背景音乐loop: 循环播放<audio src="audio/LoginScreenIntro.mp3" controls autoplay id="au"></audio> <button id="btn1">显示播放时间</button> ...
2020-02-01 17:42:02
104
原创 each的使用
判断样式类？ if(需要被判断的目标.is(".类名")){}2. attr和prop的区别 ：相同点： 都是获取或设置元素的属性值不同点：(1) prop是处理元素自带的属性,attr是去处理自定义的DOM的属性(2) 操作固有属性时,prop会返回正确的值，attr会返回undefinedeach():用于循环遍历成员/数据，它常用于多元素或任意数组和对象属性的循环...
2020-02-01 11:05:56
111
原创 jqurey的事件委托
1.什么是事件委托？事件委托是利用事件冒泡来实现，只指定一个事件处理程序 来管理某一类型的所有事件。2.为什么要用事件委托1) 在js中添加到页面的事件处理程序的个数直接关系到页面的整体加载速度因为每个事件处理程序都是一个对象，对象会占用内存。对象越多需要加载的内存就越多2) 有很多个数据的表格以及很长的列表逐个添加事件，对于开发人员而言，就是噩梦。so： 事件委托能极大的提高页面的加...
2020-01-31 17:32:52
75
原创 jqurey事件的绑定
jq 历史中绑定事件的三种方式：1. on/off 2. bind/unbind 3. live/delegete在JQuery 1.7之后 推出了 .on() 和 .0ff()方法 废弃了live() 和 delegete()方法on/off 整合了 bind/unbind 方法所以我们使用较多的绑定方法为 on/off之前使用事件绑定 $(".btn").click(...
2020-01-31 11:13:54
86
原创 jqurey的动画效果
目标.hide() 让目标隐藏（修改的display属性）小括号中，可是设置动画执行的时间目标.show() 让目标显示小括号中，可以设置动画执行的时间 var flag= 1; $(".btn:first").click(function () { flag *= -1; if(flag == "-1"){ ...
2020-01-30 16:33:14
77
原创 JQurey的基本使用
使用jquery, 必须先引入jq库<script src="jquery-3.4.1.min.js"></script>js的变量 var a = 10;jq的变量 var $a = 10; // $ 声明该变量是jq变量 同时$也是JQuery的简写dom的变量 和 jq的变量之间 转换转换为jq变量 var oDiv = d...
2020-01-30 15:47:45
99
原创 JQurey操作dom
js创建节点： var li1 = document.createElement("li");jq创建节点 var $li = $("<li>榴莲</li>");jq 添加节点内容.appendTo(目标);将内容添加到目标 中 的最后一位 $li.appendTo($("ul")); $("<li>芒果<...
2020-01-29 16:59:49
84
原创 JQurey的选择器
1.id$("#cc").css("color","black");2.class$(".cc").css("color","red");3.标签名$("div").css("color","blue");4.通用选择器 $("*").css("color","red");5.层级选择器 console.log($("div>span").html());...
2020-01-29 13:41:04
94
原创 拖拽
<style> .div1{ width: 100px; height: 100px; border: 1px solid; position: absolute; //注意拖拽是 一定要写定位 } </style> <body> <div ...
2020-01-28 15:59:12
134
原创 data
创建一个Date对象概念： Date对象是用来处理时间和日期，内置了一系列获取和设置日期和时间的方法使用：1.每次在使用它之前，都需要配合new关键字， 来生成一个Date对象，2.然后通过Date对象，再去调用各种方法备注： Date获取的是当前计算机的本地时间 var date = new Date(); console.log(date); //当前的时间toLocale...
2020-01-28 12:38:18
106
原创 随机色
颜色的赋值:1. 通过英文名称2. 通过rgb三原色调配比例，来赋值3. 通过16进制位数，来匹配对应的颜色opacity 透明度取值范围 0~11 为不透明， 0为完全透明rgba(): 4个参数 r g b aa : 透明度必须要四个参数，一个都不能少 <style> .box{ width: 1...
2020-01-27 16:45:05
103
原创 Math对象
Math对象： 是js提供给开发者的一款内置常见数学公式的对象所有Math对象中的方法, 都会有返回值。定义一个随机数 Math.random()*(较大的数 - 较小的数) + 较小的数1.范围只确定终点 的随机数 var one = Math.random()*10; console.log(one)//10以内的随机数2.范围两端都确定的 随机数 var t...
2020-01-27 16:44:39
53
原创 事件冒泡与捕获
事件冒泡和捕获的顺序事件监听的添加和删除 以及各自的注意事项阻止事件冒泡普通的事件绑定 <style> .son{ width: 100px; height: 100px; background: yellow; } </style> <div...
2020-01-27 12:23:31
116
原创 作用域链
作用域： 变量的开始创建， 到被系统回收的过程。全局： 在任意函数以外创建的变量局部： 在任意函数内创建的变量ES5中： 只有函数能够生成局部作用域，其他结构不可以作用域链： 先在当前作用域的上下文中查找，找到即执行如果没有，继续向 上 一层查找，找到即执行。如查找到全局中，依然没有，报错，阻断程序运行 var a = 20; function My...
2020-01-26 17:50:15
47
原创 闭包
闭包的本质： 它就是个函数概念： 能够访问其他函数内部变量的 函数条件：1. 在函数中嵌套定义另外一个函数2. 被嵌套的函数(在里面的那个),一定要访问外部函数的变量3， 被嵌套的函数要返回实现的原理： 通过作用域链作用： 能持久化 局部变量, 手动 控制局部变量的回收时间闭包的弊端： 不能够大批量的使用，会造成程序加载过慢. 极容易造成内存泄露 functi...
2020-01-26 17:49:48
76
原创 事件委托
li{ width: 200px; margin-top: 5px; text-align: center; border: 1px dashed; }<script>普通事件绑定 <ul> <li>1</li> <li>2&...
2020-01-22 15:44:12
89
原创 正则
正则表达式(正则对象)： 用来匹配一段字符串中的一些指定内容使用场景： 基本全部用于注册页面, 用户审核和约束用户输入的信息.创建和使用使用new 关键字来创建 var reg = new RegExp(/表达式/);使用字面量的方式来创建 var reg = /表达式/;简单类 var reg = /abc/...
2020-01-21 14:24:52
63
原创 Dom对象
父节点的获取方法： <ul class="ulClass"> <li>周一</li> <li>周二</li> <li>周三</li> <li>周四</li> <li&g...
2020-01-21 14:23:53
57
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人