使用jQuery为博客生成目录
这段代码展示了如何为div#content中的内容生成目录,也无非是对h系列标记进行解析。当然,也早有一些人实现了。
1. [代码][HTML]代码
<html>
<head>
<title> 测试 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../lib/js/jquery-1.7.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
//index01
$("#index01").text($("#content").html());
//index02
x = $("h1,h2").toArray();
c = "";
for (i = 0; i < x.length; i++)
{
c = c + x[i].innerHTML + "<br />";
}
$("#index02").html(x + "<br/>" + c);
//index03
x = $("h1,h2");
c = "";
x.each(function() {
c = c + $(this).text() + " " + $(this).prop('tagName') + "<br/>"; //prop()与attr()的区别
});http://www.huiyi8.com/hunsha/lifu/
$("#index03").html(c);
//index04
//generate anchor
x = $("h1,h2");
n = 0;
c = "";
x.each(function() {
$(this).before("<a name='anchor" + n + "'></a>");
if ($(this).prop('tagName') == "H1") //不可用"h1"
{婚纱礼服欣赏
c=c+"<a href='#anchor"+n+"' class='anchor-h1'>"+$(this).text()+"</a><br/>";
}
else {
c=c+"<a href='#anchor"+n+"' class='anchor-h2'>"+$(this).text()+"</a><br/>";
}
n = n + 1;
});
$("#index04").html(c);
});
</script>
<div id="index01"></div><hr/>
<div id="index02"></div><hr/>
<div id="index03"></div><hr/>
<div id="index04"></div><hr/>
<div id="content">
<h1>第一章</h1>
<h2>第1节</h2>
<p>你好</p>
<h2>第2节</h2>
<h1>第二章</h1>
<h2>第1节</h2>
<h2>第2节</h2>
</div>
</body>
</html>
2. [图片] 01.jpg
使用jQuery为博客生成目录的更多相关文章
- 团队Alpha博客链接目录
Dipper团队Alpha博客链接目录 团队Alpha冲刺博客 第一次冲刺 第二次冲刺 第三次冲刺 第四次冲刺 第五次冲刺 第六次冲刺 第七次冲刺 第八次冲刺 第九次冲刺 第十次冲刺 第十一次冲刺 第 ...
- CSDN博客测试目录
经常写博客,但是一般没怎么注意些目录,最近看别人写的博客都有目录,所以我也想在以后写好目录,这样子也方便阅读. 这里就写一个实验: 这里一级目录 这里是一级目录下的文本.林肯公园 这里是1.1目录 这 ...
- Elasticsearch-6.7.0系列-Joyce博客总目录
官方英文文档地址:https://www.elastic.co/guide/index.html Elasticsearch博客目录 Elasticsearch-6.7.0系列(一)9200端口 . ...
- 老猿Python博客文章目录索引
本目录提供老猿Python所有相关博文的一级目录汇总,带星号的为收费专栏: 一.专栏列表 本部分为老猿所有专栏的列表,每个专栏都有该专栏置顶的博文目录: 专栏:Python基础教程目录 专栏:* 使用 ...
- ORACLE 博客文章目录(2015-05-27更新)
从接触ORACLE到深入学习,已有好几年了,虽然写的博客不多,质量也参差不齐,但是,它却是成长的历程的点点滴滴的一个见证,见证了我在这条路上的寻寻觅觅,朝圣的心路历程,现在将ORACLE方面的博客整理 ...
- SQL Sever 博客文章目录(2016-07-06更新)
SQL Server方面的博客文章也陆陆续续的写了不少了,顺便也将这些知识点整理.归纳一下下.方便自己和他人查看. MS SQL 数据类型 三大数据库对比研究系列--数据类型 MS SQL 表和视图 ...
- 深入理解Java虚拟机博客参考目录
参考博客:注明请注明出处 深入理解Java虚拟机读书笔记之:第5章 Java虚拟机(Java虚拟机内部结构图,很重要) 深入理解Java虚拟机读书笔记之:第6章 Java class文件: <深 ...
- ORACLE 博客文章目录(2015
从接触ORACLE到深入学习,已有好几年了,虽然写的博客不多,质量也参差不齐,但是,它却是成长的历程的点点滴滴的一个见证,见证了我在这条路上的寻寻觅觅,朝圣的心路历程,现在将ORACLE方面的博客整理 ...
- ORACLE 博客文章目录
从接触ORACLE到深入学习,已有好几年了,虽然写的博客不多,质量也参差不齐,但是,它却是成长的历程的点点滴滴的一个见证,见证了我在这条路上的寻寻觅觅,朝圣的心路历程,现在将ORACLE方面的博客整理 ...
随机推荐
- TouchSlide - 大话主席
http://www.superslide2.com/TouchSlide/downLoad.html 首 页如何使用查看参数案例演示下载页面交流反馈SuperSlide TouchSlide - ...
- linux中的热插拔和mdev机制
mdev手册(自己翻译的留着看) mdev实现U盘或SD卡的自动挂载 mdev的使用以及mdev.conf的规则配置--busybox linux中的热插拔和mdev机制 关于实现udev/mdev自 ...
- Unable to resolve address ' ' service ' ': Name or service not known
感谢朋友支持本博客,欢迎共同探讨交流,因为能力和时间有限,错误之处在所难免.欢迎指正. 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...
- nginx 查看接口请求时间 每个请求图片的时间或者文件的
根据nginx的access_log查看接口请求时间 muyuren 发表于 1年前 阅读 2300 收藏 0 推荐 0 评论 0 推荐 收藏 首先修改修改生成日志的格式,在nginx配置文件的htt ...
- CyclicBarrier的工作原理及其实例
CyclicBarrier是多线程中一个重要的类,主要用于线程组内部之间的线程的相互等待问题. 1.CyclicBarrier的工作原理 CyclicBarrier大致是可循环利用的屏障,顾名思义,这 ...
- Ajax主要用来完成哪些工作?
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 它使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据. ajax主要用于在页面内容加 ...
- 快速清除MS SQL SERVER 日志
USE [master] GO ALTER DATABASE yourdatabase SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE yourd ...
- PHP-Manual的学习----【语言参考】----【类型】-----【对象】
Object 对象1.对象初始化要创建一个新的对象 object ,使用 new 语句实例化一个类: class foo{ function do_foo(){ echo &quo ...
- 【BZOJ2790】[Poi2012]Distance 筛素数+调和级数
[BZOJ2790][Poi2012]Distance Description 对于两个正整数a.b,这样定义函数d(a,b):每次操作可以选择一个质数p,将a变成a*p或a/p, 如果选择变成a/p ...
- 低秩近似 low-rank approximation