HTML DOM createElement() 方法

实例

创建一个按钮:

var btn=document.createElement("BUTTON");

输出结果：

尝试一下 »

HTML元素经常包含文本。创建指定文本的按钮你需要在按钮元素后添加文本节点:

实例

创建指定文本的按钮：

var btn=document.createElement("BUTTON");
var t=document.createTextNode("CLICK ME");
btn.appendChild(t);

明天计划的事情：学习了解jQuery，状态机。

遇到的问题：

如何用js添加css样式，可以通过动态样式。

收获：

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jquery.com 中下载。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

替代方案

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

注：本站实例均采用菜鸟教程 CDN 库。

如需从菜鸟教程、又拍云、新浪、谷歌或微软引用 jQuery，请使用以下代码之一：

菜鸟教程 CDN:

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

有限状态机（Finite-state machine）是一个非常有用的模型，可以模拟世界上大部分事物。

简单说，它有三个特征：

　　* 状态总数（state）是有限的。
　　* 任一时刻，只处在一种状态之中。
　　* 某种条件下，会从一种状态转变（transition）到另一种状态。

举例来说，网页上有一个菜单元素。鼠标悬停的时候，菜单显示；鼠标移开的时候，菜单隐藏。如果使用有限状态机描述，就是这个菜单只有两种状态（显示和隐藏），鼠标会引发状态转变。

代码可以写成下面这样：

　　var menu = {　　    
　　　　// 当前状态　　　　currentState: 'hide',　　
　　　　// 绑定事件　　　　initialize: function() {　　　　　　var self = this;　　　　　　self.on("hover", self.transition);　　　　},　　
　　　　// 状态转换　　　　transition: function(event){　　　　　　switch(this.currentState) {　　　　　　　　case "hide":　　　　　　　　　　this.currentState = 'show';　　　　　　　　　　doSomething();　　　　　　　　　　break;　　　　　　　　case "show":　　　　　　　　　　this.currentState = 'hide';　　　　　　　　　　doSomething();　　　　　　　　　　break;　　　　　　　　default:　　　　　　　　　　console.log('Invalid State!');　　　　　　　　　　break;　　　　　　}　　　　}　　
　　};

可以看到，有限状态机的写法，逻辑清晰，表达力强，有利于封装事件。一个对象的状态越多、发生的事件越多，就越适合采用有限状态机的写法。

另外，JavaScript语言是一种异步操作特别多的语言，常用的解决方法是指定回调函数，但这样会造成代码结构混乱、难以测试和除错等问题。有限状态机提供了更好的办法：把异步操作与对象的状态改变挂钩，当异步操作结束的时候，发生相应的状态改变，由此再触发其他操作。这要比回调函数、事件监听、发布/订阅等解决方案，在逻辑上更合理，更易于降低代码的复杂度。