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