本文是自学HTML EJS CSS JavaScript DOM jQuery AJAX JSON 后做的简单总结，自学内容来源于 w3cschool。
HTML
HTML 很简单，是一种标签语言，我把标签看做一个结构体或对象，它可以有很多属性。标签不是任意的，每个标签都有自己的意义。
点击查看 HTML 标签列表，根据标签列表，至少能看懂网页的源码。
EJS 模板引擎
还有其他的模板引擎 Jade / Swig 等，但是我的博客主题是用这一种写的，我也就学的这一种。
这种模板引擎很简单，入门资料请见官网，或者我的搭建博客文章。
CSS
CSS 也很容易理解，就是匹配标签中的标签名、id、class 或属性 ，来对标签添加不同的样式。
点击查看 CSS 样式属性列表，根据属性列表，就能知道源码中应用了哪些样式。
在 CSS 中颜色用的特别多，特意附上RGB 配色表
插入样式表有3种方法：外部样式表、内部样式表、内联样式。
外部样式表在 <head> 标签中用 <link> 标签引入。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>内部样式表在 <head> 标签中用 <style> 标签定义。
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>要使用内联样式，你需要在相关的标签内使用样式（style）属性。
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>JavaScript
JavaScript 原理也很简单，用 <script> 标签标识。
JavaScript 实现
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
例子：
<!DOCTYPE html>
<html>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>上面例子中的 JavaScript 语句，会在页面加载时执行。
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
JavaScript 输出
JavaScript 通常用于操作 HTML 元素。
方式：操作 HTML 元素、写到文档输出。
1. document.getElementById("demo").innerHTML="My First JavaScript";
2. document.write("<p>My First JavaScript</p>");
注意：如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
JavaScript 变量
当您向变量分配文本值时，应该用双引号或单引号包围这个值。当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
例子：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">点击这里</button>
</body>
</html>当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
JavaScript 对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数… 此外，JavaScript 允许自定义对象。
JavaScript 是面向对象的语言，但 JavaScript 不使用类。在 JavaScript 中，不会创建类，也不会通过类来创建对象。
访问对象的属性,访问对象的方法和 java 语言一样。
创建 JavaScript 对象
创建直接的实例(略)，使用对象构造器如下：
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
把属性添加到 JavaScript 对象
您可以通过为对象赋值，向已有对象添加新属性：假设 personObj 已存在 - 您可以为其添加这些新属性：firstname、lastname、age 以及 eyecolor
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
把方法添加到 JavaScript 对象
方法只不过是附加在对象上的函数。在构造器函数内部定义对象的方法：
<script>
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
myMother=new person("Steve","Jobs",56,"green");
myMother.changeName("Ballmer");
document.write(myMother.lastname);
</script>JS HTML DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
通过类名找到 HTML 元素
var x=document.getElementById(“intro”);
var y=x.getElementsByTagName(“p”);
var y=x.getElementsByClassName(“xxx”);
改变 HTML 输出流
document.write(Date());
改变 HTML 内容
document.getElementById(id).innerHTML=new HTML
改变 HTML 属性
document.getElementById(id).attribute=new value
改变 HTML 样式
document.getElementById(id).style.property=new style
对事件做出反应
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
如需向 HTML 元素分配事件，您可以使用事件属性。
在下面的例子中，名为 changetext 的函数将在按钮被点击时执行。
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
添加和删除节点（HTML 元素）
创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
JavaScript 框架（库）
JavaScript 高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。
为了应对这些调整，许多的 JavaScript (helper) 库应运而生。这些 JavaScript 库常被称为 JavaScript 框架。
在本教程中，我们将了解到一些广受欢迎的 JavaScript 框架：
- jQuery
- Prototype
- MooTools
所有这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理。
jQuery 是目前最受欢迎的 JavaScript 框架。它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。jQuery 同时提供 companion UI（用户界面）和插件。
DOM
DOM 很简单，代码格式很固定。
JavaScript 参考手册 中有 JavaScript 对象，Browser 对象，HTML DOM 对象的属性和方法。查看源码时，参照这个很有用。
jQuery
jQuery 是一个 JavaScript 函数库(作用是被调用)。jQuery 极大地简化了 JavaScript 编程。
jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
例子：
<head>
<script type="text/javascript" src="jquery.js"></script> <!-- 引入 jQuery 库，相当于 java 中 import 语句 -->
<script type="text/javascript">
$(document).ready(function(){ //代码中 ready,click,hide 都是事件属性，本质上还是属性。不是函数。
$("p").click(function(){ //事件属性的特点是，事件发生时，会执行相应的功能，即函数。
$(this).hide();
});
});
</script>
</head>jQuery 是为事件处理特别设计的。jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 <head> 部分的事件处理方法中。
总结:
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
- 把所有 jQuery 代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把 jQuery 代码置于单独的 .js 文件中
- 如果存在名称冲突，则重命名 jQuery 库
jQuery - AJAX
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。
回调函数可以设置不同的参数：
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：
例子：
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例：
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法：
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
AJAX
XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject。
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步） |
| send(string) | 将请求发送到服务器。string：仅用于 POST 请求 |
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪 |
| status | 200: “OK” 404: 未找到页面 |
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>JSON
**JSON 是存储和交换文本信息的语法，类似 XML。**JSON 比 XML 更小、更快，更易解析。
例子：
{
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}
JSON 对象在花括号中书写，一对花括号就表示一个对象(匿名的)。
1500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
