前端基础

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。本思维导图是web前端基础课程框架结构总结思维导图，

前端

• 软件
  • 系统软件
  • C/S(Client/Server)
  • B/S(Browser/Server)
    • 不用下载
    • 不用更新
    • 多平台使用
• W3C标准
• 主流浏览器
  • 1.市场份额3%以上 2.拥有独立研发的内核
  • shell
  • 内核
    • trident
      • IE
    • Gecko
      • Firefox
    • Webkit/blink
      • Google chrome
    • Webkit
      • Safari
    • presto
      • Opera
• 基础
  • 行为,样式,结构 相分离
  • HTML
    • html
      • SEO技术
      • head
        • meta
        • title
      • 特殊字符
        •  
        • &<lt; &gt;
      • 单标签
        • <br/> 换行 (barter rabbet)
          • wbr软换行
        • <hr/> 水平线 (horizontal rule)
      • body
        • div
          • 编辑器中的空格符,换行符 表示文本分隔符 fjlasjfajfjdsajl 当成一个单词 ,文本超出部分不会换行 中文能识别单个汉字,自动换行
        • span
        • 序列标签
          • ul
            • list-style-type:none; float:left; ul::after{ content:''; display:block; clear:both;
          • ol
            • type
            • reversed
            • start
        • img
          • src
          • alt
          • title
        • a
          • sapn{ text-decoration: underline; color: rgb(0,0,238); cursor: pointer; }
          • 超链接
          • 锚点
          • 打电话
          • 协议限定符
        • font
          • font-size
          • font-weight
            • lighter
            • normal
            • bold(bolder)
            • 100--900
          • font-style
            • italic
          • font-family
            • arial
          • color
            • #ff4400
              • #f40
            • rgba( )
            • red
          • border
            • border-width
            • border-style
              • solid
              • dotted 点状虚线
              • doshed 条状虚线
            • border-color
          • 画三角
            • border:100px solid block
            • width:0 一定要
            • height:0
            • transparent 透明色
        • form
          • method action
          • input
            • type
              • text
              • password
              • radio
              • submit
            • name
            • value
              • 单标签的value值需要指定 双标签的值,即为value值
            • checked
              • 默选
            • checkbox
        • select
          • name
          • option
            • 不用加value option内的值即为value值 冲突时,以value准
    • !DOCTYPE html
      • 不存在这条语句时,引擎使用(怪异模式/混杂模式)渲染,向后兼容
      • document.compatMode的值
        • CSS1Compat
          • 标准模式
        • BackCompat
          • 怪异模式
  • CSS
    • cascading style sheet
    • style
      • 先开发功能,后选配功能
        • 比如先写css(class) 标签初始化 再写html
      • 选择器
        • 选择器 权重(256进制) 行间 1000 id 100 class | 属性 | 伪类 10 标签 | 伪元素 1 通配符 0
        • id 选择器
          • 唯一
        • class选择器 与属性选择器同级
        • 标签选择器
          • 自定义标签
          • 初始化标签
        • 属性选择器 [属性 ]
        • !important关键字
        • 特殊选择器
          • 父子选择器/派生选择器
            • 子选择器找向父选择器
            • 父选择器下的所有子选择器
            • 直接子类 >
          • 并列选择器
            • 多个条件选择一个元素 中间不加空格
              • 用标签选择器时 必须放前面
          • 分组选择器 ， 分开
      • 伪类选择器 (区别伪元素)
        • 选择器 : hover
      • text
        • 文本水平垂直居中
          • text-align:center
          • line-height:容器行高
        • text-indent
          • 文本缩进
        • 单位
          • em
            • 1em = 1* front-size (汉字宽度 文字宽等于高)
          • mm
          • px
            • 一个小格,一个像素,像素点越大,清晰度越低
            • 一英寸长屏幕能排的像素个数,代表清晰度
        • text-decoration
          • line-through
          • none
          • underline
            • 下划线
      • 元素分类
        • display属性设置 带 inline 的元素,都有文字特性 会被分割(换行符 会被当成 文本分割符)
        • 行级元素(inline)
          • 内容决定元素所占位置,不可以通过css改变 宽高
          • span
          • a
          • select
          • strong
          • em
          • del
          • abbr 缩写
        • 块级元素(block)
          • 独占一行 可通过css改变 宽高 默认宽度100% 父类的宽度 默认高度由内容填充
          • div
          • section
          • p
          • ul
            • li
          • ol
            • li
          • form
          • address
        • 行级块(inline-block)
          • 内容决定大小 可以改宽高
          • img
            • 只设置 宽或高 其中一个属性 另一个等比例缩放
            • 让图片间无空隙时,不要换行
        • 伪元素
          • content 属性必须写 display 让其变成块级元素,可用于清楚浮动 每一个元素都有两个伪元素,逻辑前与逻辑后元素 区别伪类选择器 元素::before 元素::after 当成正常元素使用 默认是行级元素
      • H5好东西
        • iframe
          • 引入其它页面
          • src
          • iframeborder
          • scroling
          • srcdoc
        • pre
          • 保留代码格式
          • code
        • img
          • map
            • area
              • shape 区域形状
              • coords 区域
              • href 链接
        • audio+video
          • src
          • controls
          • source
            • type=vedio/mp4
        • writing-mode
          • 子主题
      • CSS3
        • border-radius
          • 对称角设置
        • box-shadow
          • 水平偏移距离 垂直偏移距离 模糊距离 阴影的尺寸 颜色 inset/outset
      • 盒子模型
        • 行级元素只能嵌套行级元素 块级元素只能嵌套块级元素 特列:<p>标签不能套块级元素 <p>标签包裹<div>会被截成两个<p>标签 <a> 不能套<a> li不能嵌套里
        • margin
          • 相对父元素margin
          • body margin = 8px
        • border
          • 三角形
        • padding
          • 上 ,左, 右,下
          • 上,左右, 下
          • 上下,左右
        • content
      • 层模型
        • position
          • 用relative做标杆(当参照) 用absolut定位
          • absolut
            • 脱离原来位置 相对于最近的 有定位的父级定位 left,top时 , 默认为原元素的位置
            • left
            • top
            • right
            • botton
          • relative
            • 保留原来位置定位 (灵魂出窍) 相对于出身(原来)的位置定位
          • fixed
            • 相对于文档窗口定位
            • 相对窗口居中
              • left: 50%
              • top: 50%
              • margin-left: -(vid.width / 2)
              • margin-top: -(vid.height / 2)
          • z-index
            • 设这个之前,必须设定位 z 轴定位 越大,月靠近自己
          • dom.offsetParent
            • 求有定位的父级
        • margin塌陷
          • 子盒子与父盒子共用较大的一个margin,另一个无效
          • bfc
            • block format context 改变盒子少量渲染规则 合理规避副作用
            • overflow:hidden
              • 副作用 超出部分隐藏
            • float
            • display:inline-block
              • 副作用: 不能独占一行了 float 与 position:absolute 内部底层转换成inlineblock
            • position:absolute
              • 副作用: 会覆盖后面的元素
        • margin合并
          • 将其中一个放一个新盒子里,用bfc(修改html元素,不用)
          • 用计算弥补
        • float
          • 浮动元素产生了浮动流 块级元素看不见 产生了bfc的元素, 文本类元素(带inline). 以及 文本 能看到浮动元素
          • clear
            • 包住浮动元素,让最后一个元逻辑素,清楚浮动 只受前一个浮动流影响(会传递) 能清除浮动的必须是 块级元素
      • 两栏布局
        • *{ margin: 0; padding: 0; } .left{ height:100px; width: 100px; background-color: #008000; position: absolute; right: 0; } .right{ background-color: red; height: 100px; margin-right: 100px; } 三栏布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .right{ height:100px; width: 100px; background-color: #008000; position: absolute; right: 0; } .left{ height:100px; width: 100px; background-color: #008000; position: absolute; left:0; } .conter{ background-color: red; height: 100px; margin: 0 100px; } </style> </head> <body> <div class="right"></div> <div class="left"></div> <div class="conter"></div> <script type="text/javascript"> </script> </body> </html>
        • .left
          • margin-right:100px;
        • .right
          • width:100px; height:100px; right:0px; position: absolute
      • 文本溢出
        • 单行文本溢出
          • white-space:nowrap
          • overflow:hidden
          • text-overflow:ellipsis
        • 多行文本溢出
          • 末尾打点
          • 截断
      • 背景图片
        • background-image: url( )
        • background-size: 图片宽 高
        • background-repeat:no-repeat
        • background-position:left top
      • 图片代替文字
        • I.
          • text-indent: 图片宽度
          • white-space: nowrap 不换行
          • overflow:hidden
        • II.
          • height:0
          • padding-top:图片高度
          • overflow:hidden
      • 内盒子左右自适应,居中
        • margin: 0 auto
      • 文本类元素对起
        • 与行块元素 (行块内无文本时) 底对齐
        • (有文本时) 与行块里的文字底对齐
        • vertical-align 相对行块内文本行底部调
    • link
      • 标题小图标
        • rel="icon"
        • type="image/x-icon"
        • href="...../fex.ico"
      • 预解析域名
        • rel="dns-prefetch"
        • href =""
    • 行间样式
  • JavaScript
    • 单线程
      • 轮转时间片
    • ECMAScript
      • 引入
        • Script
          • type
          • src
      • 基础
        • 基础类型
          • Number 全为浮点型
          • NaN
            • NaN != NaN
          • Infinity
        • 逻辑运算符
          • &&
            • 找假值 0 或者 返回最后一个值
          • ||
            • 找真值 1 或者返回最后一个值
              • event = e || window.event
          • !
            • 先转布尔值 再取反
          • 假if
            • 真 && alert("zheng")
        • 条件语句
          • if else-if else
        • 循环
          • for
            • 假while
              • for(; true; ){}
            • for(i =10; console.log("i");breck;)
          • break
          • continue
        • 选择语句
          • switch case
            • break
        • 数组
          • arr.length
        • 对象
        • typeof( 数据 ) 或 typeof 数据
          • typeof(typeof(a)) 不报错 String
          • 显式类型转换
            • Number( )
              • Number( undefined) NaN
            • parseInt("10", radix )
              • 转整数 radix 2-36 描述前面一个参数的基底 从数字为开始看,到非数字位结尾,返回
            • parseFloat( Strintg )
            • String( )
            • Boolean( )
            • .toString( radix 目标数的进制)
              • undefined null 不能用该方法
          • 隐式类型转换
            • isNaN ( )
              • Number( ) 结果与NaN比对
            • Nubmber
              • ++ --
              • + 正,-负
              • - * % /
              • > <
            • String
              • +
            • boolean
              • ==
              • ! =
              • undefined == null true
              • Nan == NaN false
              • === 全等于
              • !==
        • 函数
          • function
            • arguments[i] 与形参 有内部映射关系. 但是 是两个变量 形参多了, 不映射 不能定义在,if内
            • 实参
              • 在函数内部 隐式声明变量 传参的时候赋值
              • 不限参数数量
                • 实参列表arguments
            • 形参
              • fun.length
            • return undefined
        • 预编译
          • imply global
            • 未经声明就赋值, 此变量归全局对象所有(window) 全局变量归(window)所有
            • function test(){var a = b =123}
              • 这里b未声明,直接赋值了.即为全局变量
          • GO对象 Global Object
            • 等于 window
          • 四部曲
            • 发生在函数执行的前一刻
            • I. 创建AO对象 (Activation Object)
            • II. 找形参和变量声明,将变量和形参名作为AO的属性名值为undefined
            • III. 将实参与形参相统一
            • IV. 找函数声明,值赋予函数体
          • 执行
            • 使用AO对象的属性或赋值
        • 作用域链
          • a.[[scope]]
            • 1. AO
            • 2. GO
          • 闭包
            • 内部函数被保存到外部
              • 实现共有变量
              • 做缓存
              • 私有化变量
                • 在构造函数中定义的变量
            • 解决闭包 外套一个立即执行函数
              • 加一层 自己特用 的作用域链 利用传参 调换原变量 function test() { var arr = []; for(var i = 0; i < 10; i ++){ (function (j){ // 加了一层作用域链 每个函数的 //j = 0 arr[j] = function (){ // 闭包 console.log(j); } }(i)) } return arr; } var myArr = test(); for(var j = 0; j < 10; j ++){ myArr[j](); //访问了 test里的i 操作了同一个i 面访问时 i = 10 }
          • 立即执行函数
            • 没有名字,函数引用没有被保存,执行完后会被立即释放
            • (function (形参){ }(实参))
            • 函数表达式才能被执行
              • 函数名失效 function test(a, b, c, d){ console.log(a + b + c + d);}(1, 2, 3, 4) function test(a, b, c, d){ console.log(a + b + c + d);} (1, 2, 3, 4)
          • 逗号表达式的值,是最后一个值
        • 对象
          • 创建方法
            • 1. 对象字面量
              • { }
            • 2. 构造函数
              • new Object( )
              • 内部原理
                • new 时
                • 1. 逻辑顶端 var this = Object.create(test.prototype)
                  • 替换初始的 this = windon
                • 2. 给属性赋值
                • 3. return this
                  • 手动捣乱返回
                    • 应用值 捣乱成功
                    • 原始值 导乱失败
            • 3. Object.reate( 原型,definedProperty )
              • Object.reate( null )不继承自Object
              • 经历了var的为不可配置属性 delete不掉
                • var a = 10 与 a = 10
          • 操作
            • 增
            • 删
              • delete obj.属性
                • 属性不存在时,也返回true
            • 改
            • 查
              • obj.name
                • 不存在时,返回undefined
              • obj['name']
              • obj.hasOwnProperty( prop )
          • 包装类
            • new Number(123)
              • * 后 变成原始值
            • 原始值不能有属性
              • var str = "abcd"; str.length = 2; //原始值不能有属性 // new String(str).length // new String("abcd").length = 2; delete console.log( str ) //abcd console.log(str.length) // new String("abcd").length 打印的是包装类的属性
              • 赋值时
                • new Number(123).len = 3 delete
                • new Number(123).len与上面不同 所以报错
              • 调用时
                • str.length = 2; //原始值不能有属性 // new String(str).length
          • 随机数
            • Math.floor(Math.random( ) * 100)
              • Math.random( ) 0-1
        • 对象特性
          • 原型链
            • obj 每个构造函数的原型(.prototype): { }(默认).__proto__ 指向obj 构造出来的默认属性__propto__ 指向构造器的原型
            • obj
            • this = Object.create(Person.propertype)
              • 自定义祖先
              • 提起公有属性
            • __proto__:this.prototype默认(指向) new时对象产生
            • constructor
              • 在原型中可改
          • 继承
            • 1. 原型链
            • 2. 借用构造函数
            • 3. 共享原型
            • 4. 圣杯模式
              • var inherit = (function(){ var F = function () {}; return function inherit(Target, Origin){ F.prototype = Origin.prototype; Target.prototype = new F(); Target.prototype.constucter = Target; Target.prototype.uber = Origin.prototype; } }()) F 变成私有化变量
            • 5. 深度克隆
              • function deepClone(origin, target){ var target = target || {}, toStr = Object.prototype.toString, arrStr = "[object Array]"; for(var prop in origin){ if(origin.hasOwnProperty(prop)){ if(origin[prop] !== "null" && typeof(origin[prop]) == "object"){ target[prop] = (toStr.call(origin[prop]) == arrStr ? [] : {}); deepClone(origin[prop], target[prop]); }else{ target[prop] = origin[prop]; } } } return target; }
        • 特殊指向
          • call 和apply
            • 改变this指向, 传参列表不同
            • call
              • call( obj, 参数 1, 参数2) this替换成obj
            • apply
              • aplly( obj, [argumen数组] )
          • this
            • 1. 预编译时 this --> windon
            • 2. 全局 this --> windon
            • 3. call/apply 改变this 指向
              • arguments.callee 指向自身函数引用
              • caller 被调用的环境
                • 函数的属性
            • 4. obj.func( ) this --> obj
        • 命名污染
          • 命名空间
          • 闭包
        • for in
          • for(var key in deng){ console.log(deng[key]); // 注意 [] }
          • A instanceof B
            • A 是 B构造函数 构造出来的吗 Object 看A 的 原型链上 有没有 B 的原型 [] instanceof Array
            • Object.prototype.toString.call([ ])
          • "属性" in obj
            • 继承的也算
        • 数组
          • 类似对象 splice = function (pos){ pos += pos > 0 ? 0 : this.length }
          • 创建
            • var arr = [ 1, 2, 3, 4]
            • var arr = new Array(10)长度
              • var arr = new Array(10,432)元素
          • 方法
            • 改变原数组
              • arr.push( )
                • Array.prototype.mypush = function(){ for(var i = 0;i < arguments.length; i ++){ this[this.length] = arguments[i]; length ++; } }
              • arr.pop()
              • arr.unshift() 头部添加
              • arr.shigt()
              • arr.reverse()
              • arr.splice(起始位置,长度,添加)
              • arr.sort(function(a,b){ return })
                • 1.写俩参数 2.返回值 0,正(换位),负()不变 [1,2,3,4,5] a b 1 2 1 3 .. .. 2 3 .. ..
            • 不改变原数组
              • arr.concat(arr2)
              • arr.slice(起始,末不包括)
                • arr.slice(起始最前,默认到最后)
              • arr.join(",")
                • 返回字符串 默认豆号连 str.split(" ") 返回数组
          • 类数组
            • 添加在length位置处 以length为中心
            • argument类数组
              • 没有push属性
            • 1.属性为索引
            • 2. 有length属性
              • 转化成类数组
            • push属性
            • splice属性
              • 将{}改为[]
        • try{ } catch(e){ }
          • e.name
          • e.message
        • es5严格模式
          • "use strict"
            • 推荐局部使用
            • es3
              • with(obj){顶层加上obj的AO }
              • argument.callee
              • func.caller
              • var a = b =10
              • 重复的属性与参数
            • 预编译 this = undefined
    • DOM
      • document -->HTMLDocument.prototype --> Document.prototype 继承关系
      • 标签的选中
        • 都是类数组 *
        • ClassName() ie8以下没有
        • Name() 以前部分标签没有
        • querySelector()
          • 非实时的,跟照相一样 ie7及以下没有
      • 节点树
        • parentNode
        • childNodes
        • firstChild/lastChild
        • nextSibling/previousSibling
      • 元素节点树
        • 除了child 其它ie9以下不兼容
        • parentElement
          • 没有 document
        • children
        • firtElementChild
        • nextElementSibling
      • 节点属性
        • 节点类型
          • 元素节点 1
          • 属性节点 2
          • 文本节点 3
          • 注释节点 8
          • document 9
          • DocumentFragment 11
        • nodeName
          • 只读
        • nodeValue
          • 文本节点和注释节点有
        • nodeType
        • attributes
          • div.attributes div属性节点的集合 div.attributes[].name 不能改 div.attributes[].value 可改
        • hasChildNodes()
      • DOM结构树
        • Node
          • Document
            • getElementById() getElementsByTagName() documentElement属性 指代文档的根元素html getElementsByClassName() querySeletorAll() querySeletor()
            • HTMLDocument
              • getElementsByName() body,head 分别指代HTML上的<body><head>标签 可直接使用,不用选择
              • document
            • XMLDocument
          • CharacterData
            • Text
            • Comment
          • Element
            • getElementsByTagName() getElementsByClassName() querySeletorAll() querySeletor()
            • HTMLElement
              • HTMLHeadElement
              • ....
            • XMLElement
          • Attr
      • 操作
        • 创建
          • document.createElement( )
          • document.createTextNode( )
          • document.createComment( )
        • 插入
          • parentNode.appendChild( )
          • parentNode.insertBefore(a,b)
            • 父节点调用,将 a 插入到 b 之前
        • 删除
          • parentNode.removeChild( )
            • 将它从孩子节点拔出
          • node.remove( )
            • 自我销毁
        • 替换
          • parentNode.replaceChild(new,origin)
      • Element节点
        • Element属性
          • innerHTML
          • innerText/textContent
          • Element.className/id
        • Element方法
          • ele.setAttribute( )
          • ele.getAttribute( )
      • Date
        • var date = new Date( )
        • 方法
          • getDate( )
          • getDay( )
            • 星期天为 0
          • getMonth( )
          • getFullYear( )
          • date.setTime( )
        • date.getTime( )
          • 返回时间戳
      • 定时器
        • 定时循环器
          • window.setInterval(function(){}/"代码", time(counst))
            • 返回定时器标识
            • 非常不准,1000时间放任务队列里等待
            • 基于红黑树
          • clearInterval( )
        • 定时器
          • window.setTimeout(function(){ }, 1000)
          • clearTimeout( )
      • 样式查看
        • dom.style 读写行间样式
          • float-->cssFloat
        • window.getComputedStyle(dom,"伪元素")
          • 只读
          • 修改伪元素
            • 更改dom的className
            • className::after{ }
        • ie8以下
          • div.currentStyle.['prop']
    • BOM
      • 滚动条滚动距离
        • function getScrollOffset(){ if(window.pageXOffset){ return { x : window.pageXOffset, y : window.pageYOffset } }else{ return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop } } }
        • window.page(X/Y)Offset
          • ie8级以下不行
        • document.body.scrollLeft/Top
          • 在同一个版本浏览器中,其中有一个必为零,所以相加解决兼容
            • document.documentElement.scrollLeft/Top
        • 滚动条跳转使用
          • window.scrollTo(x,y)/scroll(z,y) 跳转
          • window.scrllBy(x,y)累加滚动
      • 可视区窗口尺寸
        • thml文档的可视窗口尺寸 function getViewportOffset(){ if(window.innerWidth){ return { w : window.innerWidth, h : window.innerHeight } }else{ if(document.compatMode ==="BackCompat"){ return { compat_Mode : "怪异(混杂)模式", w : document.body.clientWidth, h : document.body.clientHeight } }else{ return { compat_Mode : "正常模式", w : document.documentElement.clientWidth, h : document.documentElement.clientHeight } } } }
        • window.innerWith/innerHeight
          • ie,ie8以下不好使
        • 标准模式
          • document.documentElement.clienWidth/Height
        • 怪异模式
          • document.body.clientWidth/Height
      • 查看元素尺寸
        • 静态的
          • domE.getBoundingClientRext()
        • 相对最近有定位父级(没优时相对文档)
          • dom.offsetWidth/Height
          • dom.offsetLeft/Top
          • dom.offsetParent
            • 求有定位的父级
      • 大多数浏览器不会显示默认端口号（http 为 80，https 为 443）。
    • 事件
      • 一个事件只能有一个事件处理模型
      • 事件绑定
        • 绑定事件处理函数
          • div.onclick = function(){ }
            • 只能绑定一个处理函数,等于写在行间(console.log(a)不用写function)句柄绑定 this指向自己
        • 事件监听器
          • dom.addEventListener(事件类型,事件函数,false(是否是事件捕获模型))
            • 可以绑定多个处理函数,不能给同一个函数绑定多次 IE9以下没有 this.指向自己
          • dom.attachEvent('onclick',function(){ });
            • IE独有this指向window 解决 在外部定义函数,执行函数内部使用 函数.call()
      • 部分事件没有冒泡
      • 解除绑定
        • 若绑定匿名函数,则无法解除
        • 取消div.onclick = null/''/false
        • dom.removeEventListener(type,fn,false);
        • dom.detachEvent('on' + type, fn)
      • 事件处理模型
        • 同时出现两种事件模型时,先捕获,再冒泡,在直直接被点击的元素上事件被绑定在前面的先执行
        • 事件冒泡模型
          • 在代码结构上嵌套的元素(非视觉上),子元素的事件传递给父元素
        • 事件捕获模型
          • 只有google浏览器可以实现(新版其他浏览器都有了) IE上没有 在代码结构上嵌套的元素(非视觉上),父元素的事件传递给子元素
          • dom.setCapture()
            • 只有ie能用
          • dom.releaseCapture()
      • 取消冒泡
        • event.stopPropagation()
          • IE9以下不支持(w3c)
        • event.cancelBubble = true
          • IE独有
      • 取消默认事件
        • return false
        • event.preventDefault( )
          • w3c IE9以下不兼容
        • event.returnValue = false;
          • 兼容IE
        • javascript:void(false) 直接返回false
      • IE 浏览器不会自动传参(事件对象),而是传给window.event
        • event = e || window.event
      • 事件源对象
        • 谷歌都有 可以用于事件委托
        • event.target
          • 火狐只有这个
        • event.srcElement
          • IE只有这个
        • target = event.target || event.srcElement
      • 事件
        • 鼠标事件
          • click = onmousedown + onmouseup
            • click事件只能监听左键
          • 右键出菜单
            • document.oncontextmenu
              • return false取消默认
          • mouseenter/mouseleave(新规范)
            • moseover(鼠标覆盖)/mouseout
            • 操作display:none时注意
          • 区分左右键
            • mousedown与mouseup事件的button值区分 e.button
          • 移动端
            • touchstart/touchmove/touchend
        • 键盘类事件
          • keydown/keypress/keyup
            • keydown与keypress区别
              • keypress只能检测字符事件
                • charCode
              • keydown除Fn的所有键
                • 对应which
        • 文本类事件
          • input
            • 只要输入就触发
          • change
            • foucus +起始状态值改变 + blur
        • 窗体类事件
          • window.scroll
            • 只要滚动条滚动就会触发
          • window.load 不用
            • 发生在页面(资源)加载完成之后
            • 默认的,在dom树完成之后就能操作dom
    • json
      • 数据传输模式
      • {"name" : "deng","age" : 123 }
        • 对象的属性必须加双引号(人为规定)
      • JOSN(静态类)
        • JSON.stringify(obj)
          • 将json变成字符串传送格式
        • JSON.parse(str)
      • asychronous javascript an xml ----> ajax
    • tree
      • randerTree = domTree + cssTree
        • 按深度优先原则,生成,将节点挂树上,分线程加载资源,继续解析其它dom节点
      • reflow 重排(效率浪费很大)
        • dom,增删,宽高变化...位置变化,offsetWidth/offsetLeft
      • repaint 重绘 (效率浪费较少)
    • 异步加载js
      • 工具包,初始化包 用异步加载
      • js异步执行
        • defer = "defer" IE9以下可以用
          • 属性名和属性值相等时,可以只写属性名 这个可以将js代码写里面 dom解析完成之时才会被执行
        • aysnc w3c标准
          • 只能加载外部脚本 加载完就执行 执行时异步
        • 创建script标签
          • script.src = "tool.js"
            • 会下载js
              • 当前要等下载完成之后才能使用里面的东西
                • script.onload= function(){ }
                  • 下载完成后,会执行该方法
                • IE检测加载完成
                  • script.readyState 两个值都是再加完毕
                    • loaded
                    • complete
                  • script.ondystatechange = function(){判断状态码 }
                    • 每次状态码改变时执行
          • 插入到页面时,才会执行
            • document.head.appendChild(script)
      • js时间线
        • 1.创建Docment对象,开始解析web页面
          • document.readyState = 'loading'
        • 2.加载外部css
        • 3.加载外部JS
        • 4. 加载需要异步加载的外部 js
          • 异步加载的js不能使用document.write()
            • 清除之前文档流
          • async 加载完就执行 defer 等dom解析完再执行
        • 5. 遇到img 先正常解析dom 然后异步加载src 并继续解析dom
        • 6. 文档解析完成 document.readyState = 'interactive'
        • 7. 文档解析完成后,设有 defer 的脚本执行
        • 8. document对象触发DOMContentLoaded 事件
          • 这个事件只能加事件监听器使用
          • $(document).ready(function(){})
        • 9.async的脚本加载并执行完成,img加载完成,document.readyState = 'complete' window 对象触发looad事件
        • 10 .从此,以异步响应处理用户输入,网络事件等
        • document.onreadystatechange = function(){ }
• 砖石
  • 1克拉 100分
  • 色阶 精核杂质少 d-e-f...z降低
• roseOnly
• 葡萄酒
  • 单宁强度
    • 酒抗氧化的程度
  • 木桶
  • 铁桶
• 不要忽略\n