Javascript 复习笔记

JavaScript 基础笔记

1.JavaScript 的用法

HTML 中的脚本必须位于 标签之间。

脚本可被放置在 HTML 页面的 和 部分中。

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:

var person=“Hege”;
var person = “Hege”;

2.JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。

  • 使用 document.write() 方法将内容写到 HTML 文档中。

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

  • 使用 innerHTML 写入到 HTML 元素。

  • 使用 console.log() 写入到浏览器的控制台。

弹窗与代码阻塞

中的语句会先执行,与其位置无关。

改变文档流内容

JavaScript 可以改变文档流内容,可以添加标签事件等;

document.write("<p>我是JavaScript写入文档流的p标签</p>")

按钮点击事件和单双引号的使用

<button type="button" onClick="alert('我是button弹出的信息')">点我弹出信息</button>

alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

就 JavaScript 本身而言,单引号双引号是没有区别的,但是使用时必须要统一

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

请使用 “id” 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>

3. 代码块

JavaScript 语句通过代码块的形式进行组合,块的作用是使语句序列一起执行。

function myfunction()
{
    document.getElementById("demo").innerHTML="Hello world";
}

4. 单行与多行注释

单行注释以 // 开头,多行注释以 /* 开始,以 */ 结尾。

//单行注释
/*
多行
注释
*/

5. 变量声明与赋值

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var X=1;
var Y=2;
var Z=X+Y;
var Y;//当Y第二次声明时不赋值它的值不会被改变

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。

这条语句:

carname=“Volvo”;

将声明 window 的一个属性 carname。

非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。

6.JavaScript 数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

值类型 (基本类型):字符串(String)、数字 (Number)、布尔 (Boolean)、对空(Null)、未定义(Undefined)、Symbol。

引用数据类型:对象 (Object)、数组 (Array)、函数 (Function)。

var length = 16;                         // Number 通过数字字面量赋值 
var points = x * 10;                     // Number 通过表达式字面量赋值
var lastName = "Johnson";                // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];     // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};// Object 通过对象字面量赋值

下面的代码创建名为 cars 的数组:

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):

var cars=["Saab","Volvo","BMW"];

7.JavaScript 字母大小写

JavaScript 对大小写是敏感的

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementByIdgetElementbyID 是不同的。

同样,变量 myVariableMyVariable 也是不同的。

8. 对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。

下面的例子会正确地显示:

document.write("你好 \
世界!");

不过,您不能像这样折行:

document.write \
("你好世界!");

9.JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。

真实生活中的对象,属性和方法

真实生活中,一辆汽车是一个对象。

对象有它的属性,如重量和颜色等,方法有启动停止等:

对象 属性 方法
img car.name = Fiat car.model = 500 car.weight = 850kg car.color = white car.start()car.drive() car.brake()car.stop()

所有汽车都有这些属性,但是每款车的属性都不尽相同。

所有汽车都拥有这些方法,但是它们被执行的时间都不尽相同。

JavaScript 对象是变量的容器。

但是,我们通常认为 “JavaScript 对象是键值对的容器”。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行:

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

对象属性有两种寻址方式:

name=person.lastname;
name=person["lastname"];

访问对象方法

你可以使用以下语法创建对象方法:

methodName : function() { code lines }

你可以使用以下语法访问对象方法:

objectName.methodName()

通常 fullName() 是作为 person 对象的一个方法, fullName 是作为一个属性。

有多种方式可以创建,使用和修改 JavaScript 对象。

同样也有多种方式用来创建,使用和修改属性和方法。

var car = {name:"天籁",model:007,method: function myf(){alert(1);}}
car.method();

10.JavaScript 函数

function myfunc(x,y){
		return x+y;
}
var ad = myfunc(108,5);
alert(ad);
alert(myfunc(100,2));

在函数表达式存储在变量后,变量也可作为一个函数使用:

var x = function (a, b) {return a * b};
var z = x(4, 3);

以上函数实际上是一个 匿名函数 (函数没有名称)。

函数存储在变量中,不需要函数名称,通常通过变量名来调用。

Function() 构造函数

var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);

在 JavaScript 中,很多时候,你需要避免使用 new 关键字。

JavaScript 函数参数

arguments 对象

JavaScript 函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组。

通过这种方式你可以很方便的找到最大的一个参数的值:

x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

通过值传递参数

在函数中调用的参数是函数的隐式参数。

JavaScript 隐式参数通过值来传递:函数仅仅只是获取值。

如果函数修改参数的值,不会修改显式参数的初始值(在函数外定义)。

隐式参数的改变在函数外是不可见的。

通过对象传递参数

