Topic 1 : menu
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>menu</title>
<style type="text/css">
.ul li {
list-style: none;
width: 80px;
height: 30px;
line-height: 30px;
background-color:beige;
text-align: center;
float: left;
margin-left: 5px;
}
.ul li a {
text-decoration: none;
}
.ul li.current {
background-color: red;
}
</style>
</head>
<body>
<ul class="ul" id="ul">
<li><a href = "http://www.baidu.com">首页</a></li>
<li><a href = "javascript:alert('123');">动态</a></li>
<li><a href = "javascript:void(0);">博客</a></li>
<li><a href = "javascript:void(0);">相册</a></li>
<li><a href = "javascript:void(0);">说说</a></li>
<li><a href = "javascript:void(0);">个人中心</a></li>
</ul>
<script src="../js/common.js"></script>
<script>
// void 关键字 void 会执行()里面的语句/表达式，总是返回undefined
// var r = void(0);
//所以这里的r打印出来是undefined
//我们获取ul
var ul = document.getElementById('ul');
//我们获取ul中的li
var lists = ul.children;
//我们获取ul中的第一个子元素 那么就是li中的a 这个方法有兼容性问题 我们这里就导入我们的js
//因为我们l的i有很多 那么我们酒便利呗
var i,len = lists.length;
for (i = 0; i < len; i++) {
var a = getFirstElementChild(lists[i]);
// 给a注册事件 这里呢我们要是写的话 那么我们每次循环都要生成一个方法 占用空间 所以我们把function写到外面去
// 注意这里还有一点就是我们的注册事件他并不是函数的调用这点要注意 不要加括号
a.onclick = aMethod;
}
// 事件处理函数
function aMethod () {
//先取消所有li的高亮显示
// 注意我们这里如果不加外面这个for循环 就会说list[i]没有定义 具体的原因 我也不是太明白
for (var j = 0; j < len; j++) {
lists[j].className = '';
}
// 当前a标签对应的li高亮显示 及用父级节点
this.parentNode.className = 'current';
return false;
}
</script>
</body>
</html>
Topic 2 : document.write()
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>document.write</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<input type="button" id="btn" value="我是一个小按钮" >
<script>
//我们要实现的功能是 在第二个div里面使用 document.write输出一些东西
// 要想实现上面的这个功能 就需要我们在第二个div那里写一个script标签 在那个标签里面输出这些东西
// 但是我们一般是不这样使用的 因为看着不顺眼
// 我们在事件中 使用这个方法输出一下东西 看一下会发生什么
var btn = document.getElementById('btn');
btn.onclick = function () {
document.write('我失败过很多次但是我从没想过放弃');
}
// 答案是 他会覆盖原来的内容只显示他写的内容 所以这个方法就显得很鸡肋
// 我们一般都不用 但是一般都是一个网页上挂载第三方的功能 用的
// 就比如说在线客服
</script>
</body>
</html>
Topic 3 : innerHTML创建动态列表
注意:
这段代码里涉及到 js 中的forEach（）
arr.forEach (function (item, index) {
// forEach 遍历数组，参数是一个函数
// 这个函数有两个参数，第一个参数 是 数组中的元素， 第二个参数是索引
box.innerHTML += '<li>' + item + '</li>';
})
对比一下java中的for each
for( int element : a) {
System.out.println(element);
}
涉及到js中数组可以放不同类型的元素：
这是因为JavaScript的弱数据类型决定数组中元素类型可以不同的；
var 来定义也是他的一种表现；
涉及到打印一段代码所需要用到时间的函数：
可打印二者之间代码所用的时间；
console.time('flag');
console.timeEnd('flag');
代码如下 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态创建列表innerHTML</title>
</head>
<body>
<div id="box">box</div>
<div></div>
<script>
console.time('flag');
//在box中生成一个ul 列表 我们以前用过document.createElement('ul')在挂载的方法
// 在这里我们用innerHTML的方法
var box = document.getElementById('box');
box.innerHTML = '<p>test</p>';
// 这个方法是不是有类似于document.write的写法 解析标签后打印
// box.innerText = '<p>test</p>'; 不解析标签打印
var arr = ['a','b','c',1];
box.innerHTML += '<ul>';
//我们这里使用forEach来遍历数组里面的元素
arr.forEach (function (item, index) {
// forEach 遍历数组，参数是一个函数
// 这个函数有两个参数，第一个参数 是 数组中的元素， 第二个参数是索引
box.innerHTML += '<li>' + item + '</li>';
})
box.innerHTML += '</ul>';
console.timeEnd('flag');
</script>
</body>
</html>
网页示例 ：
这段代码效率比较低 ：
因为我们使用了字符串的拼接（每次拼接都要新创建一个字符串），
还有就是我们不停的要把标签和内容给innerHTML浏览器就要不停的渲染，我们要注意标签的解析，解析完以后要挂载到DOM树上，然后浏览器在进行渲染，
渲染很费时间的；
耗费时间的操作：
1 . 网络操作是最消耗时间的；
2 . 操作外部设备（屏幕，硬盘）；操作内存可比这些快多了
所以我们把这个代码来优化一下 ：
不使用字符串的拼接，使用数组来代替；
不让innerHTML不停的渲染，我们把内容全放到数组里 等到内容添加完 我们一次性渲染；
这个地方我们就是用到了 把数组转化为字符串的问题了，我们这里使用arr.join(''); 我们里面使用空来拼接，因为我们要是不写的话他是默认为用逗号来拼接的；
代码如下 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>优化</title>
</head>
<body>
<div id="box">box</div>
<div></div>
<script>
console.time('flag');
//在box中生成一个ul 列表 我们以前用过document.createElement('ul')在挂载的方法
// 在这里我们用innerHTML的方法
var box = document.getElementById('box');
var arr1 = [];
// 这个方法是不是有类似于document.write的写法 解析标签后打印
// box.innerText = '<p>test</p>'; 不解析标签打印
var arr = ['a','b','c',1];
arr1.push ('<ul>');
//我们这里使用forEach来遍历数组里面的元素
arr.forEach (function (item, index) {
// forEach 遍历数组，参数是一个函数
// 这个函数有两个参数，第一个参数 是 数组中的元素， 第二个参数是索引
arr1.push('<li>' + item + '</li>');
})
arr1.push ('</ul>');
box.innerHTML = arr1.join('');
console.timeEnd('flag');
</script>
</body>
</html>把两次的时间对比一下我们会发现运行时间缩短了很多；
不使用innerHTML来制作表格（文档中说的） 但是他可以做；
Topic 4 : 动态创建表格
One ：表格的解析
表格标签是<table></table>
table 里面分为三个部分 头thead 身体tbody 脚 tfoot
<tfoot> 标签定义表格的页脚（脚注或表注）
他也可以放内容就跟tbody里面的一样
<tfoot> 注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
<tfoot> 提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
tr 代表一行
td 代表 当前行的那一列 因为他的用法是：
<tr>
<td></td>
<td></td>
</tr>
我们在表头中还会遇到<th>
<th> 其实就是相当于加粗的<td>
表格代码示例 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<!-- tfoot一定会在最后面出现 他们三个是找你顺序来的-->
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>