jquery------脚注的使用
index.jsp
<script type="text/javascript" src="../js/my.js"></script> <div id="chapter">
<p>How admirable is the Law of Compensation!<span id="footnote">today is Monday!</span><span class="pull">A wonderful day!</span></p>
<p>And how perfect a proof of the natural fitness!<span id="footnote">today is Friday!</span>I believe you!</p>
<p>Next above these come the Nobility<span id="drop">,of Whom there are!</span><span id="footnote">today is Saturday!</span>If you work hard,you will succeed!</p>
</div> <div style="width:500px;height:500px;"></div> <a href="#top" style="display:block;margin:0px;padding:0px">back to top</a>
<div id="footer"></div>
my.js
$(document).ready({
var $note=$("<ol></ol>").insertBefore("#footer");
$("span#footnote").each(function(index){
$(this)
.before(["<a href='#footnote-",
index+1,
"' id='context-",
index+1,
"' class='context'>",
"<sup style='font-size:15px'>",
index+1,
"</sup></a>"].join("")) //反向插入
.append(["<a href='#context-",
index+1,
"'>context</a>"].join(""))
.appendTo($note)
.wrap("<li id='footnote-"+(index+1)+"'></li>");
});
});
jquery------脚注的使用的更多相关文章
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- 经典收藏 50个jQuery Mobile开发技巧集萃
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...
- jQuery Mobile高手必备的十大技巧和代码片段
与任何新技术一样,常常难就难在如何开始入手. 有鉴于此,我们整理出了与jQuery Mobile库有关的我认为最便利的一些技巧.方法和代码片段. 由于本文不是旨在全面介绍使用jQuery Mobile ...
- (转)经典收藏 50个jQuery Mobile开发技巧集萃
(原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃 ...
- jquery mobile跳转到指定id时怎样传递参数
在jquery mobile 中,每一个页面都是一个page,当我们需要从一个页面跳转到另一个页面时,可以在href中指定id,可是该怎么把一个page中的参数传递到另外一个page中,几经琢磨,发现 ...
- jQuery 表格
jQuery 表格插件汇总 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分 ...
- jQuery基础教程
1.使用$()函数 $()函数其实是创建了一个jQuery对象. 这个函数接受CSS选择符作为参数,充当一个工厂, 返回包含页面中对应元素的jQuery对象. 所有能在样式表中使用的选择符都可以传给这 ...
- 《jQuery基础教程(第四版)》学习笔记
本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...
- bootstrap历练实例:面板脚注
面板脚注 我们可以在面板中添加脚注,只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可.下面的实例演示了这点: <!DOCTYPE htm ...
- 小强的HTML5移动开发之路(23)—— jQuery Mobile入门
一.下载jQuery Mobile 下载地址:http://jquerymobile.com/ 点击Download 下载如下zip包 下载成功后如下图 解压目录如图: 点击index.html进入d ...
随机推荐
- 09Mybatis_入门程序——删除用户以及更新用户
删除用户: 还是前面的的案例,别的都不改,就修改两处地方.1.user.xml文件以及2.Mybatis_first.java文件 user.xml文件代码修改如下: <?xml version ...
- Linux网络共享管理(ssh,nfs,samba)
OpenSSH服务器: ssh协议:提供安全的ssh环境用于远程管理,默认端口:22: 服务名称:sshd openssh-server包的安装文件: 使用ssh客户端程序: 连接目标主机: ssh ...
- LINUX SSH显示中文乱码
ssh登陆后,执行: export LANG=zh_CN.gb2312就可以显示中文了.编辑/etc/sysconfig/i18n 将LANG="zh_CN.UTF-8" 改为 L ...
- AS2.0大步更新 Google强势逆天
New Features in Android Studio 2.0Instant Run: Faster Build & Deploy逆天吗?你还在羡慕iOS的playground吗?And ...
- 社交网站好友储存设计和实现(PHP+MySQL)
最近手头的一个网站新增社交功能,用户可以互加好友. 通常,对好友列表设计是新增一个好友,就往好友列表新增一行,当要查询一个用户好友 SELECT * FROM WHERE userid="1 ...
- Myeclipse其实和Eclipse差不多的, 至少不输出来的项目时一模一样的
http://zhidao.baidu.com/link?url=LiaDdzRYJtarYvpL_co-Zgno31Az7QiS0VFxGm351K3gWa225oU6-NFEfkalJB3lGV6 ...
- 招聘一个靠谱的ios
1. 风格纠错题 修改方法有很多种,现给出一种做示例: 最终改为: 下面对具体修改的地方, 2. 什么情况使用 weak 关键字,相比 assign 有什么不同? 什么情况使用 weak 关键字? 1 ...
- Linux 安装配置Subversion edge
2014-04-14:修正部分描述.添加JAVA_HOME报错处理步骤.添加配置sudoers 系统:CentOS 5.8 ,6.4 Subversion版本:Subversion Edge 4.0. ...
- mysql使用基础 sql语句(一)
csdn博文地址:mysql使用基础 sql语句(一) 点击进入 命令行输入mysql -u root -p,回车再输入密码,进入mysql. 终端命令以分号作为一条语句的结束,可分为多行输入,只需 ...
- 第五章:Javascript语句
在javascript中,表达式是短语,那么语句(statement)就是整句或命令.正如英文语句以句号结尾,javascript以分号结尾. 表达式计算出一个值,但语句使某件事发生. “使某件事发生 ...