javascript总结

注：不包含ES6新标准

JavaScript的组成：完整的JavaScript由ECMAScript（语法）、Browser Objects（DOM、BOM）特性组成。可以在head或body中使用<script>嵌入javascript脚本

语法：

  • 单行注释：//；多行注释：/**/
  • 语句结束使用分号，如果省略，则由解析器确定语句的结尾
  • ECMAScript中的一切（变量、函数名和操作符）都区分大小写
  • Javascript标识符：变量、函数、属性的名字，或者函数的参数
  • 标识符命名规则：
    • 由字母、数字、下划线(_)或美元符号($)组成
    • 不能以数字开头
    • 不能使用关键字、保留字等作为标识符

变量：ECMAScript的变量是松散类型，可以用来保存任何类型的数据，每个变量仅仅是一个用于保存值的占位符而已。

变量的声明与赋值：

  • 变量声明：var 变量名;
  • 变量赋值：声明的同时赋值：var 变量名=值;或先声明后赋值：变量名=值;
  • 省略var声明的变量是全局变量，不推荐省略var操作符来定义全局变量

JavaScript数据类型（基本/简单数据类型）：

  • undefined：只有一个值，即特殊的undefined。一般而言，不存在需要显示的把一个变量设置为undefined值的情况。
  • null：null值表示一个空对象指针，如果定义的变量准备在将来用于保存对象，那么最好将改变量初始化为null而不是其他值。（undefined值是派生自null值的，所以undefined==null的返回结果是true）
  • boolean：用于表示真假的类型，即true为真，false为假。Boolean(str)用于将str转换为布尔类型
    • 除0外的所有数字，转换为布尔类型都为true
    • 除""之外的所有字符，转换为布尔类型都为true
    • null和undefined转换成布尔类型都为false
  • number：表示整数和浮点数
    • NaN：即非数值（not a number），是一个特殊的数值
    • 任何涉及NaN的操作（如NaN/10）都会返回NaN
    • NaN与任何值都不相等，包括NaN本身
    • isNaN()：检测n是否为“非数值”，参数n可以是任何类型，返回值为boolean。isNaN()对接收的数值，先尝试转换为数值，再检测是否为非数值。
    • 非数值转换为数值：
      • Number()：可以用于任何数据类型
      • parseInt()：用于把字符串转换成数值。会忽略字符串前面的空格，直至找到第一个非空格字符。parseInt()转换空字符串时返回NaN，该函数提供第二个参数，即转换时使用的基数
      • parseFloat()：用于把字符串转换成数值。从第一个字符开始解析每个字符，直至遇见一个无效的浮点数字符为止。除了第一个小数点有效外，parseFloat()与parseInt()的第二个区别在于它始终都会忽略前导的零
  • string：用于表示由零或多个16位unicode字符组成的字符序列，即字符串。字符串可以用双引号("")或单引号('')表示
    • toString()与String()：str.toString()，将str转换为字符串，返回值为str的一个副本。str是要转换的内容，可以是数值、布尔值、对象和字符串。在不知道要转换的值是不是null或undefined的情况下，还可以使用String()函数，它能够将任何类型的值转换成字符串
  • typeof：检测变量类型，typeof 变量 或 typeof(变量)，返回值为string类型，有可能是string、number、boolean、object、undefined、function

表达式：将同类型的数据（如常量、变量、函数等）用运算符号按一定的规则连接起来的、有意义的式子称为表达式