在 JavaScript 中,可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部(全局变量)。

修改对象属性在函数外是可见的。

函数提升(Hoisting)

在之前的教程中我们已经了解了 “hoisting(提升)”。

提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。

提升(Hoisting)应用在变量的声明与函数的声明。

因此,函数可以在声明之前调用:

myFunction(5);

function myFunction(y) {
    return y * y;
}

使用表达式定义函数时无法提升。

自调用函数

函数表达式可以 “自调用”。

自调用表达式会自动调用。

如果表达式后面紧跟 () ,则会自动调用。

不能自调用声明的函数。

通过添加括号,来说明它是一个函数表达式:

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。

11.JavaScript 作用域

作用域是可访问变量的集合。

JavaScript 局部作用域

变量在函数内声明,变量为局部作用域。

局部变量:只能在函数内部访问。

JavaScript 全局变量

变量在函数外定义,即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

12.JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为,也可以是用户行为。

以下是 HTML 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常,当事件发生时,你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

在触发点击事件后,JavaScript 执行了替换 demo 中文字为现在时间的代码。

常见的 HTML 事件

下面是一些常见的 HTML 事件的列表:

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个 HTML 元素上移动鼠标
onmouseout 用户从一个 HTML 元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

13.JavaScript 比较 和 逻辑运算符

比较运算符

运算符 描述
=== 绝对等于(值和类型均相等)
!== 不绝对等于(值和类型有一个不相等,或两个都不相等)

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3,下表解释了逻辑运算符:

运算符 描述 例子
&& and (x < 10 && y > 1) 为 true
|| or (x= =5 | | y==5) 为 false
! not !(x==y) 为 true

14.JavaScript switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。

语法

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

15.JavaScript 类型转换

Number()转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。

JavaScript 数据类型

在 JavaScript 中有 5 种不同的数据类型:

  • string
  • number
  • boolean
  • object
  • function

3 种对象类型:

2

  • Object
  • Date
  • Array

2 个不包含任何值的数据类型:

  • null
  • undefined

16.## JavaScript 正则表达式

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符,或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

使用字符串方法

在 JavaScript 中,正则表达式通常用于两个字符串方法 : search()和 replace()。

search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。search 方法可使用字符串作为参数。字符串参数会转换为正则表达式:

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);
var n = str.search("Runoob");

输出结果为:

6

replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

eplace() 方法将接收字符串作为参数:

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");
var txt = str.replace("Microsoft","Runoob");

结果输出为:

Visit Runoob!

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。

正则表达式模式

方括号用于查找某个范围内的字符:

表达式 描述
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符:

元字符 描述
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

使用 test()

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。

以下实例用于搜索字符串中的字符 “e”:

var patt = /e/;
patt.test("The best things in life are free!");

字符串中含有 “e”,所以该实例输出为:

true

你可以不用设置正则表达式的变量,以上两行代码可以合并为一行:

/e/.test("The best things in life are free!")

使用 exec()

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

以下实例用于搜索字符串中的字母 “e”:

/e/.exec("The best things in life are free!");

字符串中含有 “e”,所以该实例输出为:

e

17.JavaScript 错误 - throw、try 和 catch

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。

JavaScript try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

JavaScript 语句 trycatch 是成对出现的。

语法

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

finally 语句

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>不管输入是否正确,输入框都会再输入后清空。</p>
<p>请输入 5 ~ 10 之间的数字:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">点我</button>

<p id="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

</body>
</html>

18.JavaScript 变量提升

JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。

以下两个实例将获得相同的结果:

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

变量提升:函数声明和变量声明总是会被解释器悄悄地被 "提升" 到方法体的最顶部。

JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升,初始化的不会。

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

y 输出了 undefined,这是因为变量声明 (var y) 提升了,但是初始化 (y = 7) 并不会提升,所以 y 变量是一个未定义的变量。

19.JavaScript 表单

TML 表单验证可以通过 JavaScript 来完成。

以下实例代码用于判断表单字段 (fname) 值是否存在, 如果不存在,就弹出信息,阻止表单提交:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>

JavaScript 验证输入的数字

JavaScript 常用于对输入数字的验证:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h1>JavaScript 验证输入</h1>

