javascript学习笔记(基础篇)

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

书写规则

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

注释

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

变量声明：var (声明提前)

数据类型

• 值类型(可用 typeof 判断) : Number,String,Boolean,Undefined

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

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

语法

• 运算符
  • 算术运算符 +,-,*,%,/,++,--
  • 赋值运算符 =,+=,-=,*=,%=,/=
  • 字符串操作
  • 比较运算符 ==,===,!=,!==,>,<,>=,<=
  • 逻辑运算符 &&,||,!
  • 条件运算 如：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
• DOM操作CSS
  • style.样式名(小驼峰式) 如 dom对象.style.color
• DOM事件监听
  • 添加监听：addEventListener(事件名,事件处理函数)

    注意：
    dom对象.addEventListener('click',function(){}) 事件名无on
    IE9- : dom对象.attachEvent('onclick',function(){}) 事件名有on

  • 移除监听：removeEventLister(事件名,事件处理函数)

事件

• 事件流
  • 事件冒泡
  • 事件捕获 : 先由外向内捕获事件，再由内向外冒泡事件，再执行默认事件
• 事件处理
  • 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 屏幕宽度/高度