操作符：

  • 算数操作符：+, -, *, /, %
    • ++a / --a：先返回递增之后的a值
    • a++ / a--：先返回a的原值，再返回递增之后的值
  • 逻辑操作符：&&, ||, !
    • &&：只要有一个条件不成立，则返回false。在有一个操作数不是布尔值的情况，逻辑与操作就不一定返回值，此时它遵循下列规则：
      • （两个操作数的情况）如果第一个操作数隐式类型转换后为true，则返回第二个操作数
      • （两个操作数的情况）如果第一个操作数隐式类型转换后为false，则返回第一个操作数
      • （当前面的操作数隐式类型转换后为true的情况）如果有一个操作数是null，则返回null
      • （当前面的操作数隐式类型转换后为true的情况）如果又一个操作数是NaN，则返回NaN
      • （当前面的操作数隐式类型转换后为true的情况）如果有一个操作数是undefined，则返回undefined
    • ||：只要有一个条件成立，返回true。在又一个操作数不是布尔值的情况，逻辑或操作就不一定返回布尔值，此时它遵循下列规则：
      • 如果第一个操作数隐式类型转换后为true，则返回第一个操作数
      • 如果第一个操作数隐式类型转换后为false，则返回第二个操作数
      • 如果两个操作数为null，则返回null
      • 如果两个操作数为NaN，则返回NaN
      • 如果两个操作数是undefined，则返回undefined
    • ！：无论操作数是什么数据类型，逻辑非都会返回一个布尔值，！！同时使用两个逻辑非操作时，第一个逻辑非操作会基于无论什么操作数返回一个布尔值，第二个逻辑非则对该布尔值求反。
  • 赋值操作符：=， +=， -=， *=， /=， %=
  • 比较操作符：返回boolean类型，>, <, >=, <=, ==, ===, !=, !==
    • ==：相等，只比较值是否相等
    • ===：全等，比较值的同时比较数据类型是否相等
    • !=：不相等，比较值是否不相等
    • !==：不全等，比较值的同时比较数据类型是否不相等
  • 三元操作符：条件？执行代码1:执行代码2;

if条件语句

if (condition) {
  statement1;
} else {
  statement2;
}

switch语句

switch(expression) {
  case value1:
    statement;
    break;
  case value2:
    statement;
    break;
  default:
    statement;
}

for语句

for(语句1；语句2；语句3) {
  被执行的代码块;
}

// 语句1：在循环开始前执行
// 语句2：定义运行循环的条件
// 语句3：在循环已被执行后执行

while语句

while (条件) {
  需要执行的代码；
}

do-while语句：语法的循环至少要被执行一次

do {
  需要执行的代码
} while(条件)

break语句：立即退出循环

continue语句：结束本次循环，继续开始下一次

函数：通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。

  • 函数使用function声明

    function functionName([arg0, arg1, arg2,...,argn]) {
  statements;
}

// functionName是要定义的函数名，属于标识符
// arg0等为函数的参数
// []中的内容不是必须的

// 函数的调用：函数名([arg1,arg2,...argn])

  • 函数的返回值：通过return语句，后面跟着返回值来实现返回值

  • arguments：ECMAScript中的参数在内部用一个数组来表示，在函数体内通过arguments对象来访问这个数组参数。arguments对象只是与数组类似，并不是Array的实例；[]语法访问它的每一个元素；length属性确定传递参数的个数

