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("我是JavaScript写入文档流的p标签
")
按钮点击事件和单双引号的使用
<button type="button" onClick="alert('我是button弹出的信息')">点我弹出信息button>
alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
就JavaScript本身而言，单引号双引号是没有区别的，但是使用时必须要统一；
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
<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 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。
8.对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。
下面的例子会正确地显示：
document.write("你好 \
世界!");
不过，您不能像这样折行：
document.write \
("你好世界!");
9.JavaScript 对象
JavaScript 对象是拥有属性和方法的数据。
真实生活中的对象，属性和方法
真实生活中，一辆汽车是一个对象。
对象有它的属性，如重量和颜色等，方法有启动停止等:
| 对象 | 属性 | 方法 |
|---|---|---|
| [外链图片转存失败(img-v9IFMV1w-1565965471123)(C:/Users/hp/Desktop/笔记/images/objectExplained.gif)] | 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 语句 try 和 catch 是成对出现的。
语法
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}
finally 语句
finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
<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)值是否存在， 如果不存在，就弹出信息，阻止表单提交：
<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 常用于对输入数字的验证：
<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 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
<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。
<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 是否需要验证 |
<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);
<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 Mediv>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
script>
body>
将鼠标移至文部上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() 。