冒泡:从里到外
捕获:从外到里
举例:
div,body,html,doc
doc,html,body,div
function Parent1(){ this.name='parent1' this.play=[1,2,3] } function Child1(){ this.type='child2' } Child1.prototype=new Parent1()//重要 console.log(new Child1())
缺点:child和parent两个实例使用的是同一个原型对象,他们的内存空间是共享的,一个发生改变,另一个也会改变,
function Patrnt1(){ this.name='parent1' } Patrnt1.prototype.getname=function(){ return this.name } function Child1(){ Parent1.call(this)//重要 this.type='child1' } let child=new Child1() log(child) log(child.getname())//报错
缺点:父类原型对象中一旦存在父类之前自己定义的方法,那么子类将无法继承这些方法。
只能继承父类的实例属性和方法,不能继承原型属性或者方法。
let parent4={ name:"amy" friends["p1","p2"] getname:function(){ return this.name} } let person4=object.creat(parent4)//重要 person4.name="tom" person4.friends.push("jessy")
缺点:多个实例的引用类型属性指向相同的内存,存在篡改的可能,
href:1用在link和a 2是为当前文档和引用建立练习 3浏览器解析:识别为css,并行下载资源并且不会停止对当前文档资源的加载
src;1用在sc,img上 2是替换当前的元素 3 停止其他资源的加载,直接将该资源下载完毕,编译,执行
transform:translate(水平位移,垂直位移); transform:translate(水平位移); transform:translateX(水平位移); transform:translateY(垂直位移); 默认情况: 正值 从上往下,从左往右
使用transform: scale();
属性缩放字体所在元素即可实现小字体显示
基本数据:bool int float double byte short long char
引用数据:数组 字符串
基本数据保存在栈中,而引用数据类型只是地址保存在栈中,具体内容保存在堆中
input select change invalid reset submit
!important>行内样式>id>class|属性>标签>通配符;
h标签 strong标签 nav标签 p标签 ins del
具有可读性,使得文档结构清晰
浏览器便于读取,有利于优化,
利于团队开发和维护,
用户体验好
语义化标签,增强型表单,新增表单元素,新增表单属性,音频、视频,canvas,地理定位,拖拽,本地存储,
transtion animation transform 阴影 边框 text-shadow
let const
可以将属性/值从对象/数组中取出,赋值给其他变量。
剩余运算符 展开运算符
反引号 ¥{}
导入import 导出export
事件代理又叫事件委托,利用的是事件冒泡,事件要绑定很多事件,可以绑定给他的祖先
异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。
代码不按照代码顺序执行
1进程:cpu分配资源的最小单位
2线程:cpu调度的最小单位
3浏览器是多进程的
没打开一个页面,就是一个进程,所以浏览器是多进程的
4js是单线程的
js作为浏览器的脚本语言,主要实现用户和浏览器的交互以及操作dom,所以他只能是单线程的,举个例子,假如js是多线程的,当一个线程要修改一个dom元素,一个线程要删除这个dom元素,浏览器就会不知所措
document.creatElement("div")
父元素.appendChild()
父元素.insertBefore(新节点,谁的前面)
父元素.removeChild()
多次触发只响应最后一次
多次触发只响应其中几次
影响元素的简单样式的改变,如颜色,字体等
影响元素的布局的属性,比如宽高
重绘不一定会引起回流,回流一定引起重绘
SASS是一种CSS的开发工具
1 变量 以$开头
$blue:#111 div{ color: $blue }
2 选择器嵌套 属性也可以嵌套
div h1{ color:red }
可以写成
div{ h1{ color:red } }
border-color属性可以写成(冒号别漏掉)
p{ border:{ color:red } }
3注释 有三种
/**/ 保留在编译后的文件中
// 编译后被省略
/*! 重要注释 即使压缩编译 也会保留,通常用于版权信息
4 继承 允许一个选择器继承另一个选择器 @extend
.class2{ @extends .classs1 }
5 定义一个代码块 @mixin
使用@include命令 调用这个mixin
@mixin left{ float:left margine-left:10px }
div{ @include left }
6 插入文件
@import命令,用来插入外部文件。
7 @if
p{ @if 1+1==2{color:red} @if5<3{color:blue} }
@if lightness($color)>30%{ bgc:#000 }@else{ bgc:#fff }
8 for循环 while循环 each
@for $i from 1to10{ .border-#{$i}{ border:#{$i}px solid blue } }
$i 6; @while $i>0{ .item-#{$i}{width:2em*$i; $i:$i-2 } }
9 自定义函数
@function double($n){ @return $n*2 }
1.方法调用,谁调用指向谁
2.函数调用 没有明确指向 指向window
3.构造函数 指向被构造的对象
4.apply call bind 指向第一个参数
5.箭头函数 指向上一层
6.严格模式下,没有定义,指向undefined
每一个函数执行的时候,会先在自己创建的ao上找对应的属性值,找不到就往自己的父级的ao上面找,再找不到就再上一层的ao,知道找到最大的boss window
用 for循环,if判断,偶数是一个色,奇数是一个色
1translate(x,y)
transform:translate(5px,5px)
2scale(x,y)
transform:scale(0.8,1)
3rotate(deg)
transform:rotate(45deg)
4skew(deg,deg)
transform:skew(30deg,30deg)
5rotateX() rotateY() rotateZ()
transform:rotateX(180deg)
6 perspective
引入css样式
引入js