JavaScript中的内置对象

  • Array数组
    • 创建数组的基本方式
      • 使用Array构造函数，new Array()；括号说明，预先知道数组要保存的项目数量，向Array构造函数中传递数组应包含的项
      • 使用数组字面量表示法：由一对包含数组项的方括号[]表示，多个数组项之间以逗号隔开
    • 数组元素的读写：读取和设置值时，使用方括号[]并提供相应索引。索引是从0开始的正整数
    • 获取数组的长度：array.length，返回number。通过设置length可以从数组的末尾移除项或向数组中添加新项；把一个值放在超出当前数组大小的位置上时，会重新计算数组长度值，长度值等于最后一项索引加1.
    • arrayObject.push(newele1, newele2,...neweleX)：把它的参数按顺序添加到arrayObject的尾部。返回值为指定的值添加到数组后的新长度。
    • arrayObject.unshift(newele1, newele2,...neweleX)：把它的参数按顺序添加到arrayObject的开头。返回值为指定的值添加到数组后的新长度。
    • arrayObject.pop()：删除arrayObject的最后一个元素。返回值为被删除的那个元素。
    • arrayObject.shift()：删除arrayObject中的第一个元素。返回值为被删除的那个元素。
    • arrayObject.join(separator)：用于把数组中的所有元素放入一个字符串。返回值为字符串
    • arrayObject.reverse()：用于颠倒数组中元素的顺序。返回值为数组。
    • arrayObject.sort(sortby)：用于对数组的元素进行排序。返回值为数组。即使数组中的每一项都是数值，sort()方法比较的也是字符串。sort()方法可以接收一个比较函数作为参数。
    • arrayObject.concat(arrayX,arrayY,...arrayX)：用于连接两个或多个数组。返回值为数组。
    • arrayObject.slice(start, end)：从已有的数组中返回选定的元素。返回值为数组。
      • start（必需）规定从何处开始选取，如是负数，从数组尾部开始算起。
      • end（可选）规定从何处结束选取，是数组片断结束处的数组下标。
      • 如没指定end，切分的数组包含从start到数组结束的所有元素。
      • 如slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。
    • splice()方法：
      • 删除：arrayObject.splice(index, count)：删除从index处开始的零个或多个元素。返回值为含有被删除的元素的数组。count是要删除的项目数量，如果设置为0，则不会删除项目。如果不设置，则删除从index开始的所有值。
      • 插入：arrayObject.splice(index, 0, item1,...itemX)：在指定位置插入值。返回值为数组。index是起始位置，0为要删除的项数，item1...itemX为要插入的项。
      • 替换：arrayObject.splice(index, count, item1,...item)：在指定位置插入值，且同时删除任意数量的项。返回值为从原始数组中删除的项（如果没有删除任何项，则返回空数组）。index为起始位置，count为要删除的项数，item1,...itemX为要插入的项
    • arrayObject.indexOf(searchvalue, startIndex)：从数组的开头（位置0）开始向后查找。返回值为number，为查找的项在数组中的位置，没有找到的情况下返回-1。searchvalue为必需，表示要查找的项。startIndex为可选，为起点位置的索引。
      • 在比较第一个参数与数组中的每一项时，会使用全等操作符，即要求查找的项必需严格相等。
    • arrayObject.lastIndexOf(searchvalue, startIndex)：从数组的末尾开始向前查找。返回值为number，为查找的项在数组中的位置，没有找到的情况下返回-1。searchvalue为必需，表示要查找的项。startIndex为可选，为起点位置的索引。
      • 在比较第一个参数与数组中的每一项时，会使用全等操作符，即要求查找的项必需严格相等。
  • String字符串
    • stringObject.charAt(index)：返回stringObject中index位置的字符。
    • stringObject.charCodeAt(index)：返回stringObject中代表index位置的字符的UTF-16码的值，没有找到返回NaN。
    • stringObject.indexOf("o")：从一个字符串中搜索给定的子字符。返回值为数值，为子字符串的位置，如果没有找到返回-1。
    • stringObject.lastIndexOf("o")：从一个字符串中搜索给定的子字符。返回值为数值，为子字符串的位置，如果没有找到返回-1。
    • stringObject.slice(start, end)：截取子字符串。start为必需，指定子字符串的开始位置。end为可选，表示子字符串的结束位置，end本身不再截取范围之内，省略时截取至字符串的末尾
      • 最后一个参数省略时，截取到末尾。
      • 参数为负数时，其值为字符串长度+该负数。
      • 不包含最后参数本身。
    • stringObject.substring(start, end)：与slice()方法相同。
      • 当参数为负数时，自动将参数转换为0.
      • substring()会将较小的数作为开始位置，将较大的数作为结束位置。
    • stringObject.substr(start, len)：截取子字符串。
      • start：必需，指定子字符串的开始位置
      • len：可选，表示截取的字符总数，省略时截取至字符串的末尾
      • 当start为负数时，会将传入的负值与字符串的长度相同
      • 当len为负数时，返回空字符串
    • stringObject.split(separator)：把一个字符串分割成字符串数组。返回值为Array。separator分隔符为必需。
    • stringObject.replace(regexp/substr, replacement)：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。返回值为string。参数regexp为必需，规定子字符串或要替换的模式的regexp对象。replacement为必需，是一个字符串值。
    • stringObject.toUpperCase()：把字符串转换为大写
    • stringObject.toLowerCase()：把字符串转换为小写
  • Math
    • Math.min(num1,num2,...numN)：求一组数中的最小值，并返回
    • Math.max(num1,num2,...numN)：求一组数中的最大值，并返回
    • Math.ceil(num)：向上取整，返回大于num的最小整数。
    • Math.floor(num)：向下取整，返回num的整数部分
    • Math.round(num)：将数值四舍五入为最接近的整数，并返回
    • Math.abs(num)：返回num的绝对值
    • Math.random()：返回大于等于0小于1的一个随机数。
      • 求n到m之间的随机整数：random=Math.floor(Math.random()*(m-n+1)+n);
  • Date
    • 创建一个日期对象：var date = new Date();不传参的情况下，返回当前的日期时间对象。如果想根据特定的日期和时间创建日期对象，必须传入表示该日期的毫秒数或者是一组用逗号隔开的表示年月日时分秒的参数。
    • date.getFullYear()：返回4位数的年份
    • date.Month()：返回日期中的月份，返回值为0-11
    • date.getDate()：返回月份中的某一天
    • date.getDay()：返回星期，返回值为0-6
    • date.getHours()：返回小时
    • date.getMinutes()：返回分
    • date.getSeconds()：返回秒
    • date.getTime()：返回表示日期的毫秒数
    • date.setFullYear(year)：设置4位数的年份
    • date.setMonth(mon)：设置日期中的月份，0-11
    • date.setDate()：设置日期
    • date.setHours()：设置小时
    • date.setMinutes()：设置分
    • date.setSeconds()：设置秒
    • date.setTime()：以毫秒数设置日期，会改变整个日期

