敲点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 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程.这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行. 在这篇 ...
随机推荐
- [MCSM] 蒙特卡罗统计方法
起因 最开始的时候,写多了LDPCC误码率的仿真,心中便越来越有了疑惑.误码率仿真,多为Monte Carlo仿真,其原理是什么,仿真结果是否可靠,可靠程度是多少,如何衡量其可靠性这些问题我都很不清楚 ...
- 【WEB前端经验之谈】没有速成，只有不断积累。
2013年8月25日,我人生中的第一份正式工作开始了,第一份工作做的是当时学习的asp.net,用的是C#语言. 到第一家公司上班是公司是做一个OA系统,不过我去的时候大部分都已经完成了,剩下的都是细 ...
- on 在ios下 父对象是body的时候会 不调用
on 用委托的形式绑定事件 在ios下 父对象是body 获取 docment的时候会 不调用 解决方案 在这些元素上加 cursor: pointer;
- All thanks
How to make a salad?——Silun Wang 这是一次成功的团队合作,我为所有组员感到骄傲和自豪!感谢你们! 上个学期期末,和@老钱他们一起去五道口吃Pizza,谈到了大三上学期的 ...
- 理解jar
对于大多数 Java 开发人员来说,JAR 文件及其 “近亲” WAR 和 EAR 都只不过是漫长的 Ant 或 Maven 流程的最终结果.标准步骤是将一个 JAR 复制到服务器(或者,少数情况下是 ...
- ansible-2添加公钥
该文章摘自:http://www.fwqtg.net/%E8%87%AA%E5%8A%A8%E5%8C%96%E8%BF%90%E7%BB%B4%E5%B7%A5%E5%85%B7ansible%E5 ...
- iOS边练边学--NSURLSession、NSURLSessionTask的介绍与使用以及url中包含了中文的处理方法
一.NSURLSession.NSURLSessionTask的使用步骤 首先创建NSURLSession对象 通过NSURLSession对象创建对应的任务 <1>NSURLSessio ...
- iOS开发小技巧--利用苹果官方API播放视频（方法已经过时，了解一下）
- 输入年月，输出月份有几天（分别用了if——else和switch）
首先是switch做的 class Program { static void Main(string[] args) {/* 题目要求:请用户输入年份,输入月份,输出该月的天数. 思路:一年中月份的 ...
- WebForm之Linq组合查询
组合查询 protected void Button1_Click(object sender, EventArgs e) { //默认查询所有,返回的是Table类型,转换成IQueryAble类型 ...