[笔记]慕课网 - JavaScript 语言

1 JavaScript 进阶篇

1.1 变量

变量名字可以任意取,只不过取名字要遵循一些规则:

  • 必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。
  • 变量名区分大小写,如:A 与 a 是两个不同变量。
  • 不允许使用 JavaScript 关键字和保留字做变量名。

1.2 事件

事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

主要事件表:

事件 说明
onclick 鼠标单击事件
onmouseover 鼠标经过事件
onmouseout 鼠标移开事件
onchange 文本框内容改变事件
onselect 文本框内容被选中事件
onfocus 光标聚集
onblur 光标离开
onload 网页导入
onunload 关闭网页

1.3 JavaScript 内置对象

1.3.1 对象

JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法。

属性 反映该对象某些特定的性质的,如:字符串的长度、图像的长宽等;

objectName.propertyName

方法 能够在对象上执行的动作。例如,表单的“提交”(Submit),时间的“获取”(getYear)等;

objectName.methodName()

1.3.2 Date

  1. 方法

    以下表格用 # 省略 get/set, 其意思为 返回/设置

    方法名称 功能描述
    #Date() #日期
    #FullYear() #年份,用四位数表示
    #Year() #年份
    #Month() #月份(0:一月…11:十二月,所以加一)
    #Day() #星期(0:星期日,1:星期一…6:星期六)
    #Hours() #小时,24 小时制
    #Minutes() #分钟数
    #Seconds() #秒钟数
    #Time() #时间(毫秒为单位)

1.3.3 String

  1. 方法
    方法名称 功能描述
    charAt(index) 返回制定位置的字符
    indexOf(substring, startops) 返回某个指定的字符串值在字符串中首次出现的位置
    split(separator, limit) 将字符串分割为字符串数组
    substring(starPos, stopPos) 提取字符串中介于两个指定下标之间的字符
    substr(starPos, length) 从 startPos 位置开始的指定数目的字符串

1.3.4 Math

  1. 属性

    532fe7cf0001e7b505170269.jpg

  2. 方法

    532fe7cf0001e7b505170269.jpg

1.3.5 Array

  1. 定义
    var arrayName = new Array(n); (n 为元素个数)
    var arrayName = [element1, element2, …, elementN];
  2. 方法

    533295ab0001dead05190599.jpg

1.3.6 Window 对象

window 对象指当前的浏览器窗口。

  1. 方法

    535483720001a54506670563.jpg

1.3.7 JavaScript 计时器

  1. 类型
    • 一次性计时器: 仅在指定的延迟时间之后触发一次。
    • 间隔性触发计时器:每隔一定的时间间隔就触发一次。
  2. 方法

    56976e1700014fc504090143.jpg

1.3.8 History 对象

History 对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。

注意:

从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的 history 对象与特定的 window 对象关联。

  1. 属性

    53548c030001759e05840068.jpg

  2. 方法

    53548c200001228206210123.jpg

1.3.9 Location 对象

Location 用于获取或设置窗体的 URL,并且可以用于解析 URL。

  1. 属性图示

    53605c5a0001b26909900216.jpg

  2. 属性

    5354b1d00001c4ec06220271.jpg

  3. 方法

    5354b1eb00016a2405170126.jpg

1.3.10 Navigator 对象

Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。

  1. 属性

    5354cff70001428b06880190.jpg

1.3.11 UserAgent

返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)。

535a3a4a0001e03f06870189.jpg

1.3.12 Screen

screen 对象用于获取用户的屏幕信息。

  1. 属性

    5354d2810001a47706210213.jpg

1.4 DOM 对象,控制 HTML 元素

文档对象模型 DOM(Document Object Model)定义访问和处理 HTML 文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。

DOM 将以下代码

5375ca640001c67307860420.jpg

分解为如下节点层次图

5375ca7e0001dd8d04830279.jpg

HTML 文档可以说由节点构成的集合,DOM 节点有:

  1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
  2. 文本节点:向用户展示的内容,如<li>…</li>中的 JavaScript、DOM、CSS 等文本。
  3. 属性节点:元素属性,如<a>标签的链接属性 href="http://www.imooc.com"。

1.4.1 属性

5375c953000117ee05240129.jpg

  • nodeName 属性: 节点的名称,是只读的。
  • nodeValue 属性:节点的值
  • nodeType 属性: 节点的类型,是只读的。

1.4.2 遍历节点树

53f17a6400017d2905230219.jpg

1.4.3 操作

538d29da000152db05360278.jpg

1.4.4 getElementById, getElementsByName, getElementsByTagName 区别

5405263300018bcf05760129.jpg

