学习笔记--html篇（1）

html学习--1

href学习

• href="javascript:void(0)" 阻止页面跳转类似于javascript:#，url无变化(死链接，返回undefined)
• href="#" href="?" 阻止页面跳转，url后拼接显示符号

window学习

• 浏览器宽高
  
  window.innerHeight 浏览器内部高度（包含滚动条）
  
  window.innerWidth 浏览器内部宽度（包含滚动条）

• 兼容低版IE
  
  document.documentElement.clientHeight 浏览器高度
  
  document.documentElement.clientWidth 浏览器宽度
  
  document.body.clientHeight
  
  document.body.clientWidth

• 兼容搜索浏览器
  
  var width = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

• 浏览器可用宽/高度
  
  screen.availWidth
  
  screen.availHeight

• 浏览器url
  
  location.href 返回整个url
  
  location.pathname 返回url的路径名
  
  location.assign(url) 加载新页面

• 浏览器前进后退
  
  history.back() 默认退回上一页
  
  history.forward() 默认前进下一页

cookie学习

• cookie介绍
  
  new Cookie('key','value','time','Domain（域名）','path',secure')
  
  key: 键名（必须）
  
  value: 值 （必须）
  
  time: 过期时间
  
  Domain: 生成该cookie的域名
  
  Path: 生成cookie的路径
  
  secure: 设置后只在ssh连接下才回传cookie

• 类型检测
  
  typeof '111' 返回string
  
  typeof 3 返回number
  
  typeof NaN 返回number
  
  typeof false 返回boolean
  
  typeof [1,2,3] 返回object
  
  typeof {'id':1} 返回object
  
  typeof date格式 返回object
  
  typeof function 返回function
  
  typeof aaa 返回undefined
  
  typeof null 返回object

• constructor属性
  
  '111'.constructor 返回string
  
  new Date().constructor 返回date
  
  [1,2,3].constructor 返回array

• 小结：typeof无法检测array、date格式，返回结果为object

• promise 解决回调地狱（代码变优雅）

• // 回调地狱
  
  function(){
  
  console.log(3)
  
  function(){
  
  console.log(2)
  
  function(){
  
  console.log(1)
  
  }
  
  }
  
  }

• // promise
  
  new Promise(function(resolve,reject){
  
  console.log(3)
  
  resolve()
  
  }).then(function(resolve,reject){
  
  console.log(2)
  
  resolve()
  
  }).then(function(resolve,reject){
  
  console.log(1)
  
  }).catch(function(err){
  
  console.log('异常')
  
  }).finally(function(){
  
  console.log('结束')
  
  })

• promise 方法顺序
  
  正常：then--> catch --> finally
  
  顺序可改变
  
  终止then方法：return无效 throw跳转至catch可实现

• 变量声明区别
  
  let: 定义块变量
  
  var: 定义全局变量
  
  const: 定义常量

• let和var区别
  
  let声明全局变量不会作用于window，var可以
  
  let声明变量只可用在其后，var可先使用后声明
  
  相同作用域：let和var不可以同时定义同一个变量名

• 函数 function
  
  arguments ： 函数内置参数
  
  例： var a = func(1,2,3) function func(){ console.log(arguments) }

• 鼠标事件
  
  onmouseover / onmouseout 鼠标经过自身触发事件，经过子元素同样触发 （支持冒泡） 继承
  
  onmouseenter / onmouseleave 鼠标经过自身触发事件，经过子元素不触发 （不支持冒泡） 私有