前言

只记录需要注意的，其他直接记忆

js入门

简介

JavaScript 同时接受双引号和单引号

使用

对于嵌在<body>部分的脚本，把脚本置于<body>元素的底部，可改善显示速度，因为脚本编译会拖慢显示
外部脚本的引用语句可以放在HTML的任何位置（当然参考上一条）

输出

JavaScript 不提供任何内建的打印或显示函数

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出,一般用于测试
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

语句

如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符

一些不同于c的关键词

debugger：停止执行 JavaScript，并调用调试函数（如果可用）

function：声明函数

var：声明变量

try…catch：对语句块实现错误处理

语法

Javascript是动态语言，所以就有只有字面量和变量两种类型
可以使用+来链接字符串
在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）
大小写敏感
JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写

变量

声明之后，变量是没有值的（值是 undefined）
在一条语句中声明多个变量时，以逗号分隔变量
如果重复声明但不赋值某个 JavaScript 变量，将会保留原来的值

1
2
3

/*如果把要给数值放入引号中，其余数值会被视作字符串并被级联*/
var x = "8" + 3 + 5;	//835
var x = 3 + 5 + "8";	//88

运算符

instanceof：返回 true，如果对象是对象类型的实例

位运算中的任何数值运算数都会被转换为 32 位的数

<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

算数

**：幂，与 Math.pow(x,y) 相同

数据类型

JavaScript 只有一种数值类型，所以写数值时用不用小数点均可（整数加不加小数点输出都不带点）
超大或超小的数值可以用科学计数法来写
typeof对数组返回object，因为在 JavaScript 中数组属于对象（毕竟有各种方法）
typeof可以返回”function”和”object”
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined
null 的数据类型是对象

1
2
3

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

/*person是一个对象，有4个属性和属性值*/

/*清空对象*/
var person = null;           // 值是 null，但是类型仍然是对象

var person = undefined;     // 值是 undefined，类型是 undefined

/*二者值相等但类型不同*/
typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

函数

函数名只返回函数定义，通过（）运算符调用函数以返回结果
能够把函数当做变量值参与赋值语句

对象

/*一个典型的对象*/
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {	//方法的属性值是一个函数
    return this.firstName + " " + this.lastName;	//this引用函数的拥有者对象
  }
};

通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象
两种方法访问对象成员，点运算符或数组形式

事件

事件句柄参考

字符串

JavaScript的字符串不是数组，split()将字符串转换为数组
内建属性 length
对长字符串换行的最安全做法（但是有点慢）是使用字符串加法

字符串方法

数字

JavaScript 数值始终是 64 位的浮点数，双精度浮点数

/*整数（不使用指数或科学计数法）会被精确到 15 位*/
var x = 999999999999999;   // x 将是 999999999999999
var y = 9999999999999999;  // y 将是 10000000000000000

/*小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准*/
var x = 0.2 + 0.1;         // x 将是 0.30000000000000004

/*使用乘除法有助于解决上面的问题*/
var x = (0.2 * 10 + 0.1 * 10) / 10;       // x 将是 0.3

/*在所有数字运算中，JavaScript 会尝试将字符串转换为数字*/
var x = "100";
var y = "10";
var z = x / y;       // z 将是 10

NaN 属于 JavaScript 保留词，指示某个数不是合法数，NaN 是数，typeof NaN 返回 number
Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值，Infinity 是数：typeOf Infinity 返回 number
有前导0x但没有前导0，要转换用方法

数字参考

数组

1
2
3

/*虽然以下方法也能创建数组，但依旧以c的方式来创建*/
/*不要用嗷，会有非预期，性能还差*/
var cars = new Array("Saab", "Volvo", "BMW");

访问数组名引用整个数组

你可以在数组中保存任何奇奇怪怪的东西

添加最高索引的元素可在数组中创建未定义的“洞”，中间未定义的元素为undefined

JavaScript中访问数组元素只能通过数字下标索引

常用方法

sort()只对文本有效

所以通过比值函数来排数字