JavaScript Error:

  • 语法错误：不符合javascript语法的错误。控制台会报错，不可能运行成功。

  • 运行时错误（runtime error）：代码没有语法错误，而在运行时才发生的错误，有可能运行成功。变量引用异常触发ReferenceError、类型使用错误时触发TypeError、爆栈时触发RangeError

  • 主动触发错误：当发生一些不可避免的错误时，可以使用throw来抛出，throw new Error('arguments');

  • try catch：处理不可避免的错误

    // 如果内部的代码抛出错误，则代码直接跳入catch块运行，且把错误对象赋值给catch括号内的变量

try {
  var x = null;
  console.log(x.foo);
} catch(e) {
  console.log(e);
} finally {
  //finally 块是一定会执行的
}

事件：可以被javascript侦测到的行为，当用户与web页面进行某些交互时，解释器就会创建相应的event对象以描述事件信息。常见的事有：用户点击页面上的某项内容、鼠标经过特点的元素、用户按下键盘上的某个按键、用户滚动窗口或改变窗口的大小、页面元素加载完成或失败

事件句柄：事件处理函数、事件监听函数，用于响应某个事件而调用的函数。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数/语句

DOM：Document Object Model，文本对象模型，是javascript操作HTML文档的接口，使文档操作变得非常优雅、简便。DOM最大的特点就是将文档表示为节点树。

nodeType常用属性值：节点的nodeType属性可以显示这个节点具体的类型

nodeType值 节点类型
1 元素节点，例如<p>, <div>
3 文字节点
8 注释节点
9 document节点
10 DTD节点

延迟运行：在测试DOM代码时，通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应html节点。可以使用window.onload = function(){}事件，使页面加载完毕后，再执行指定代码。