<p>请输入 1 到 10 之间的数字:</p>

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;

    // 如果输入的值 x 不是数字或者小于 1 或者大于 10,则提示错误 Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "输入错误";
    } else {
        text = "输入正确";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交:

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

20.JavaScript 表单验证

avaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用 JavaScript 来验证其正确性:

  • 验证表单数据是否为空?
  • 验证输入是否是一个正确的 email 地址?
  • 验证日期是否输入正确?
  • 验证表单输入内容是否为数字型?

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说,输入的数据必须包含 @ 符号和点号 (.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
  		return false;
	}
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
	
</body>
</html>

21.JavaScript 验证 API

约束验证 DOM 方法

checkValidity()

如果 input 元素中的数据是合法的返回 true,否则返回 false。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>输入数字并点击验证按钮:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>

<p>如果输入的数字小于 100 或大于300,会提示错误信息。</p>

<p id="demo"></p>

<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("demo").innerHTML = "输入正确";
    }
}
</script>

</body>
</html>

约束验证 DOM 属性

属性 描述
validity 布尔属性值,返回 input 输入值是否合法
validationMessage 浏览器错误提示信息
willValidate 指定 input 是否需要验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>输入数字并点击验证按钮:</p>

<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>

<p>如果输入的数字大于 100 ( input 的 max 属性), 会显示错误信息。</p>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
        txt = "输入的值太大了";
    } else {
        txt = "输入正确";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

22.JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

  • 在对象方法中, this 指向调用它所在方法的对象。
  • 单独使用 this,它指向全局 (Global) 对象。
  • 函数使用中,this 指向函数的所属者,[object Window]。
  • 严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined。
  • 在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素, 即它本身。
  • apply 和 call 允许切换函数执行的上下文环境(context),即 this 绑定的对象,可以将 this 引用到任何对象。

23.JavaScript let 和 const

let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

在相同的作用域或块级作用域中,不能使用 let 关键字来重置 var 关键字声明的变量。

在相同的作用域或块级作用域中,不能使用 let 关键字来重置 let 关键字声明的变量。

在相同的作用域或块级作用域中,不能使用 var 关键字来重置 let 关键字声明的变量。

let 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的。

let 关键字定义的变量则不可以在使用后声明,也就是变量需要先声明再使用。

const 关键字

const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:

const PI = 3.141592653589793;
PI = 3.14;      // 报错
PI = PI + 10;   // 报错

const定义常量与使用let 定义的变量相似:

  • 二者都是块级作用域
  • 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别:

  • const声明的常量必须初始化,而let声明的变量不用
  • const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。

并非真正的常量

const 的本质: const 定义的变量并非常量,并非不可变,它定义了一个常量引用一个值。使用 const 定义的对象或者数组,其实是可变的。也就是我们可以修改部分值,但是我们不能对常量对象重新赋值。

24.JavaScript JSON

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

  • JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
  • JSON 是一种轻量级的数据交换格式。
  • JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

JSON 语法规则

  • 数据为 键 / 值 对。
  • 数据由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键 / 值 对,就像 JavaScript 对象属性。

键 / 值对包括字段名称(在双引号中),后面一个冒号,然后是值:

"name":"Runoob"

JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键 / 值 对:

{"name":"Runoob", "url":"www.runoob.com"}

JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象:

"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]

SON 字符串转换为 JavaScript 对象

首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>为 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script>
var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
	
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>

</body>
</html>

25.javascript:void(0) 含义

href="#" 与 href="javascript:void(0)" 的区别

# 包含了一个位置信息,默认的锚是 **#top** 也就是网页的上端。

而 javascript:void(0), 仅仅表示一个死链接

在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id

如果你要定义一个死链接请使用 javascript:void(0) 。

void() 仅仅是代表不返回任何值,但是括号内的表达式还是要运行。

JavaScript HTML DOM

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

1. 查找 HTML 元素

通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

  • 通过 id 找到 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。

var x=document.getElementById("intro");

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

如果未找到该元素,则 x 将包含 null。

  • 通过标签名找到 HTML 元素

本例查找 id=“main” 的元素,然后查找 id=“main” 元素中的所有

元素:

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
  • 通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class=“intro” 的元素:

var x=document.getElementsByClassName("intro");

2.JavaScript HTML DOM - 改变 HTML

改变 HTML 输出流

在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

<script>
document.write(Date());
</script>

绝对不要在文档 (DOM) 加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=新的 HTML

改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=新属性值
<script>
document.getElementById("image").src="landscape.jpg";
</script>

3.JavaScript HTML DOM - 改变 CSS

改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=新样式
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

4.JavaScript HTML DOM 事件

对事件做出反应

我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

onclick=JavaScript
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
<head>
<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>

</body>

HTML 事件属性

向 button 元素分配 onclick 事件:

<button onclick="displayDate()">点这里</button>

在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。

使用 HTML DOM 来分配事件

向 button 元素分配 onclick 事件:

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

在上面的例子中,名为 displayDate 的函数被分配给 id=“myBtn” 的 HTML 元素。

按钮点击时 Javascript 函数将会被执行。

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后,函数将被触发,将小写字母转为大写字母。</p>

</body>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>
<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文部上</h1>

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

<head>
<script>
function lighton(){
	document.getElementById('myimage').src="bulbon.gif";
}
function lightoff(){
	document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head>

<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>

onfocus

当输入字段获得焦点时,改变其背景色。

<head>
<script>
function myFunction(x){
	x.style.background="yellow";
}
</script>
</head>
<body>

输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时,修改背景色(background-color属性) 将被触发。</p>

</body>

onload

当页面完成加载时,显示一个提示框。

<head>
<script>
function mymessage(){
	alert("消息在 onload 事件触发后弹出。");
}
</script>
</head>

<body onload="mymessage()"></body>

5.JavaScript HTML DOM EventListener

addEventListener() 方法

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄,如:两个 “click” 事件。

你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。

addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制 HTML 标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).

第二个参数是事件触发后调用的函数。你可以使用函数名,来引用外部函数:

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意: 不要使用 “on” 前缀。 例如,使用 “click” , 而不是使用 “onclick”。

事件冒泡或事件捕获?

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中,用户点击

元素, 哪个元素的 “click” 事件先被触发呢?

冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:

元素的点击事件先触发,然后会触发

元素的点击事件。

捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:

元素的点击事件先触发 ,然后再触发

元素的点击事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型:

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

removeEventListener() 方法

removeEventListener()方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

6.JavaScript HTML DOM 元素 (节点)

创建新的 HTML 元素 (节点) - appendChild()

要创建新的 HTML 元素 (节点) 需要先创建一个元素,然后在已存在的元素中添加它。

<script>
//创建一个段落
var para = document.createElement("p");
//创建一个文本
var node = document.createTextNode("这是一个新的段落。");
//将文本插入段落中
para.appendChild(node);
//选中div1 
var element = document.getElementById("div1");
//将段落增加到div1中    
element.appendChild(para);
</script>

创建新的 HTML 元素 (节点) - insertBefore()

以上的实例我们使用了 appendChild() 方法,它用于添加新元素到尾部。

如果我们需要将新元素添加到开始位置,可以使用 insertBefore() 方法:

<script>
//创建一个段落  
var para = document.createElement("p");
//创建一个文本    
var node = document.createTextNode("这是一个新的段落。");
//将文本插入段落中    
para.appendChild(node);
//选中div1  
var element = document.getElementById("div1");
//选中要插入的段落    
var child = document.getElementById("p1");
//将para插入到child开头
element.insertBefore(para, child);
</script>

移除已存在的元素

要移除一个元素,你需要知道该元素的父元素。

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
//移除parent盒子中的child段落
parent.removeChild(child);
</script>

替换 HTML 元素 - replaceChild()

我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
//用para替换child选中的段落    
parent.replaceChild(para, child);
</script>

7.JavaScript HTML DOM 集合 (Collection)

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象类似包含 HTML 元素的一个数组。

以下代码获取文档所有的

元素:

var x = document.getElementsByTagName("p");

集合中的元素可以通过索引 (以 0 为起始位置) 来访问。

访问第二个

元素可以是以下代码:

y = x[1];

HTMLCollection 对象 length 属性

HTMLCollection 对象的 length 属性定义了集合中元素的数量。

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "文档包含" + myCollection.length + " 个段落。";
</script>

集合 length 属性常用于遍历集合中的元素。

修改所有

元素的背景颜色:

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

注意

HTMLCollection 不是一个数组!

HTMLCollection 看起来可能是一个数组,但其实不是。

你可以像数组一样,使用索引来获取元素。

HTMLCollection 无法使用数组的方法: valueOf(), pop(), push(), 或 join() 。

8.JavaScript HTML DOM 节点列表

NodeList 对象是一个从文档中获取的节点列表 (集合) 。

以下代码选取了文档中所有的

节点:

var myNodeList = document.querySelectorAll("p");

NodeList 中的元素可以通过索引 (以 0 为起始位置) 来访问。

访问第二个

元素可以是以下代码:

y = myNodeList[1];

NodeList 对象 length 属性

NodeList 对象 length 属性定义了节点列表中元素的数量。

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似,可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name,id 或索引来获取。

NodeList 只能通过索引来获取,也就是下标。

只有 NodeList 对象有包含属性节点和文本节点。

节点列表不是一个数组!

节点列表看起来可能是一个数组,但其实不是。

你可以像数组一样,使用索引来获取元素。

节点列表无法使用数组的方法: valueOf(), pop(), push(), 或 join() 。