1
2
3

/*当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序*/
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

查找最大最小值参考

以下都是可以用于代替循环的迭代方法

forEach() 方法为每个数组元素调用一次函数（回调函数）

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {	//后两个参数在这个例子中不用加
  txt = txt + value + "<br>"; 
}

map()用于创建和另一个数组有某种关系的新数组

/**/
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);	//对每个元素执行函数，返回一个新数组

function myFunction(value, index, array) {	//后两个参数在这个例子中不用加
  return value * 2;
}

filter()用于筛选符合条件的元素，并生成一个新数组

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {	//后两个参数在这个例子中不用加
  return value > 18;
}

reduce()和reduceRight()用于累加数组元素，返回和

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

every()用于判断元素是否都满足某个条件，返回布尔值

some()以此类推

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

indexOf()搜索元素并返回位置

lastIndexOf()

1 2	var fruits = ["Apple", "Orange", "Apple", "Mango"]; var a = fruits.indexOf("Apple");

find()返回通过测试的第一个元素值

findIndex()返回同上的索引

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

日期

不想看了

要用的话看参考吧参考参考参考

Math对象、随机函数

里面有各种常量和实用的数学函数

Math参考

Math.random()和Math.floor()联合使用随机整数

判断，循环集合

对于!==,值或类型有一个不相等即true

Switch case 使用严格比较（===）

在c的基础上有for/in循环用于遍历对象属性

类型转换

有三大主要的转换函数，详情见W3C

constructor 属性返回所有 JavaScript 变量的构造器函数

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;	//是否含有有关字符串
}

function isArray(myArray) {
    return myArray.constructor === Array;	//是否是对应函数
}

位运算

W3C参考

正则表达式

……..hhhh

看参考吧

异常

try 语句使您能够测试代码块中的错误
catch 语句允许您处理错误
throw 语句允许您创建自定义错误
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何

try {
     /*供测试的代码块*/
}
 catch(err) {
     /*处理错误的代码块*/
}

抛出错误

JavaScript 实际上会创建带有两个属性的 Error 对象：name 和 message

throw 语句允许您创建自定义错误

异常可以是 JavaScript 字符串、数字、布尔或对象

1 2	throw "Too big"; // 抛出文本 throw 500; //抛出数字

<!DOCTYPE html>
<html>
<body>

<p>请输入 5 - 10 之间的数字：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="message"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    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>

html内置验证

1	<input id="demo" type="number" min="5" max="10" step="1">

Error 对象

参考

作用域

若给没有声明的变量赋值，此变量自动变成全局变量

严格模式下不会自动全局

警告

除非有意为之，否则请勿创建全局变量
您的全局变量（或函数）能够覆盖 window 变量（或函数）
任何函数，包括 window 对象，能够覆盖您的全局变量和函数

Hoisting

提升（Hoisting）是 JavaScript 将声明移至顶部的默认行为

这就是之前看到一些代码产生疑问的答案了

只提升声明，就算var y = 0;也只提升声明，而会把定义放在原处

用 let 或 const 声明的变量和常量不会被提升！

说了这么多最后还是在顶部声明您的变量！

严格模式

“use strict”; 定义 JavaScript 代码应该以“严格模式”执行

就是无法使用未声明的变量防止自动全局

不同位置有不同的作用域

各种严格模式不允许的操作

this

（对象）方法中的this
单独的this，浏览器窗口[object Window]
函数中的，全局对象[object Window]
严格模式的函数中，禁止默认绑定，为undefined
事件处理程序中，为接受事件的html元素

/*显示函数绑定*/
/*当使用 person2 作为参数调用 person1.fullName 时，this 将引用 person2，即使它是 person1 的方法*/
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // 会返回 "Bill Gates"

let和const

var声明的是没有块作用域的

{ 
  let x = 10;
}
// 此处不可以使用 x

/*对比一下*/
var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6
**************************************************************
var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

用于for循环的循环作用域

通过 const 定义的变量与 let 变量类似，但不能重新赋值