访问元素节点：获取页面上的元素节点

  • document对象：几乎所有的DOM的功能都封装在document对象中，document对象也表示整个html文档，它是DOM节点树的根

  • document.getElementById()：通过id得到元素。参数就是元素节点的id，注意不要写#号。如果页面上有相同的id元素，则只能得到第一个

    <!--HTML代码-->
<div div id="box">我是一个盒子</div>
<p id="para">我是一个段落</p>

// JS代码
var box = document.getElementById('box');
var para = document.getElementById('para');

  • document.getElementByTagName()：通过标签名得到元素数组。数组方便遍历，从而可以批量操控元素节点；即使页面上只有一个指定标签名的节点，也将得到长度为1的数组；任何一个节点元素也可用调用该方法，从而得到其内部的某种类的元素节点

    <!--HTML代码-->
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>

// JS代码
var ps = document.getElementByTagName('p');

  • document.getElementByClassName()：通过类名得到节点数组。某个节点元素也可用调用该方法，从而得到其内部的某类名的元素节点

    <!--HTML代码-->
<div class="spec">我是一个盒子</div>
<div>我是一个盒子</div>
<div class="spec">我是一个盒子</div>
<div class="spec">我是一个盒子</div>

// JS代码
var spec_divs = document.getElementByClassName('spec');

  • document.querySelector()：通过选择器得到元素。该方法只能得到页面上的一个元素，如果有多个元素符合条件，则只能得到第一个元素

    <!--HTML代码-->
<div id="box1">
  <p>我是段落</p>
  <p class="spec>我是段落</p>
  <p>我是段落</p>
</div>

// JS代码
var the_p = document.querySelector('#box1 .spec');

  • document.querySelectorAll()：通过选择器得到元素数组。即使页面上只有一个符合选择器的节点，也将得到长度为1的数组

关系节点：文本节点也属于节点。空白文本节点也应算作节点

关系 考虑所有节点 只考虑元素节点
子节点 childNodes children
父节点 parentNode parentNode
第一个子节点 firstChild firstElementChild
最后一个子节点 lastChild lastElementChild
前一个兄弟节点 previousSibling preciousElementSibling
后一个兄弟节点 nextSibling nextElementSibling

  • 寻找所有元素子节点

    //类似children的功能
function getChildren(node) {
  var children = [];
  // 遍历node这个节点的所有子节点，判断每一个子节点的nodeType属性是不是1。如果是1，则推入结果数组
  for (var i = 0; i < node.childNodes.length; i++) {
    if (node.childNodes[i].nodeType == 1) {
      children.push(node.childNodes[i]);
    }
  }
  return children;
}

  • 寻找前一个元素兄弟节点

    //类似previousElementSibling的功能
function getElementPrevSibling(node) {
  var o = node;
  while (o.previousSibling != null) {
    if (o.previousSibling.nodeType == 1) {
      return o.previousSibling;
    }
    o = o.previousSibling;
  }
  return null;
}

  • 获得某元素的所有兄弟节点

    function getAllElementPrevSibling(node) {
  // 前面的元素兄弟节点
  var prevs = [];
  // 后面的元素兄弟节点
  var nexts = [];
  var o = node;

  // 遍历node的前面的节点
  while (o.previousSibling != null) {
    if (o.previousSibling.nodeType == 1) {
      prevs.unshift(o.previousSibling);
    }
    o = o.previousSibling;
  }
  o = node;
  // 遍历node的后面的节点
  while (o.nextSibling != null) {
    if (o.nextSibling.nodeType == 1) {
      next.push(o.nextSibling);
    }
    o = o.nextSibling;
  }
  // 将两个数组合并
  return prevs.concat(nexts);
}

改变元素节点中的内容：

  • innerHTML属性能以HTML语法设置节点中的内容
  • innerText属性只能以纯文本的形式设置节点中的内容

改变元素节点的CSS样式：

// CSS属性要写成“驼峰”形式
oBox.style.backgroundColor = 'red';
// CSS属性值要设置成完整形式
oBox.style.backgroundImage = 'url(images/1.jpg)';
// 注意单位的书写
oBox.style.fontSize = '32px';

