[TOC]
# 1.1 JavaScript基础概念
JavaScript (ECMAScript) ：JavaScript 是脚本语言。JavaScript和ECMAScript通常被人用来表达相同的含义，但是JavaScript并不是这么一点含义，它是由ECMAScript 核心. DOM 文档对象模型. BOM 浏览器对象模型 这三部分组成。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
## 1.1.1 ECMAScript
组成部分：语法，类型，语句，关键字，保留字，操作符，对象。
## ECMAScript简介
**ECMAScript**是一种由[Ecma国际](https://baike.baidu.com/item/Ecma%E5%9B%BD%E9%99%85)（前身为[欧洲计算机制造商协会](https://baike.baidu.com/item/%E6%AC%A7%E6%B4%B2%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%88%B6%E9%80%A0%E5%95%86%E5%8D%8F%E4%BC%9A/2052072),英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本[程序设计语言](https://baike.baidu.com/item/%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E8%AF%AD%E8%A8%80)。这种语言在[万维网](https://baike.baidu.com/item/%E4%B8%87%E7%BB%B4%E7%BD%91)上应用广泛，它往往被称为[JavaScript](https://baike.baidu.com/item/JavaScript)或[JScript](https://baike.baidu.com/item/JScript)，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
# 1.1.2 DOM
## 文档对象模型（DOM ， Document Object Model）是针对XML但是经过拓展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构，开发人员借助DOM Api对节点进行操作。
# HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
# HTML DOM 树
### 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
### · JavaScript 能够改变页面中的所有 HTML 元素
### · JavaScript 能够改变页面中的所有 HTML 属性
### · JavaScript 能够改变页面中的所有 CSS 样式
### · JavaScript 能够对页面中的所有事件做出反应
# 1.1.3 BOM
## 浏览器对象模型（Browser Object Model）使用BOM控制浏览器显示页面意外的部分。
## 1.2 在HTML中使用JavaScript方式
### 1.2.1 javaScript脚本加载的位置
1 通过在网页中加入…标记JavaScript的开始和结束，将JavaScript代码放到…之间
2 也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名
3 原则上，放在之间。但视情况可以放在网页的任何部分
4 一个页面可以有几个…</Script，不同部分的方法和变量，可以共享。
### 1.2.2 javaScript语句的注意点
（1）对大小写敏感
（2）自动忽略多余的空格
（3）在文本字符串中使用反斜杠对代码行进行换行
（4）单行注释（//）多行注释（/\* \*/）
## 1.3 JavaScript基本语法：
## 1.3.1 变量：
什么是变量？
变量是用于存储信息的容器
变量的声明
语法：
var 变量名
变量名 = 值;
变量要先声明再赋值
变量可以重复赋值
变量的命名规则
变量必须以字母开头；
变量也能以$和\_符号开头（不过我们不推荐这么做）；
变量名称对大小写敏感（a和A是不同的变量)。
## 1.3.2 数据类型
### typeof操作符：用于检测给定变量的数据类型。
### · undefined类型 只有一个特殊的值就是undefined，在使用var声明变量但未初始化时，变量的值是undefined。
### · null类型 只有一个特殊的值就是null，null值表示一个空对象指针，使用typeof操作符检测null值会返回“object”。
### · boolean类型 布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值，要么是true，要么是false，可以直接用true、false表示布尔值，也可以通过布尔运算计算出来。**boolean\*\*\*\*类型的字面值\*\*\*\*true\*\*\*\*和\*\*\*\*false\*\*\*\*是区分大小写的**。
### · number类型 JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：
~~~
123; // 整数123
070; //八进制的56
0xA; //十六进制的10
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity
~~~
· string类型 字符串是以单引号’或双引号”括起来的任意文本，比如’abc’，”xyz”等等。请注意，”或”“本身只是一种表示方式，不是字符串的一部分，因此，字符串’abc’只有a，b，c这3个字符。 如果’本身也是一个字符，那就可以用”“括起来，比如”I’m OK”包含的字符是I，’，m，空格，O，K这6个字符。 如果字符串内部既包含’又包含”怎么办？可以用转义字符\\来标识，比如：
`'I\'m \"OK\"!';`
表示的字符串内容是：I’m “OK”! 转义字符\\可以转义很多字符，比如\\n表示换行，\\t表示制表符，字符\\本身也要转义，所以\\表示的字符就是\\。
· object类型 创建object类型的实例并为其添加属性和方法，就可以创建自定义对象。
对象：由花括号分隔，。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
对象属性有两种寻址方式：
~~~
name=person.lastname;
name=person["lastname"];
~~~
## 1.3.3 类型转换：
使用：Number（）、parseInt() 和parseFloat（） 做类型转换
~~~
Number()强转一个数值(包含整数和浮点数)。
*parseInt()强转整数，
*parseFloat（）强转浮点数
~~~
函数isNaN()检测参数是否不是一个数字。 is not a number
ECMAScript 中可用的 3 种强制类型转换如下：
~~~
Boolean(value) - 把给定的值转换成 Boolean 型；
Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
String(value) - 把给定的值转换成字符串；
~~~
## 1.3.4 运算符
1. 一元运算符
* delete：用于删除对象中属性的 如：delete o.name; //删除o对象中的name属性
void： void 运算符对任何值返回 undefined。没有返回值的函数真正返回的都是 undefined。
* ++ --
一元加法和一元减法
2. 位运算符
位运算 NOT ~
位运算 AND &
位运算 OR |
位运算 XOR ^ (不同为1，相同则为0)
左移运算 <<
右移运算 >>
3. 逻辑运算符
逻辑 NOT ! 运算符 非
逻辑 AND && 运算符 与
逻辑 OR || 运算符 或
4. 乘性运算符：\*（ 乘） /(除) %（取模）求余
5. 加性运算符： + -
\*其中+号具有两重意思：字串连接和数值求和。
就是加号”+“两侧都是数值则求和，否则做字串连接
6. 关系运算符 > >= < <=
7. 等性运算符 == === != !==
8. 条件运算符 ? : (三元运算符)
9. 赋值运算符 = += -= \*= /= %= >>= <<=
10 逗号运算符
用逗号运算符可以在一条语句中执行多个运算。
~~~
var iNum1=1, iNum2=2, iNum3=3;
~~~
## 1.3.5 操作符
位操作符
32位二进制表示整数，第32位为符号位
~~~
~ 按位非(NOT)
& 按位与(AND)
| 按位或(OR)
^ 按位异或(XOR)
<< 左移，不影响符号位
>> 有符号右移，保留符号位，不影响正负
<<< 无符号右移，连着符号位一起右移
~~~
关系操作符
操作符与C语言的语法基本类似，这里不详细说明了。
## 1.3.6 语句
1. for-in 精准的迭代语句，可以用来枚举对象的属性
~~~
for(var propName in window){
document.write(propName);
}
~~~
输出BOM中 window对象的所有属性
迭代前最好先检测对象是否为null或undefined。(ECMAScript5中不执行循环体,以前会报错)
2. label语句，给代码添加标签
3. break和continue语句(break跳出循环，直接执行循环后的代码。
continue跳出当前循环，接着进入下一次循环)
~~~
var num =0;
outer:
for(var i=0;i<10;i++){
for(var j=0;j<10;j++){
if(i == 5 && j==5){
continue outer;
}
num++;
}
}
alert(num); //95
~~~
4. with语句(不建议使用，可读性差)
5. switch语句
~~~
var num = 15;
switch (true){ //输出 Between 10 and 20，如果是false就输出 Less than 0
case num<0:
alert("Less than 0");
break;
case num>=0&&num<=1:
alert("Between 0 and 1");
break;
case num>10&&num<=20:
alert("Between 10 and 20");
break;
default:
alert("More than 20");
}
~~~
## 1.3.7 数组
JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素。
要取得Array的长度，直接访问length属性：
~~~
var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6
~~~
这里要注意，直接给Array的length赋一个新的值会导致Array大小发生变化：
~~~
var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]
~~~
Array可以通过索引把对应的元素修改为新的值，因此，对Array的索引进行赋值会直接修改这个Array：
~~~
var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr现在变为['A', 99, 'C']
~~~
请注意，如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化：
~~~
var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']
~~~
大多数其他编程语言不允许直接改变数组的大小，越界访问索引会报错。然而，JavaScript的Array却不会有任何错误。在编写代码时，不建议直接修改Array的大小，访问索引时要确保索引不会越界。
* 转换方法 所有对象都具有toLocaleString()，toString()，valueOf()方法。
~~~
· var colors = ["red", "blue", "green"]; //creates an array with three strings
· alert(colors.toString()); //red,blue,green
· alert(colors.valueOf()); //red,blue,green
· alert(colors); //red,blue,green
~~~
首先调用toString()方法，返回数组的字符串表示。toLocaleString()方法经常返回与toString()和valueOf()方法相同的值，但不同的是，调用的是每一项的toLocaleString()方法，而不是toString()。
~~~
var person1 = {
toLocaleString : function () {
return "Nikolaos";
},
toString : function() {
return "Nicholas";
}
};
var person2 = {
toLocaleString : function () {
return "Grigorios";
},
toString : function() {
return "Greg";
}
};
var people = [person1, person2];
alert(people); //Nicholas,Greg
alert(people.toString()); //Nicholas,Greg
alert(people.toLocaleString()); //Nikolaos,Grigorios
~~~
* indexOf
与String类似，Array也可以通过indexOf()来搜索一个指定的元素的位置：
~~~
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2
~~~
**数字\*\*\*\*30\*\*\*\*和字符串\*\*\*\*’30’\*\*\*\*是不同的元素。**
* slice
slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：
~~~
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
~~~
注意到slice()的起止参数包括开始索引，不包括结束索引。
如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array：
~~~
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false
~~~
在只有一个参数时，返回从该参数指定位置开始到当前数组末尾的所有项，如果有两个参数，返回起始和结束位置之间的一项（但不包括结束位置的项）。 **slice(\*\*\*\*）方法不会影响原始数组**
~~~
var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow
~~~
* push和pop
push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉：
~~~
var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
arr; // []
~~~
* unshift和shift
如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：
~~~
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []
~~~
* unshift和shift
如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：
~~~
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []
~~~
* sort
sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序：
~~~
var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']
~~~
比较函数
~~~
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15
~~~
降序排序
~~~
function compare(value1, value2) {
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //15,10,5,1,0
~~~
* reverse
reverse()把整个Array的元素反转：
~~~
var arr = ['one', 'two', 'three'];
arr.reverse();
arr; // ['three', 'two', 'one']
~~~
* splice
splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素： 1.删除：指定2个参数：要删除的第一项和要删除的项数。 2.插入：提供3个参数：起始位置、要删除的项数、要插入的项数。 3.替换：指定3个参数：起始位置、要删除的项数、要插入的任意数量的项。
~~~
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); //删除第一项
alert(colors); //green,blue
alert(removed); //red - 返回数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); //从位置1开始插入两项
alert(colors); //green,yellow,orange,blue
alert(removed); //返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); //插入两项，删除一项
alert(colors); //green,red,purple,orange,blue
alert(removed); //yellow - 返回数组中只包含一项
~~~
* concat
concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array：
~~~
var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']
~~~
**concat()\*\*\*\*方法并没有修改当前\*\*\*\*Array\*\*\*\*，而是返回了一个新的\*\*\*\*Array\*\*\*\*。**
实际上，concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里：
~~~
var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
~~~
* join
join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：
~~~
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
~~~
如果Array的元素不是字符串，将自动转换为字符串后再连接。
## 1.3.8 对象
属性是与对象相关的值。
方法是能够在对象上执行的动作。
（1）创建 javaScript对象
JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。
你也可以创建自己的对象。
~~~
person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";
~~~
(2)访问对象的属性
~~~
objectNamepropertyName
var message="Hello World!"; var x=message.length;
~~~
(3)访问对象的方法
~~~
objectNamemethodNamevar message="Hello world!"; var x=message.toUpperCase();
~~~
Date对象：
创建方式：
~~~
myDate = new Date();
~~~
日期起始值:1970年1月1日00:00:00
主要方法
~~~
getYear(): 返回年数 setYear(): 设置年数
getMonth(): 返回月数 setMonth():设置月数
getDate(): 返回日数 setDate():设置日数
getDay(): 返回星期几 setDay():设置星期数
getHours():返回小时数 setHours():设置小时数
getMinutes():返回分钟数 setMintes():设置分钟数
getSeconds():返回秒数 setSeconds():设置秒数
getTime() : 返回毫秒数 setTime() :设置毫秒数
~~~
## 1.3.9 异常
try 语句测试代码块的错误。 catch 语句处理错误。 throw 语句创建自定义错误。
**（\*\*\*\*1\*\*\*\*）\*\*\*\*JavaScript** **测试和捕捉** try 语句允许我们定义在执行时进行错误测试的代码块。 catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。 JavaScript 语句 try 和 catch 是成对出现的。 **（\*\*\*\*2\*\*\*\*）\*\*\*\*Throw** **语句** throw 语句允许我们创建自定义错误。 正确的技术术语是：创建或抛出异常（exception）。 如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
~~~
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
~~~
### 1.3.10 函数
（1）函数语法
~~~
function functionname()
{
这里是要执行的代码
}
~~~
（2）带参数的函数
~~~
function myFunction(var1,var2)
{
这里是要执行的代码
}
~~~
（3）带有返回值的函数
~~~
function myFunction()
{
var x=5;
return x;
}
~~~
若仅仅希望退出函数时 ，也可使用 return 语句
~~~
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
~~~
### 1.3.11 内置函数
1. Date：日期函数
> 属性(1): constructor 所修立对象的函数参考 prototype能够为对象加进的属性和方法
> getDay() 返回一周中的第几天(0-6)
> getYear() 返回年份.2000年以前为2位,2000(包括)以后为4位
> getFullYear()返回完全的4位年份数
> getMonth()返回月份数(0-11)
> getDate() 返回日(1-31)
> getHours() 返回小时数(0-23)
> getMinutes() 返回分钟(0-59)
> getSeconds() 返回秒数(0-59)
> getMilliseconds() 返回毫秒(0-999)
> getUTCDay() 依据国际时间来得到如今是礼拜几(0-6)
> getUTCFullYear() 根据邦际时间来失掉完全的年份
> getUTCMonth()依据国际时间来得到月份(0-11)
> getUTCDate() 依据国际时间来失掉日(1-31)
> getUTCHours() 依据国际时间来失掉小时(0-23)
> getUTCMinutes() 根据邦际光阴来往归分钟(0-59)
> getUTCSeconds() 依据国际时间来返回秒(0-59)
> getUTCMilliseconds()依据国际时间来返回毫秒(0-999)
> getTime() 前往自1970年1月1号0:0:0到如今一同花来的毫秒数
> getTimezoneoffset()往归时区偏偏差值,便格林威乱均匀时光(GMT)取运转足原的盘算机所处时区设置之间相差的分钟数)
> parse(dateString) 返回正在Date字符串中自从1970年1月1日00:00:00以来的毫秒数
> setYear(yearInt)设置年份.2位数或4位数
> setFullYear(yearInt)设置年份.4位数
> setMonth(monthInt)设放月份(0-11)
> setDate(dateInt) 设置日(1-31)
> setHours(hourInt) 设置小时数(0-23)
> setMinutes(minInt) 设置分钟数(0-59)
> setSeconds(secInt) 设放秒数(0-59)
> setMilliseconds(milliInt) 设放毫秒(0-999)
> setUTCFullYear(yearInt) 依据国际时间来设置年份
> setUTCMonth(monthInt)依据国际时间来设置月(0-11)
> setUTCDate(dateInt) 依据国际时间来设置日(1-31)
> setUTCHours(hourInt) 依据国际时间来设置小时
> setUTCMinutes(minInt)依据国际时间来设置分钟
> setUTCSeconds(secInt)依据国际时间来设置秒
> setUTCMilliseconds(milliInt)根据邦际时间来设置毫秒
> setTime(timeInt)设置自1970年1月1日开端的时间.毫秒数
> toGMTString()依据格林威乱时光将Date对于象的日期(一个数值)改变成一个GMT光阴字符串,如:Weds,15 June l997 14:02:02 GMT
> toUTCString() 依据通用时间将一个Date对象的日期转换为一个字符串
> toLocaleString()把Date对象的日期(一个数值)改变成一个字符串,使用所在盘算机上配置使用的特定日期格局
> toSource()显示对象的源代码
> toString()将日期对象转换为字符串 UTC(yyyy, mm, dd, hh, mm, ss, msec)往归自格林威乱尺度光阴到指订时光的差距,双位为毫秒
> valueOf()返回日期对象的本初值
2.Math：数学函数
> constructor 所树立对象的函数参考
> prototype可以为对于象参加的属性和方式
> E欧推常质,天然对数的顶(约等于2.718)
> LN2 2的天然对数(约即是0.693)
> LN10 10的天然对数(约等于2.302)
> LOG2E 以2为顶的e的对数.(约等于1.442)
> LOG10E 以10为顶的e的对数(约等于0.434)
> PI ∏的值(约即是3.14159)
> SQRT1\_2 1/2(0.5)的平方根(便l除以2的平方根,约即是o.707)
> SQRT2 2的平方根(约等于1.414)
> 方法: abs(x) 返回数字的相对值
> acos(x)返回数字的反余弦值
> asin(x)返回数字的反正弦值
> atan(x)返回位于-PI/2 和 PI/2 的反正切值
> atan2(y,x)前往（x,y）位于 -PI 到 PI 之间的角度
> ceil(x)返回 x 四舍五入后的最大整数
> cos(x)前往一个数字的余弦值
> exp(x)返回 E^x 值
> floor(x)返回 x 四舍五入后的最小整数
> log(x)返回底数为E的自然对数
> max(x,y)返回 x 和 y 之间较大的数
> min(x,y)返回 x 和 y 之间较小的数
> pow(x,y)返回 y^x 的值
> random()返回位于 0 到 1 之间的随机函数
> round(x)四舍五进后与整
> sin(x)返回数字的正弦值
> sqrt(x)返回数字的平方根
> tan(x)返回一个角度的正切值
> toSource()显示对象的流代码
> valueOf()返回数教对象的本初值3.Number 属性: MAX\_VALUE
>
The largest possible value a number in JavaScript can have 1.7976931348623157E+308 MIN\_VALUE
The smallest possible value a number in JavaScript can have 5E-324 NaN Equal to a value that is not a number. NEGATIVE\_INFINITY A value that is less than MIN\_VALUE. POSOTIVE\_INFINITY A value that is greater than MAX\_VALUE. prototype A static property of the Number object 方法: toString Returns a string representing the specified object
valueOf() 返回数教对象的本初值4.Boolean属性: constructor 所树立对象的函数参考 prototype可以为对象参加的属性和方式 法子: toSource() 显示对象的流代码 toString()将布我值转换为字符串,并且返回成果 valueOf()返回布我对象的原始值
3. String ：字符函数
> 属性: constructor 所树立对象的函数参考 prototype可以为对于象参加的属性和方式 length返回字符串的字符长度 法子(20): anchor("name")用来把字符串转换为HTML锚面标志内() big() 把字符串中的文本变成大字体() blink() 把字符串中的文本变成闪耀字体() bold() 把字符串中的文本变成乌字体() fixed() 把字符串中的文本变成流动间距字体,便电报情势() fontcolor(color)设置字符串中文本的色彩() Fontsize(size) 把字符串中的文本变成指定大小() italics() 把字符串中的白原变成斜字体() Link(url)用来把字符串转换-HTML链交标志中() small() 把字符串中的文本变成小字体() strike() 把字符串中的文本变成划掉字体() sub() 把字符串中的文本变成下标(subscript)字体((SUB>) sup() 把字符串中的文本变成上标(superscript)字体() charAt(index) 返回指定索引处的字符 charCodeAt(index)返回一个整数,该整数表现String对象中指定位置处的字符的Unicode编码 concat(string2)衔接两条或少条字符串 fromCharCode(num1, num2, …,BB霜, numN)获取指定的Unicode值并返回字符串 indexOf(searchString, startIndex)返回字符串中第一个呈现指定字符串的地位 lastlndexOf(searchString, startIndex)返回字符串中最后一个呈现指定字符串的地位 match(regex)在字符串中查觅指定值 replace(regex, newString)将字符串中的某些字符替代成其它字符 search(regex)针对某施行值对字符串入止查觅 slice(startIndex, endIndex)将部门字符抽出并在新的字符串中返回剩余局部 split(delimiter)将字符串分配为数组 substr(startIndex, length)从startIndex与,取length个字符 substring(startIndex, endIndex)从startIndex和endIndex之间的字符,没有包含endIndex toLowerCase() 把字符串中的文本变成小写 toUpperCase()把字符串中的白本变成大写 toSource()显示对象的源代码 valueOf()返回字符串对象的原始值
4.Array ：数组函数
> 属性: constructor 所修立对象的函数参考 prototype能够为对象加入的属性和方法 index For an array created by a regular expression match, the zero-based index of the match in the string. input For an array created by a regular expression match, reflects the original string against which the regular expression was matched. length获取数组元素的个数,即最大下标加1办法(13):concat(array1,arrayn)将两个或两个以上的数组值衔接止来,合并后返回成果 join(string)将数组中元素合并为字符串,十月妈咪,string为分隔符.如省详参数则直交合并,不再分隔 pop()移除数组中的最后一个元素并返回当元素 push(value)在数组的终尾加上一个或多个元素,并且返回新的数组长度值 reverse()倒置数组中元素的次序,反背排列 shift()移除数组中的第一个元素并返回当元素 slice(start, deleteCount, \[item1\[, item2\[,...\[,itemN\]\]\]\])返从一个数组中移除一个或少个元素,假如必要,在所移除元素的地位上拔出新元素,返回所移除的元素 sort(compare Function)在已指定排序号的情形下,依照元素的字女次序排列,假如不是字符串类型则转换成字符串再排序,返回排序后的数组 splice()为数组删除并加加新的元素 toSource()显示对象的源代码 toString()将数组一切元素返回一个字符串,其间用逗号分隔 unshift(value)为数组的开端部门加上一个或者少个元荤,并且返回当数组的新长度 valueOf()返回数组对象的原始值
5.齐局
> 属性: Infinity 指定一个正负无限大的数值 NaN指定一个 “非数字” 值 undefined指订一个已被赋值的变质法子:decodeURI() 为加稀的URI入止解码 decodeURIComponent()为加稀的URI组件解码 encodeURI()将字符串加密为URI encodeURIComponent() 将字符串加稀为URI组件 escape(string)加密一个字符串 ()使用escape()对一个字符串入止解码 eval\_r(string)断定一个字符串并将其以足本代码的情势施行 isFinite(number)检测一个值能否为一个有限数字,返回True或False isNaN(string) 检测一个值能否没有是一个有限数字 Number()将一个对象的值转换为一个数字 parseFloat(string)将一个字符串解析为一个浮面数字 parseInt(string)将一个字符串解析为一个整数,没有是四舍五进操做,而是切尾 String(object)将一个对象值转换为一个字符串 number(object)
6.事情
> 属性: a.窗心事件,只在body和frameset元素中才有效 onload页里或者图片加载完成时 onunload用户分开页里时 b.表双元素事情,正在表双元素中才有效 onchange框内容转变时 onsubmit点打降接按钮时 onreset沉新点击鼠标按键时 onselect白原被挑选时 onblur元素失来焦点时 onfocus该元素获与焦面时 c.键盘事情,base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里皆无效 onkeydown按下键盘按键时 onkeypress按下或按住键盘按键时 onkeyup搁启键盘按键时 d.正在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元荤里皆无效 onclick鼠标点打一个对象时 ondblclick鼠标双打一个对象时 onmousedown鼠本被按下时 onmousemove鼠标被挪动时 onmouseout鼠本分开元荤时 onmouseover鼠标经由元素时 onmouseup开释鼠本按键时
## 1.4 JavaScript常用技巧函数：
### 1.4.1 HTML的标签（节点）操作
~~~
document.write(""); //输出的
document.getElementById("id名")； //获取html页面标签中，标签id属性等于此值的对象。
如：var id = document.getElementById("hid"); //获取id值为hid的标签对象
document.getElementsByTagName("标签名"); //获取当前文档执行的标签对象
~~~
### 1.4.2 HTML标签对象的操作：
~~~
标签对象.innerHTML="内容"；//在标签对象内放置指定内容
标签对象.style.css属性名="值" //改变标签对象的样式。
示例：id.style.color="red";
注意：属性名相当于变量名,所以css属性名中的减号要去掉，将后面的首字母大写。
如：font-size（css）---> fontSize(JS属性)
标签对象.value；
//获取标签对象的value值
标签对象.value=”值“；//设置标签对象的value值
~~~
### 1.4.3 输出内容（document.write）
document.write()直接在网页中输出内容。
第一种：输出内容用“”括起，直接输出“”号内的内容。
~~~
document.write("I love JavaScript!");
~~~
第二种：通过变量，输出内容
~~~
var mystr = "hello world";
document.write(mysrt);//直接写变量名，输出变量存储的内容
~~~
第三种：输出多项内容，内容之间用+号连接。
~~~
var mystr = "hello";
document.write(mystr + "I love Java Script");//多项内容之间用+号连接
~~~
第四种:输出HTML标签，并起作用，标签使用“”括起来。
~~~
var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
document.write("JavaScript");
~~~
### 1.4.4 警告（alert 消息对话框）
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。
语法：alert(字符串或变量);
~~~
var mynum = 30;
alert("hello!");
alert(mynum);
~~~
结果：按顺序弹出消息框（alert弹出消息对话框包含一个确定按钮）
注意:
1\. 在点击对话框"确定"按钮前，不能进行任何其它操作。
2\. 消息对话框通常可以用于调试程序。
3\. alert输出内容，可以是字符串或变量，与document.write 相似
### 1.4.5 确认选择（confirm 消息对话框）
除了向用户提供信息，我们还希望从用户那里获得信息。这里就用到了confirm 消息对话框。
confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
语法：confirm(str);
参数说明：str:在消息对话框中要显示的文本 返回值：Boolean值
返回值：
当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false
注: 通过返回值可以判断用户点击了什么按钮
~~~
<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true){
document.write("很好,加油!");
}else{
document.write("JS功能强大，要学习噢!");
}
</script>
~~~
### 1.4.6 提问（prompt 消息对话框）
有时候，不仅希望用户回答Yes/No。而是希望得到更特定的响应。这中情况我们可以利用prompt。
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法：
~~~
prompt(str1,str2);
~~~
参数说明：
str1:要显示在消息对话框中的文本，不可修改
str2:文本框中的内容，可以修改
返回值：
1、点击确定按钮，文本框中的内容将作为函数返回值
2、点击取消按钮，将返回null
~~~
function rec(){
var score; //score变量，用来存储用户输入的成绩值。
score = prompt("请输入你的成绩","90");
if(score>=90){
document.write("你很棒!");
}else if(score>=75){
document.write("不错吆!");
}else if(score>=60){
document.write("要加油!");
}else{
document.write("要努力了!");
};
} ;
<script>
var myName = prompt("输入您的名字");
if(myName != null && myName != ""){
document.write("welcom to" + myName);
}else{
document.write("welcom to my friend");
}
</script>
~~~
### 1.4.7 打开新窗口（window.open）
语法：
~~~
window.open([URL], [窗口名称], [参数字符串])
~~~
参数说明:
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2.窗口名称：可选,该字符串是一个由逗号分隔的特征列表，声明了被打开窗口的名称。可以是"\_top"、"\_blank"、"\_selft"、"\_parent"等。
~~~
_blank 在新窗口显示目标网页
_selft 在当前窗口显示目标网页
_parent 框架网页中当前整个窗口位置显示目标网页
_top 框架网页中在上部窗口中显示目标网页
~~~
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
参数表：
~~~
top Number 窗口顶部离开屏幕顶部的像素数
left Number 窗口左端离开屏幕左端的像素数
width Number 窗口的宽度
height Number 窗口的高度
menubar yes,no 窗口有没有菜单
toolbar yes,no 窗口有没有工具条
scrollbars yes,no 窗口有没有滚动条
status yes,no 窗口有没有状态栏
~~~
~~~
<script type="text/javascript">
window.open('http://','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
~~~
### 1.4.8 关闭窗口（window.close）
close()关闭窗口
用法：
~~~
window.close();//关闭本窗口
<窗口对象>.close();//关闭指定的窗口
~~~
例如:关闭新建的窗口。
~~~
<script type="text/javascript">
var mywin=window.open('//www.jb51.net'); //将新打的窗口对象，存储在变量mywin中
mywin.close();
</script>
~~~
### 1.4.9 innerHTML属性
innerHTML属性用于获取或替换HTML元素的内容。
语法：
~~~
Object.innerHTML
~~~
Object是获取的元素对象，如通过document.getElementById("ID")获取元素。
~~~
<h2 id="con">javascript</H2>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML="hello world"
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
~~~
### 1.4.10 改变HTML样式
语法：
~~~
Object.style.property=new style;
~~~
注意：Object是获取的元素对象，如通过document.getElementById("id")获取的元素
~~~
<h2 id="con">I love JavaScript</h2>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.background="#ccc";
mychar.style.width="300px";
</script>
~~~
### 1.4.11 显示和隐藏（display属性）
语法：
~~~
Object.style.display = value
~~~
value值：
~~~
none 此元素不会被显示（及隐藏）
block 此元素将显示为块级元素（即显示）
mychar.style.display = "block"
~~~
### 1.4.12 控制类名（className属性）
className属性设置或返回元素的class属性。
语法：
~~~
object.className = classname
~~~
作用：
1、获取元素的class属性
2、为网页内的某个元素指定一个css样式来更改该元素的外观
~~~
p2.className = "two";
~~~
以上这篇Javascript基础学习笔记(菜鸟必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
## 1.5 JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证
被JavaScript 验证的这些典型的表单数据有：
· 用户是否已填写表单中的必填项目？
· 用户输入的邮件地址是否合法？
· 用户是否已输入合法的日期？
· 用户是否在数据域 (numeric field) 中输入了文本？
### 1.5.1 利用onsubmit表单认证
如下为一个javacript的一个重要功能应用，利用onsubmit表单认证
~~~
<html>
<head>
<script type="text/javascript">
fuvtion check(){
if(document.text.t.value==""){
alert("字符不能为空");
return false；
}
return true；
}
</script>
</head>
<body>
<from name="test" action="test.html" onsubmit ="return check()">
<input type="text" name="t">
<input type="submit" value="OK">
</body>
</html>
~~~
### 1.5.2 必填（或必选）项目
~~~
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
~~~
### 1.5.3 E-mail验证
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点
~~~
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
~~~
说明：
with(field){};设定作用域
focus() 方法用于给予该元素焦点。这样用户不必点击它，就能编辑显示的文本了。
## 1.6 JavaScript事件处理：
### 1.6.1 使用一个匿名或回调函数添加事件
有三种方法加事件
第一种：
格式：
~~~
<tag on事件="事件处理程序" />
~~~
\*第二种：
~~~
<script>
对象.on事件=事件处理程序
</script>
~~~
第三种：(火狐不兼容)
~~~
<script for="事件源ID" event="on事件">事件处理程序</script>
~~~
### 1.6.2 事件对象：
属性：
~~~
1\. srcElement
2\. keyCode 键盘值
~~~
### 1.6.3 事件 event window.event
~~~
1\. srcElement 代表事件源对象
2\. keyCode 事件发生时的键盘码 keypress , keydown keyup
3\. clientX, clientY 坐标位置
4\. screenX, screenY
5\. returnValue
6\. cancelBubble;
~~~
~~~
//为页面添加鼠标右点击事件
window.document.oncontextmenu=function(ent){
//兼容IE和火狐浏览器兼容
var event=ent || window.event;
//获取事件坐标位置
var x=event.clientX;
var y=event.clientY;
...
}
/*********************对象添加事件*******************/
function addEvent(obj,type,fun){
obj=$(obj);
if(obj.addEventListener){
obj.addEventListener(type,fun); //FF
return true;
}else if(obj.attachEvent){
return obj.attachEvent("on"+type,fun); //IE
}else{
return false;
};
};
/*********************对象删除事件*******************/
function delEvent(obj,type,fun){
obj=$(obj);
if(obj.addEventListener){
obj.removeEventListener(type,fun);
return true;
}else if(obj.attachEvent){
obj.detachEvent("on"+type,fun);
return true;
}else{
return false;
};
};
~~~
~~~
document.getElementById("one").offsetHeight; //获取one对应对象的高度
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0；
~~~
## 1.7 BOM
### 1.7.1 window对象
~~~
<button onclick="window.location=''">跳转</button>
~~~
常用的属性：
~~~
*document ：对 Document 对象的只读引用
*history
：对 History 对象的只读引用。
*location：用于窗口或框架的 Location 对象
Navigator： 对 Navigator 对象的只读引用
*parent： 返回父窗口。
length: 设置或返回窗口中的框架数量。
Screen: 对 Screen 对象的只读引用
status: 设置窗口状态栏的文本。
top: 返回最顶层的先辈窗口。
~~~
常用方法：
~~~
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
close() 关闭浏览器窗口。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
scrollTo() 把内容滚动到指定的坐标。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
~~~
### 1.7.2 Navigator 对象
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
常用属性：
~~~
with(document) {
write ("你的浏览器信息：<ul>");
write ("<li>代码："+navigator.appCodeName+"</li>");
write ("<li>名称："+navigator.appName+"</li>");
write ("<li>版本："+navigator.appVersion+"</li>");
write ("<li>语言："+navigator.language+"</li>");
write ("<li>编译平台："+navigator.platform+"</li>");
write ("<li>用户表头："+navigator.userAgent+"</li>");
write ("</ul>");
}
~~~
### 1.7.3 Screen 对象
Screen 对象包含有关客户端显示屏幕的信息
常用属性：
~~~
document.write( "屏幕宽度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
document.write( "屏幕可用宽度："+screen.availWidth+"px<br />" );
document.write( "屏幕可用高度："+screen.availHeight+"px" );
~~~
参考了解其他属性信息获取方式
~~~
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
~~~
### 1.7.4 History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
### 1.7.5 Location 对象
Location 对象包含有关当前 URL 的信息。
~~~
//获取页面中第二form表单中，一个username输入框的值（7种方式）
//alert(document.forms[1].username.value);
alert(document.myform.username.value);
//alert(document.forms.myform.username.value);
//alert(document.forms.item(1).username.value);
//alert(document.forms['myform'].username.value);
//alert(document['myform'].username.value);
//alert(document.forms.item('myform').username.value); //火狐不兼容
~~~
## 1.8 DOM
### 1.8.1 基本概念
HTML DOM 定义了访问和操作HTML文档的标准方法。
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
DOM 被分为不同的部分：
1.Core DOM
定义了一套标准的针对任何结构化文档的对象
2.XML DOM
定义了一套标准的针对 XML 文档的对象
3.HTML DOM
定义了一套标准的针对 HTML 文档的对象。
节点：根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
> 整个文档是一个文档节点
> 每个 HTML 标签是一个元素节点
> 包含在 HTML 元素中的文本是文本节点
> 每一个 HTML 属性是一个属性节点
> 注释属于注释节点
节点彼此间都存在关系。
> 除文档节点之外的每个节点都有父节点。
> 大部分元素节点都有子节点。
> 当节点分享同一个父节点时，它们就是同辈（同级节点）。
> 节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点
> 节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点
查找并访问节点
你可通过若干种方法来查找您希望操作的元素：
> 通过使用 getElementById() 和 getElementsByTagName() 方法
> 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
~~~
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
~~~
### 1.8.2 HTML DOM 对象参考
~~~
Document: 代表整个 HTML 文档，可被用来访问页面中的所有元素
常用集合属性：forms
Anchor : 代表 <a> 元素
Area : 代表图像映射中的 <area> 元素
Base : 代表 <base> 元素
Body : 代表 <body> 元素
Button : 代表 <button> 元素
Event : 代表某个事件的状态
Form : 代表 <form> 元素
Frame : 代表 <frame> 元素
Frameset: 代表 <frameset> 元素
Iframe : 代表 <iframe> 元素
Image : 代表 <img> 元素
Input button : 代表 HTML 表单中的一个按钮
Input checkbox
: 代表 HTML 表单中的复选框
Input file : 代表 HTML 表单中的文件上传
Input hidden : 代表 HTML 表单中的隐藏域
Input password : 代表 HTML 表单中的密码域
Input radio : 代表 HTML 表单中的单选按钮
Input reset : 代表 HTML 表单中的重置按钮
Input submit : 代表 HTML 表单中的确认按钮
Input text : 代表 HTML 表单中的文本输入域（文本框）
Link : 代表 <link> 元素
Meta : 代表 <meta> 元素
Object : 代表 <Object> 元素
Option : 代表 <option> 元素
Select : 代表 HTML 表单中的选择列表
Style : 代表单独的样式声明
Table : 代表 <table> 元素
TableData : 代表 <td> 元素
TableRow : 代表 <tr> 元素
Textarea : 代表 <textarea> 元素
~~~
### 1.8.3 HTML的DOM
~~~
Object : 代表 <Object> 元素
Option : 代表 <option> 元素
Select : 代表 HTML 表单中的选择列表
Style : 代表单独的样式声明
Table : 代表 <table> 元素
TableData : 代表 <td> 元素
TableRow : 代表 <tr> 元素
Textarea : 代表 <textarea> 元素
~~~
## 1.9 XML的DOM
DOM （Document Object Model） 文档对象模型
### 1.9.1 document 文档 HTML XML 文件 （标记语言)
~~~
<body>
<div>
<!-- -->
<a href="#">wwww</a>
</div>
</body>
~~~
节点：
将文档想成一个倒树， 每一个部分（根、元素、文本（内容）， 属性， 注释）都是一节点。
根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
~~~
1\. 整个文档是一个文档节点(根节点)
2\. 每个 HTML 标签是一个元素节点
3\. 包含在 HTML 元素中的文本是文本节点
4\. 每一个 HTML 属性是一个属性节点
5\. 注释属于注释节点
~~~
### 1.9.2 父、子和同级节点
节点树中的节点彼此之间都有等级关系。
父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。
~~~
1\. 在节点树中，顶端的节点成为根节点
2\. 根节点之外的每个节点都有一个父节点
3\. 节点可以有任何数量的子节点
4\. 叶子是没有子节点的节点
5\. 同级节点是拥有相同父节点的节点
~~~
只要知道一个节点， 按关系找到其它节点
父节点： parentNode
子节点（第一个， 最后一个） childNodes firstChild lastChild
同胞（同辈）节点 （上一个， 下一个）nextSibling previousSibling
### 1.9.3 获取节点的方式：
~~~
array getElementsByTagName("节点名"); //获取所对应节点名（所有），返回的是数组
object getElementById("id名"); //获取id名的唯一节点对象
~~~
示例：(找节点)
~~~
document.getElementsByTagName("li"); //所有所有li节点
document.getElementById("lid"); //获取id值为lid的唯一节点
document.getElementById("uid").getElementsByTagName("li");
//获取id值为uid中所有li子节点
document.getElementsByTagName("ul")[0].getElementsByTagName("li");
//获取第一个ul节点中所有li子节点
~~~
获取到的标记名(多个)、 id（唯一）、 name（多个）
### 1.9.4 每个节点中的内容
~~~
节点类型nodeType、节点名nodeName，节点值nodeValue
节点名nodeName：
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
节点值nodeValue
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值
nodeType（节点类型）
元素类型
节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
~~~
### 1.9.5 Object 对象 （HTML元素 转成的对象(js对象)）
注意： 如果使用js操作HTML文档， 就需要选将HTML文档结构转成Js对象
a. 操作属性:
~~~
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
其他属性：（针对于节点）
childNodes 返回节点到子节点的节点列表。
firstChild 返回节点的首个子节点。
lastChild 返回节点的最后一个子节点。
nextSibling 返回节点之后紧跟的同级节点。
previousSibling 属性可返回某节点之前紧跟的节点（处于同一树层级）
parentNode 返回节点的父节点。
textContent设置或返回节点及其后代的文本内容。
~~~
b. 操作内容
~~~
innerText(IE) textContent(FF) //获取的是显示的内容，不包含HTML标签
innerHTML //获取的是显示的内容，会包含HTML
outerText
outerHTML
表单
value
~~~
c. 操作样式
~~~
aobj.style.backgroundColor="red";
aobj.style.fontSize="3cm";
className
aobj.className="test";
aobj.className+=" demo";
aobj.className="";
~~~
e. 操作节点：
~~~
appendChild()
向节点的子节点列表的结尾添加新的子节点。
cloneNode()
复制节点。
removeChild()
删除（并返回）当前节点的指定子节点。
replaceChild()
用新节点替换一个子节点。
hasAttributes() 判断当前节点是否拥有属性。
hasChildNodes() 判断当前节点是否拥有子节点。
insertBefore() 在指定的子节点前插入新的子节点。
~~~
f. 创建节点：
~~~
* createElement() 创建元素节点
createAttribute() 来创建属性节点 可以：元素节点.属性名=值；
createTextNode() 来创建新的文本节点 可以：元素节点.innerHTML=文本内容；
~~~
有了以上三点的操作之前先转成对象
转成对象的两种形式：
1\. 标记名(多个)、 id（唯一）、 name（多个）
document中的三个方法
~~~
var objs=document.getElementsByTagName("div"); //获取多个
var objs=document.getElementById("one");
//获取一个
var objs=document.getElementsByName("two");
~~~
## 1.10 Ajax
var xmlhttp;
### 1.10.1 创建请求对象
~~~
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
~~~
### 1.10.2 设置回调函数（监听）
~~~
xmlhttp.onreadystatechange=函数名；
或
xmlhttp.onreadystatechange=function(){
函数体。。。
}
~~~
### 1.10.3 初始化：
~~~
xmlhttp.open("GET","gethint.php?q="+str,true); //异步以get方式发送到gethint.php
~~~
### 1.10.4 发送：
~~~
xmlhttp.send();
~~~
其中：xmlhttp请求对象：
\*\*属性：
~~~
*readyState //请求状态：0,1,2,3,4
*responseText//响应内容
responseXML //xml响应对象
*status
//浏览器响应状态：200正常， 404 请求地址不存在 ,,
statusText //状态内容
*onreadystatechange //回调函数属性
~~~
方法：
~~~
abort() //取消当前响应，关闭连接并且结束任何未决的网络活动。
getAllResponseHeaders() //把 HTTP 响应头部作为未解析的字符串返回。
getResponseHeader() //返回指定的 HTTP 响应头部的值
*open()
//初始化 HTTP 请求参数
*send() //发送 HTTP 请求，使用传递给 open() 方法的参数
*setRequestHeader() //向一个打开但未发送的请求设置或添加一个 HTTP 请求。
~~~
模拟POST提交代码：
~~~
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
~~~