在块作用域内使用 const 声明的变量与 let 变量相似

JavaScript const 变量必须在声明时赋值

常量对象可以更改但不能赋值，您可以更改常量对象的属性

还有的自己看吧

调试

通过console.log()调试，在调试器中下断点

debugger关键词会停止JavaScript的执行，并调用调试函数，与设置断点的功能一致

1
2
3

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

样式指南和代码规范、最佳实践

开大括号前带一个空格
驼峰大小写，全局变量推荐大写
对象的最后一个属性值后不加逗号
行长小于80
命名不要以$开头，会引起JavaScript库名冲突

避免全局变量（会被覆盖），用局部变量代替，学习使用闭包

始终声明局部变量，c语言出身的应该不虚

不要使用new object()

用字符串减去字符串，不会产生错误而是返回 NaN

== 比较运算符总是在比较之前进行类型转换（以匹配类型）

===运算符会强制对值和类型进行比较

如果调用函数时缺少一个参数，那么这个缺失参数的值会被设置为 undefined。undefined 值会破坏您的代码。为参数设置默认值是一个好习惯

错误

如果某条语句是不完整的JavaScript会读取下一条语句来补全

但如果是完整的JavaScript会直接关闭该语句，因为JavaScript中分号是可选的

JavaScript不会为每个代码块创建新的作用域

性能

需要多次访问DOM中的元素时，建议把其赋给一个变量
尽量少建立不必要的变量
避免使用with关键词，对速度有负面影响，也将混淆 JavaScript 作用域
延迟JavaScript脚本加载，放在页面底部

保留词

参考

版本

ECMAScript 是该语言的官方名称

ECMAScript 6 也称为 ES6 和 ECMAScript 2015 ES6参考

表单

验证

<!--表单验证的例子-->
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("必须填写姓名！");
    return false;
  }
}
</script>

<form name="myForm" action="/demo/action_page.php" onsubmit="return validateForm()" method="post">
  姓名：<input type="text" name="fname">
  <input type="submit" value="提交">
</form>

现在也有html标签中直接验证是否为空

表单验证API

提供了一些表单验证时已经封装好的方法

题外话：HTML5的约束验证

验证是否非空，自动填写等

参考

对象

JS中对象是永远滴神

操作

添加，删除属性

添加方法

对象访问器（Getter 和 Setter）

参考

和函数有区别

访问器是以属性的形式访问

类似函数名的东西其实是属性名，但可以通过这个属性去访问其他属性

对象构造器

自我理解为自定义的一种函数，创建了一个对象蓝图，类比于c++的class

/*用大写首字母对构造器函数命名是个好习惯*/
/*在构造器函数中，this 是没有值的。它是新对象的替代物。 当一个新对象被创建时，this 的值会成为这个新对象*/
function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

var myFather = new Person("Bill", "Gates", 62, "blue");
var myMother = new Person("Steve", "Jobs", 56, "green");

对象原型

所有 JavaScript 对象都从原型继承属性和方法

日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype

Object.prototype 位于原型继承链的顶端

日期对象、数组对象和 Person 对象都继承自 Object.prototype

JavaScript prototype 属性允许您为对象构造器添加新属性和新方法

相当于修改父对象的属性，然后子对象自动继承属性

应该有安全问题

ES5对象方法

参考

函数

函数表达式可以在变量中存储

存放在变量中的函数不需要函数名。他们总是使用变量名调用。

JavaScript 函数不会对参数值进行任何检查。

箭头函数是ES6新特性

参数的改变在函数之外是不可见的

对象属性的改变在函数之外是可见的

自调用函数

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

自调用表达式是自动被调用（开始）的，在不进行调用的情况下。

函数表达式会自动执行，假如表达式后面跟着 ()。

您无法对函数声明进行自调用。

您需要在函数周围添加括号，以指示它是一个函数表达式

1
2
3

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

arguments对象包含函数调用时使用的参数数组

call() apply()

call()使函数作用在其他对象上

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");