1.4.5 可视区域大小

  1. IE9+, Chrome, Firefox, Opera, Safari
    • window.innerHeight - 浏览器窗口的内部高度
    • window.innerWidth - 浏览器窗口的内部宽度
  2. IE8-
    • document.documentElement.clientHeight 表示 HTML 文档所在窗口的当前高度。
    • document.documentElement.clientWidth 表示 HTML 文档所在窗口的当前宽度。

    或者

    Document 对象的 body 属性对应 HTML 文档的<body>标签

    document.body.clientHeight document.body.clientWidth

  3. 兼容性
    var w= document.documentElement.clientWidth
    || document.body.clientWidth;
    var h= document.documentElement.clientHeight
    || document.body.clientHeight;

1.4.6 网页尺寸 scrollHeight

scrollHeightscrollWidth ,获取网页内容高度和宽度。

  1. IE、Opera

    scrollHeight 是网页内容实际高度,可以小于 clientHeight

  2. NS、FF

    scrollHeight 是网页内容高度,不过最小值是 clientHeight 。也就是说网页内容实际高度小于 clientHeight 时, scrollHeight 返回 clientHeight

  3. 兼容性
    var w=document.documentElement.scrollWidth
    || document.body.scrollWidth;
    var h=document.documentElement.scrollHeight
    || document.body.scrollHeight;

1.4.7 网页尺寸 offsetHeight

offsetHeightoffsetWidth ,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。


  1. offsetHeight = clientHeight + 滚动条 + 边框

  2. 兼容性
    var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
    var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

1.4.8 网页卷去的距离和偏移量

5347b2b10001e1a307520686.jpg

  • scrollLeft :设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。
  • scrollTop :设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。
  • offsetLeft :获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
  • offsetTop :获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
  • offsetParent :布局中设置 postion 属性(Relative、Absolute、fixed)的父容器,从最近的父节点开始,一层层向上找,直到 HTML 的 body。

2 DOM 事件探秘

2.1 事件流

描述的是从页面中接受事件的顺序

2.1.1 IE: 事件冒泡流

事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播至最不具体的那个节点(文档)。

2.1.2 Net: 事件捕获流

事件捕获:不太具体的节点应该应该更早接收到事件,而最具体的节点最后接收到事件。

2.2 使用事件处理程序

2.2.1 HTML 事件处理程序

缺点:HTML 和 JS 代码紧密的耦合在一起,都需要修改。

2.2.2 DOM 0 级事件处理程序

较传统的方式:把一个函数赋值给一个事件的处理程序属性。

优点: 可以添加多个事件

用的比较多的方法 <- 简单,跨浏览器的优势

2.2.3 DOM 2 级事件处理程序

定义了两个方法,用于处理指定和删除事件处理程序的操作:

优点: 可以添加多个事件

addEventListener() removeEventListener()

接受三个参数: 要处理的事件名、作为事件处理程序的函数和布尔值

注意:

事件中的 on 要去掉。

布尔值填 false 可以兼容浏览器。

2.2.4 IE 事件处理程序及跨浏览器解决

  1. IE 事件处理程序

    attachEvent() 添加事件 detachEvent() 删除事件

    接受相同的两个参数:事件处理程序的名称和事件处理程序的函数

    不使用第三个参数的原因:IE8 以及更早的浏览器版本只支持事件冒泡。

    注意: 事件中的 on 不能去掉

    支持浏览器:IE, Opera

  2. 跨浏览器解决
    // 跨浏览器事件处理程序
    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] = handler;
    }
    },
    // 删除句柄
    removeHandler : function(element, type, handler) {
    if (element.removeEventListener) {
    element.removeEventListener(type, handler, false);
    } else if (element.removeEvent) {
    element.removeEvent('on' + type, handler);
    } else {
    element['on' + type] = null;
    }
    }
    }

2.3 事件对象

在触发 DOM 上的事件时都会产生一个对象

事件对象 event

2.3.1 DOM 中的事件对象

  1. type 属性:用于获取事件类型
  2. target 属性:用于获取事件目标
  3. stopPropagation() 方法:用于阻止事件冒泡
  4. preventDefault() 方法:阻止事件的默认行为

2.3.2 IE 中的事件对象

  1. type 属性:用于获取事件类型
  2. target 属性:用于获取事件目标
  3. cancelBubble 属性:用于阻止事件冒泡
  4. returnValue 属性:阻止事件的默认行为

2.3.3 兼容性

var eventUtil = {
getEvent : function(event) {
return event ? event:window.event;
},
getType : function(event) {
return event.type;
},
getElement : function(event) {
return event.target || event.srcElement;
},
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation : function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}

2.4 事件探究

2.4.1 鼠标事件

鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的 clientXclientY 属性中。 所有浏览器都支持这两个属性,它们的值表示发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。

Date: <2016-03-13 Sun 16:21>

Author: cowlog

Created: 2016-03-23 Wed 21:30

Emacs 24.5.1 (Org mode 8.2.10)

Validate