麦都-平台开发组

javascript学习笔记(基础篇)

写作时间:2018-05-07

此文仅对javascript的基础知识点做梳理。若对具体知识点不了解,请自行搜索或参考权威书籍。  

书写规则 

  • 结束符(;) 
  • 按编写顺序执行 
  • 标识符以字母、下划线(_)或美元符($)开始 

注释 

  • 单行注释 如:// 注释内容 
  • 多行注释 如:/* 注释内容 */ 

变量声明

var (声明提前) 

数据类型 

值类型(可用 typeof 判断) : Number,String,Boolean,Undefined,Null,Symbol(ES6新增类型)

字面量声明的基本数据类型不是对象

 引用类型(用 instanceof 判断) : Array,Function,Object 

语法 

运算符

  • 算术运算符  +,-,*,%,/,++,-- 
  • 赋值运算符 =,+=,-=,*=,%=,/= 
  • 字符串操作 
  • 比较运算符 ==,===,!=,!==,>,=,
  • 逻辑运算符 &&,||,! 
  • 条件运算 如:if...else,a>b?a:b 
条件语句
  •  if...else 
  • switch...case 
循环语句 
  • for 
  • while 
跳转语句 

  • break 结束整个循环 
  • continue 结束本次循环 
  • return 

函数 

  • 定义:由事件驱动或执行它时执行的可重复使用的代码块 
  • 声明 :function 
  • 调用 
  • 带参数 
  • 带返回值 
  • 局部变量和全局变量 

异常处理和事件处理 

异常捕获
  • try{可能发生异常的代码块}catch(error){异常的信息处理} 
事件(常用) 

  • onclick 
  • onmouseover/onmouseout 
  • onchange/onselect/onfoucus/onblur 
  • onload/onunload 
  • 等等 

DOM对象 

Document Object Model 简称
DOM操作HTML

  • getElementById 返回对象 
  • getElementsByTagName 返回对象集合 
  • getElementsByName 返回对象 
  • getAttribute 获取元素属性 
  • setAttribute 设置元素属性 
  • childNodes 访问子节点(包含空白。nodeType: 元素节点为1,属性节点为2,空白节点为3,注释元素为8,文档元素为9) 
  • parentNode 访问父节点 
  • createElement 创建元素节点 
  • createTextNode 创建文本节点 
  • insertBefore 节点列表任意位置插入节点(相对子节点) 
  • removeChild 删除节点 
  • appendChild 末尾插入节点(相对父节点) 
  • clientHeight 视窗大小 
  • offsetHeight 文档高度(不含padding和border) 
  • scrollHeight 滚动高度 
  • innerHTML 或 标签属性 设置内容。如 dom对象.href、dom对象.src 
  • style.样式名(小驼峰式) 如 dom对象.style.color 
DOM事件监听 
  • 添加监听:addEventListener(事件名,事件处理函数)  
  • 移除监听:removeEventLister(事件名,事件处理函数) 
注意: dom对象.addEventListener('click',function(){}) 事件名无on IE9- : dom对象.attachEvent('onclick',function(){}) 事件名有on   

事件 

事件流
  • 事件冒泡 
  • 事件捕获 : 先由外向内捕获事件,再由内向外冒泡事件,再执行默认事件 
事件处理

  • DOM 0级事件(dom.onclick) :同一个对象绑定多个事件时会覆盖 
  • DOM 2级事件(dom.addEventListener):同一个对象绑定多个事件时按顺序执行 
IE9- 事件监听attachEvent(on-)  
事件对象(event) 

type 获取事件类型。如mouseover、click等 

target 获取事件目标 

stopPropagation 阻止事件冒泡 

preventDefault 阻止事件默认行为 

内置对象 
String对象 

  • indexOf 查找字符串索引值,从0开始,不存在返回-1 
  • length 获取字符串长度 
  • match 匹配字符串是否存在,有则返回该字符串,无则返回null 
  • replace(字符串存在内容,替换内容) 替换内容 
  • toUpperCase/toLowerCase 大小写转换 
  • split(分隔符) 字符串转换为数组 
  • slice 
  • substring 

等等 

Date对象 

  • getFullYear 获取年份 
  • getMonth 获取月份(0~11 所以实际月份值需要+1) 
  • getDate 获取日期 
  • getDay 获取星期 
  • getHours 获取小时 
  • getMinutes 获取分钟 
  • getSeconds 获取秒 
  • getTime 转换为毫秒数(+new Date()) 
  • setFullYear(year[,month,day]) 设置日期 
  • toLocalString 根据本地时间把Date对象转换为字符串(不同浏览器返回格式butong) 
Array 对象 

  • 索引号从0开始 
  • concat 合并数组 
  • sort 排序 
  • push 末尾追加元素 
  • reverse 数组元素翻转 
Math 对象 

  • round 四舍五入 
  • random 返回0~1之间的随机数 
  • max 返回最大值 
  • min 返回最小值 
  • abs 返回绝对值 

浏览器对象BOM 

window对象:当前浏览器窗口 

  • 全局对象、函数、变量均自动成为window对象成员 
  • window.innerHeight / window.innerWidth 浏览器窗口内部高度/宽度 
  • window.open 打开新窗口 
  • window.close 关闭当前窗口 
计时器 
  • setInterval/clearInterval 
  • setTimeout/clearTimeout 
History对象 

  • window.history 包含浏览器历史url的集合 
  • history.back 跳转到前一个url 
  • history.forward 跳转到下一个url 
  • history.go(index) 跳转到指定url 
Location对象 

  • window.location 获取当前页面的地址url,并重定向到指定url 
  • location.hostname 返回web主机域名 
  • location.pathname 返回当前页面的路径和文件名 
  • location.port 返回web主机端口 
  • location.protocol 返回使用的web协议(https或http) 
  • location.href 返回当前页面的url 
  • location.assign() 加载新文档 
  • location.replace() 新文档取代当前文档 
注意 assign和replace 是方法。 localtion.href = 'xxx' 同 location.assign('xxx')  
Screen对象 

  • window.screen 用户屏幕信息 
  • screen.availWidth / screen.availHeight 可用屏幕宽度/高度 
  • screen.width / screen.height 屏幕宽度/高度