apply()和call()差不多，它需要接受数组的参数

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);

Math.max.apply(null, [1,2,3]); // 也会返回 3

把Math.max作用到数组[1,2,3]，从此数组也有max方法辣

闭包

JavaScript 变量属于本地或全局作用域。

全局变量能够通过闭包实现局部（私有）

/*妙啊时真的妙*/
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

HTML DOM

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准

是一种接口

具体查阅

JavaScript HTML DOM 文档

HTML DOM 文档对象是您的网页中所有其他对象的拥有者

文档对象表示网页，任何元素总要从document对象开始

查找和改变，添加和删除，事件处理，查找对象参考

DOM中所有元素都是对象

元素

找到的元素都是以对象返回，多个对象的话返回一个对象列表

通过 id 查找 HTML 元素
通过标签名查找 HTML 元素
通过类名查找 HTML 元素
通过 CSS 选择器查找 HTML 元素
通过 HTML 对象集合查找 HTML 元素

css选择器查找就是quertSelectorAll()，参数是css里的选择方式

HTML对象则是一部分元素如表单是一个对象集合，按照访问对象那样来找就行

改变（使用js的情况下，css3不考虑）

html的文本，属性值

style对象参考

动画就改样式，setInterval()和clearInterval()

事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应

html元素有事件属性

<!--事件属性-->
<button onclick="displayDate()">试一试</button>

<!--或者增加方法-->
<script>
document.getElementById("myBtn").onclick = displayDate;//无括号，返回函数定义
</script>

onclick
onload
onunload
onchange
onmouseover
onmouseout
onmousedown
onmouseup

更多事件参考

手册

事件监听程序

addEventListener()方法为指定元素指定事件处理程序

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序

您能够向一个元素添加多个事件处理程序

您能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件,会先后执行

您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应

当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器

您能够通过使用 removeEventListener() 方法轻松地删除事件监听器

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 “click” 或 “mousedown”）
第二个参数是当事件发生时我们需要调用的函数
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的

注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”

假如

元素内有一个

，然后用户点击了这个

元素

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理

元素的点击事件，然后是

元素的点击事件

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理

元素的点击事件，然后是

元素的点击事件

元素导航

HTML DOM树中不只是元素是节点，整个文档是文档节点，文本是节点，属性是节点，注释都是节点，万物皆节点

通过 JavaScript，您可以使用以下节点属性在节点之间导航：

parentNode
childNodes[*nodenumber*]
firstChild
lastChild
nextSibling
previousSibling

注意

元素节点不包含文本，包含的是与之为子节点的文本节点，文本节点值可通过innerHTML访问

<title id="demo">DOM 教程</title> 
/*三种方法等效*/
var myTitle = document.getElementById("demo").innerHTML;

var myTitle = document.getElementById("demo").firstChild.nodeValue;

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

document.body - 文档的 body
document.documentElement - 完整文档

nodeName：只读

nodeValue：

nodeType：只读

参考

创建和删除节点

先创建，再挂到DOM树上

例子

<!--普通加节点-->
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>

<!--insertBefore(),第一个子节点-->
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

删除

要知道父元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

1
2
3

/*更常见的方法*/
var child = document.getElementById("p1");
child.parentNode.removeChild(child);

替换

replaceChild(),第一个参数代替第二个参数

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

DOM集合

比如用getElementsByTagName() 方法返回 HTMLCollection 对象

类似数组的列表，但不是数组

返回的对象有length属性，但不能使用数组方法

NodeList

NodeList 对象与 HTMLCollection 对象几乎完全相同

访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号
访问 NodeList 项目，只能通过它们的索引号
只有 NodeList 对象能包含属性节点和文本节点

Browser BOM

浏览器对象模型

window对象

所有全局js对象函数变量自动成为window对象的成员

甚至document对象也是window的属性

1 2	window.document.getElementById("header"); document.getElementById("header");

window.screen

包含用户屏幕的信息

不带 window 前缀也可以写

window.location

可用于获取当前页面地址（URL）并把浏览器重定向到新页面