改变元素节点的HTML属性

  • 标准W3C属性，如src、href等，只需要直接进行更改即可

    oImg.src = 'images/2.jpg';

  • 不符合W3C标准的属性，要使用setAttribute()和getAttribute()来设置、读取。

    oBox.setAttribute('data-n', 10);
var n = oBox.getAttribute('data-n');

节点的创建：var oDiv = document.createElement('div');用于创建一个指定的tag name的html元素。

孤儿节点：它并没有被挂载到DOM树上。必须继续使用appendChild()或insertBefore()方法将孤儿节点插入到DOM树上。

  • appendChild()：任何已经在DOM树上的节点都可以调用该方法。它可以将孤儿节点挂载到它的内部，成为它的最后一个子节点。父节点.appendChild(孤儿节点);
  • insertBefore()：任何已经在DOM树上的节点，都可以调用该方法，它可以将孤儿节点挂载到它的内部，成为它的“标杆子节点”之前的节点

移动节点：如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数，这个节点将会被移动。这意味着一个节点不能同时位于DOM树的两个位置。

新父节点.appendChild(已经有父亲的节点);
新父节点.insertBefore(已经有父亲的节点，标杆子节点);

删除节点：父节点.removeChild(要删除的子节点);方法从DOM中删除一个子节点。节点不能主动删除自己，必须由父节点删除它。

克隆节点：cloneNode()方法可以克隆节点，克隆出的节点是“孤儿节点”

var 孤儿节点 = 老节点.cloneNode();
var 孤儿节点 = 老节点.cloneNode(true);

/* 参数是一个布尔值，表示是否采用深度克隆。如果为true，则该节点的所有后代节点也都会被克隆。
     																如果为false，则只克隆该节点本身。*/

HTML事件：直接在HTML元素标签内添加事件，执行脚本

  • 在事件触发的函数中，this是对该DOM对象的引用。

  • 语法：<tag 事件=“执行脚本”></tag>

    <button onclick="alert('hello')">按钮</button>

  • 不建议使用：多元素绑定相同事件时，效率低。同时不建议在html元素中写javascript代码，违反来“内容与行为相分离”的原则，尽可能少用

DOM0级事件：ele.事件=执行脚本在DOM对象上绑定事件。执行脚本可以是一个匿名函数，也可以是一个函数的调用。实现来内容与行为相分离，但元素只能绑定一个监听函数.兼容所有浏览器

