敲点JavaScript代码
1. DOM DEMO-表格的行排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEMO~DEMO</title>
<style type="text/css"> </style> </head>
<body>
<table id="tab" border=1>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr><td>111</td><td>1</td></tr>
<tr><td>888</td><td>7</td></tr>
<tr><td>333</td><td>3</td></tr>
<tr><td>555</td><td>6</td></tr>
</tbody>
</table>
<script type="text/javascript">
/*
* 根据指定表格每行第n的单元格的值，对第一个<tbody>中的行排序，
* 如果存在comparator函数则使用它，否则按字母表顺序比较。
*/
function sortrows(table, n, comparator){
var tbodys = table.tBodies[0];
var rows = tbodys.getElementsByTagName("tr"); //tbody中的所有行
rows = Array.prototype.slice.call(rows, 0); //真实数组中的快照 rows.sort(function(row1, row2){
var ceil1 = row1.getElementsByTagName("td")[n]; //获得第n个单元格
var ceil2 = row2.getElementsByTagName("td")[n];
var val1 = ceil1.textNode || ceil1.innerText; //获得文本内容 var val2 = ceil2.textNode || ceil2.innerText; //比较
if(comparator)
return comparator(val1, val2);
if(val1 < val2) return -1;
else if(val1 > val2) return 1;
else return 0;
});
//在tbody中按它们的顺序进行添加
for(var i=0; i<rows.length; i++)
tbodys.appendChild(rows[i]);
}
/*
* 查找表格的<th>元素，让它们可点击，以便点击列标题，按该列对行排序
*/
function makeSortable(table){
var headers = table.getElementsByTagName("th");
for(var i=0; i<headers.length; i++){
(function(n){
headers[i].onclick = function(){
sortrows(table, n); };
}(i));
}
} var tab = document.getElementById("tab");
makeSortable(tab);
</script>
</body>
</html>
2. 生成子目录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEMO~DEMO</title>
<style type="text/css">
#TOC {border:solid black 1px; margin:10px; padding:10px}
.TOCEntry {font-family:sans-serif;}
.TOCEntry a {text-decoration:none;}
.TOCLevel1 {font-size:16px; font-weight:bold;}
.TOCLevel2 {font-size:12px; margin-left:.5in;}
.TOCSectNum:after {content: ":";} /*表示每个段编号之后都有一个冒号和空格符。*/
.TOCSectNum {display:none;}
</style> </head>
<body>
<div id="TOC"> </div>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<script type="text/javascript">
(function(){
//查找TOC元素，如果不存在，则在文档中创建一个
var toc = document.getElementById("TOC");
if(!toc){
toc = document.createElement("div");
toc.id = "TOC";
document.body.insertBefore(toc,document.body.firstChild);
}
//查找所有的标题元素
var headings;
if(document.querySelectAll){
document.querySelectAll("h1,h2,h3,h4,h5,h6");
} else {
headings = findHeadings(document.body, []);
} //递归遍历document.body，查找标题元素
function findHeadings(root, sects){
for(var c=root.firstChild; c!=null; c=c.nextSibling){
if(c.nodeType !== 1) continue;
if(c.tagName.length == 2 && c.tagName.charAt(0) == "H"){
sects.push(c);
} else {
findHeadings(c,sects);
}
}
return sects;
} //初始化一个数组来保持跟踪章节号
var sectionNumbers = [0,0,0,0,0,0]; //循环已找到的标题元素
for(var h=0; h<headings.length; h++){
var heading = headings[h];
//跳过在TOC容器中的标题元素
if(heading.parentNode == toc) continue; //判断标题级别
var level = parseInt(heading.tagName.charAt(1));
if(isNaN(level) || level<1 || level>6) continue; //对于该标题级别增加sectionNumbers对应的数字，重置所以标题比它级别低的数字为零
sectionNumbers[level-1]++;
for(var i=level; i<6; i++)
sectionNumbers[i] = 0; //将所有标题级别的章节组合产生一个章节号，如2.3.1
var sectionNumber = sectionNumbers.slice(0,level).join("."); //为标题级别增加章节号，把数组放在<span>中，使其可以用样式修饰
var span = document.createElement("span");
span.className = "TOCSectNum";
span.innerHTML = sectionNumber;
heading.insertBefore(span, heading.firstChild); //用命名的锚点将标题包起来，以便为它增加链接
var anchor = document.createElement("a");
anchor.name = "TOC"+sectionNumber;
heading.parentNode.insertBefore(anchor,heading);
anchor.appendChild(heading); //现在为该节点创建一个链接
var link = document.createElement("a");
link.href = "#TOC" + sectionNumber; //链接的目标地址
link.innerHTML = heading.innerHTML; //将链接地址放在一个div中，div用基于级别名字的样式修饰
var entry = document.createElement("div");
entry.className = "TOCEntry TOCLevel"+level;
entry.appendChild(link); toc.appendChild(entry);
}
}()); </script>
</body>
</html>
敲点JavaScript代码的更多相关文章
- 利用chrome调试JavaScript代码
看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...
- 如何管理你的 Javascript 代码
今天不聊技术的问题,咱们来聊聊在前端开发中如何管理好自己的 Javascript 代码.首先,咱们先来说说一般都有哪些管理方式?我相信 seajs . requirejs 对于前端开发者而言都不陌 ...
- 林大妈的JavaScript基础知识（二）：编写JavaScript代码前的一些简单工作
在介绍JavaScript语法前,我们需要知道,学习语法必须要多利用手敲代码来巩固记忆.因此,由于JavaScript的特性,它不能像C++和Java一样独立地编译及运行,我们需要在调试运行JavaS ...
- javascript代码 调试方法
你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...
- 7个高性能JavaScript代码高亮插件
本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...
- JavaScript代码段整理笔记系列（二）
上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey ...
- JavaScript代码段整理笔记系列（一）
30段JavaScript代码——上篇 1.如何区分IE及非IE浏览器: if(!+[1,]){ //IE 11 不支持 alert("这是 IE 浏览器"): }else{ al ...
- 如何让你的JavaScript代码更加语义化
语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...
- 推荐15个最好用的 JavaScript 代码压缩工具
JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程.这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行. 在这篇 ...
随机推荐
- [AaronYang]C#人爱学不学8[事件和.net4.5的弱事件深入浅出]
没有伟大的愿望,就没有伟大的天才--Aaronyang的博客(www.ayjs.net)-www.8mi.me 1. 事件-我的讲法 老师常告诉我,事件是特殊的委托,为委托提供了一种发布/订阅机制. ...
- JSON Web Token - 在Web应用间安全地传递信息(zhuan)
来自 http://blog.leapoahead.com/2015/09/06/understanding-jwt/ JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用 ...
- text-align:justify_内容居中对齐
一直发现text-align : justify这个对齐方式不好使,都不知道为什么么么哒: 因为两端对齐的这个行的结束要一个有空字符串或者别的不可见的字符,用户代理会把这个行的最后几个字符往右边拉,实 ...
- 读JS高级API笔记_(DOM&&DOM2&&DOM3)哎呀——园龄才9个月啊
---恢复内容开始--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- hdu3308 线段树 区间合并
给n个数字 U表示第A个数改为B.A是从0开始. Q输出最大的递增序列个数. 考虑左边,右边,和最大的. #include<stdio.h> #define lson l,m,rt< ...
- note.js之 Mongodb在Nodejs上的配置及session会话机制的实现
上篇我们使用nodejs实现了一个express4的网站构建配置,但一个有面的网站怎么可以缺少一个数据库呢.现在较为流行的就是使用MONGODB来作为nodejs网站引用的数据库,可能它与nodejs ...
- RPD资料库创建（1）
BI创建(数据)分析.仪表盘.报表前,都需要对数据进行建模,在oracle biee里称为创建“资料档案库”-该文件后缀为RPD,所以一般也称为创建RPD文件. 步骤: 1.从windows开始菜单里 ...
- 该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结
是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...
- Aho-Corasick算法、多模正则匹配、Snort入门学习
希望解决的问题 . 在一些高流量.高IO的WAF中,是如何对规则库(POST.GET)中的字符串进行多正则匹配的,是单条轮询执行,还是多模式并发执行 . Snort是怎么组织.匹配高达上千条的正则规则 ...
- HDU 2896
传送门:HDU 2896 病毒侵袭 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...