window.history

包含浏览器历史

window.navigator

包含有关访问者的信息

三种弹出框

alert("sometext");

confirm("somtext");

prompt("sometext", "defaultText");

Timing事件

setTimeout(function, milliseconds)：一次执行

setInterval(function, milliseconds)：持续重复

clearTimeout() 方法停止执行 setTimeout() 中规定的函数

1 2	myVar = setTimeout(function, milliseconds); clearTimeout(myVar);

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行

1 2	myVar = setInterval(function, milliseconds); clearInterval(myVar);

让您在网页中存储用户信息

Cookie 是在您的计算机上存储在小的文本文件中的数据

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

Cookie 是为了解决“如何记住用户信息”而发明的：

当用户访问网页时，他的名字可以存储在 cookie 中
下次用户访问该页面时，cookie 会“记住”他的名字

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie

JSON

简介

JavaScript Object Notation（JavaScript 对象标记法）

是一种存储和交换数据的语法

是通过 JavaScript 对象标记法书写的文本

是一种轻量级的数据交换格式

具有自我描述性且易于理解

独立于语言

由于浏览器和服务器之间只能以文本的形式交换数据，所以出现了JSON

JS中的任何对象都能转换成JSON，而JSON也能转换成JS对象

JSON.stringify():对象转JSON

JSON.parse()：JSON转JS原生对象

语法

JSON 语法是 JavaScript 语法的子集。

在 JSON 中，键必须是字符串，由双引号包围

在 JSON 中，字符串值必须由双引号编写

理解对象的两种访问方法，和JSON有点关系

JSON的数据类型不能时函数，日期和undefined

null是可以的

JSON VS XML

类似

JSON 和 XML 都是“自描述的”（人类可读的）
JSON 和 XML 都是分级的（值中有值）
JSON 和 XML 都能被大量编程语言解析和使用
JSON 和 XML 都能被 XMLHttpRequest 读取

差异

JSON 不使用标签
JSON 更短
JSON 的读写速度更快
JSON 可使用数组

最大的不同在于：XML 必须使用 XML 解析器进行解析。而 JSON 可通过标准的 JavaScript 函数进行解析。

综上，JSON比XML更好

JSONP

JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。

JSONP 不使用 XMLHttpRequest 对象。因为跨域政策

JSONP 使用标签取而代之。好像是通过脚本来生成脚本的方法。。。

不是很懂

AJAX

Asynchronous JavaScript And XML

简介

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

AJAX 并不是编程语言

AJAX 是一种从网页访问 Web 服务器的技术

AJAX 代表异步 JavaScript 和 XML

AJAX 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）

XMLHttpRequest对象

Ajax 的核心是 XMLHttpRequest 对象

创建 XMLHttpRequest 对象

variable = new XMLHttpRequest();

/*跨浏览器*/
var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

AJAX对象方法和属性

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>让 AJAX 更改这段文本</h2>
  <button type="button" onclick="loadDoc()">更改文本</button>
</div>

</body>
</html>

Function loadDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
    //onreadystatechange总共被触发5次
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

请求和响应

如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

1 2	xhttp.open("GET", "ajax_info.txt", true); xhttp.send();

如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据

1
2
3

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数

每当 readyState 发生变化时就会调用 onreadystatechange 函数

当 readyState 为 4，status 为 200 时，响应就绪：

各种属性参考

jQuery

一个最受欢迎的JavaScript库

旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax

但随着版本更新，大多数jQuery都可以用几行标准Javascript来解决

/*通过id*/
var myElement = $("#id01");	//jQuery

var myElement = document.getElementById("id01"); //js

/*类*/
var myElement = $(".intro");//jQuery

var myElemrnt = document.getElementByClassName("intro");//js

/*标签*/
var myElement = $("p");	//jQuery

var myElement = document.getElementByTagName("p");	//js

/*css选择器*/
var myElement = $("p.intro");//jQuery

var myELement = document.querySelectorAll("p.intro");