document.getElementById("btn").onclick = function(){//...}
document.body.onload = init;
function init() {//...}

DOM2级事件：高级事件处理方式，一个事件可以绑定多个监听函数，但要注意浏览器兼容性问题。支持同一dom元素注册多个同种事件。新增捕获和冒泡。

btn.addEventListener("click", function(){}, false);
btn.attachEvent("onclick", function(){});

DOM2事件流

  • element.addEventListener(event, function, useCapture);：用于向指定元素添加事件句柄。event必须，指定事件名。function为必须，指定要事件触发时执行的函数。useCapture为可选，布尔值，指定事件是否在捕获/冒泡阶段执行。
  • element.removeEventListener(event, function, useCapture);：用于移除addEventListener添加的事件句柄。

IE事件流

  • element.attachEvent(event, function);：用于向指定元素添加事件句柄。event必须，指定事件名，必须加“on”前缀。function为必须，指定要事件触发时执行的函数。
  • element.detachEvent(event, function);：用于移除attachEvent添加的事件句柄。
// 兼容所有浏览器
var EventUtil = {
  // 绑定事件
  addHandler: function(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on"+type, handler);
    } else {
      element["on"+type] = null;
    }
  },
  // 移除事件
  removeHandler: function (event, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on"+typem handler);
    } else {
      element["on"+type] = null;
    }
  }

事件周期：解释器创建一个event对象后，会按以下过程将其在html元素间进行传播

  • 一：事件捕获，事件对象沿DOM树向下传播
  • 二：目标触发，运行事件监听函数
  • 三：事件冒泡，事件沿DOM树向上传播
  • 事件冒泡：直系亲属树结构中，点击某个元素，由于冒泡左右，亲属树上的元素凡是添加了事件的，都会被触发
  • 事件捕获：自上而下
  • 事件委托：原理为事件冒泡，最优

鼠标事件

  • onload：页面加载时触发。window.onload
  • onclick：鼠标点击是触发
  • onmouseover：鼠标滑过时触发
  • onmouseout：鼠标离开时触发
  • onfocus：获得焦点时触发。用于input标签type为text、password，以及textarea标签。
  • onblur：失去焦点时触发
  • onchange：域的内容改变时触发。一般作用于select或checkbox或radio。
  • onsubmit：表单中的确认按钮被点击时发生。不是加在按钮上，而是表单上。
  • onmousedown：鼠标按钮在元素上按下时触发。
  • onmousemove：在鼠标指针移动时发生。
  • onmouseup：在元素上松开鼠标按钮时触发。
  • onresize：当调整浏览器窗口的大小时触发。
  • onscroll拖动滚动条滚动时触发。

键盘事件

  • onkeydown：在用户按下一个键盘按键时发生
  • onkeypress：在按下键盘按键时发生（只会响应字母与数字符合）
  • onkeyup：在键盘按键被松开时发生
  • keyCode属性：返回onkeypress、onkeydown、onkeyup事件触发的键的值的字符代码

BOM：browser object model，浏览器对象模型

  • window：window时浏览器的一个实例，在浏览器中，window对象有双重角色。它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的global全局对象。声明一个全局变量：

    window.username="marry";

    • window.alert("content");：显示带有一段消息和一个确认按钮的警告框

    • window.confirm("message");：显示一个带有指定消息和OK以及取消按钮的对话框。返回true/false。

    • window.prompt("text, defaultText");：text为要在对话框中显示的纯文本。defaultText为默认的输入文本。

    • window.open(pageURL, name, parameters);：打开一个新的浏览器窗口或查找一个已命名的窗口。pageURL为子窗口路径。name为子窗口句柄。parameters为参数。

      window.onload = function() {
  window.open("newwindow.html", "newwindow", "width=400, height=200, left=0, top=0, toolbar=no, menubar=np, scrollbars=no, location=no, status=no");
}

    • window.close();：关闭浏览器

  • navigator：navigator.userAgent用来识别浏览器名称、版本、引擎以及操作系统

  • screen：包含有关客户端显示屏幕的信息

    • screen.availWidth：返回可用的屏幕宽度
    • screen.availHeight：返回可用的屏幕高度
    • 获取窗口文档显示区的高度和宽度，可以使用window.innerHeight、window.innerWidth

  • history：保存了用户在浏览器中访问页面的历史记录

    • history.back()：回到历史记录的上一步，相当于使用来history.go(-1)
    • history.forward()：回到历史记录的下一步，相当于使用来history.go(1)
    • history.go(-n)：回到历史记录的前n步
    • history.go(n)：回到历史记录的后n步

  • location：提供来与当前窗口中加载的文档有关的信息，还提供来一些导航的功能，它既是window对象的属性，也是document对象的属性。

    • location.href：返回当前加载页面的完整URL
    • location.hash：返回URL中的hash，如果不包含则返回空字符串
    • location.host：返回服务器名称和端口号
    • location.hostname：返回不带端口号的服务器名称
    • location.pathname：返回URL中的目录和文件名
    • location.port：返回URL中指定的端口号
    • location.protocol：返回页面使用的协议
    • location.search：返回URL的查询字符串
    • location.replace(url)：重新定向url。不会在历史记录中生成新纪录
    • location.reload()：重新加载当前显示的页面

  • document

  • event

    • event.type
    • event.target / event.currentTarget
    • event.preventDefault();
    • event.stopPropagation();
    • event.clientY：指浏览器顶部底边到鼠标位置，不计算滚动轴距离
    • event.pageY：指浏览器顶部底边到鼠标位置，但计算滚动轴的距离
    • event.screenY：指屏幕顶部到鼠标位置的距离
    • chrome, fox, IE9: addEventListener, event.target, preventDefault, stopPropagation
    • IE8: attachEvent, event.srcElement, returnValue, cancelBubble

超时调用：setTimeout(code, millisec);在指定的毫秒数后调用函数或计算表达式。code只执行一次，如果要多次调用，可以让code自身再次调用setTimeout函数

清除超时调用：clearTimeout(id_of_settimeout);取消由setTimeout方法设置的timeout

间歇调用：setInterval(code, millisec);每隔指定的时间执行一次代码

清除间歇调用：clearInterval(id_of_setinterval);取消由setInterval方法设置的interval

javascript数据类型

  • 基本数据类型：number, string, boolean, undefined, null。基本类型的值不能修改。字符串的操作都是返回新字符串，原有字符串不能被修改，不能给基本类型添加属性。基本类型的比较是值的比较。

  • 引用类型：Array, Object。引用类型的值可以添加、修改属性。引用类型的比较是地址的比较，只有指向同一个引用才相等。

  • 总结

    基本类型 引用类型
    不可修改 可以修改
    保存在栈内存中 保存在堆内存中
    按值访问 按引用访问
    比较时，值相等即相等 比较时，同一引用才相等
    复制时，创建一个副本。（复制后互不干涉） 复制的是指针。（复制是同一个引用）
    按值传递参数 按值传递参数
    用typeof检测类型 用instanceof检测类型

javascript作用域：全局作用域和局部作用域。局部作用域生命周期只存在于函数。javascript没有块级作用域。

javascript解析机制：先预解析查找所有var关键字，将undefined赋值给变量，再看全局范围内的function将函数直接拿过来，再局部查找function内的var和function。再逐行读代码。

内存

  • 栈内存：大小固定，地址是连续的。基本类型以及引用类型地址保存在栈内存中。
  • 堆内存：大小不固定，地址不连续。引用类型保存在堆内存中。
  • javascript垃圾收集机制：自动回收，释放无用的数据，内存回收。当变量不用时，可以手动解除它的引用。
    • 标记清除：运行的时候给存储在内存中的所有变量一次性都打上标记，离开作用域的值将会被标记为可回收，将在垃圾收集期间删除几乎所有浏览器都使用标记清除机制，只是回收时间间隔不同。
    • 引用计数：计数引用的次数，为0时回收。可能会导致循环引用的问题使内存的不到释放。
  • 内存管理：分配给web浏览器的内存少于桌面应用程序。

JavaScript对象

var cat = {
  'name': 'Tome',
  'age': 4,
  'speak': function() {
    console.log('mew');
  },
  'friend': {
    'name': 'jerry',
    'age': 4
  }
};

// 对象属性的调用
// 方法一：cat.name
// 方法二：cat['name']

函数：一次封装（定义），四处使用（调用）

  • 字面量，function声明

    function add() {
  // ...body
}

// 调用：add();

  • 字面量，var赋值表达式

    var add = function(arguments) {
  // ...body
};

// 调用：add();该函数定义的方法存在与解析的问题

  • 构造函数

    var add = new Function('num1', 'num2', 'return num1+num2;');

// 调用：add();
// 构造函数的方法不推荐使用

函数的间接调用：

  • call()：调用一个对象的一个方法，以另一个对象替换当前对象。obj.call(方法,var1, var2,...);
  • apply()：应用某一对象的一个方法，用另一个对象替换当前对象。obj.apply(方法,[var1,var2,...]);

posted on 2020-09-16 22:55  DemiMiracle  阅读(79)  评论(0)    收藏  举报