利用:header匹配所有标题做目录
1、问题背景
查找到h1-h6,并遍历它们,打印出内容
2、实现源码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>查找标题</title>
- <script type="text/javascript" src="js/jquery-2.2.3.js" ></script>
- <script>
- $(function(){
- //查找h1-h6
- $(":header").each(function(){
- $(this).click(function(event){
- console.info(event.target.innerText);
- console.log(event.currentTarget.innerHTML);
- });
- });
- });
- </script>
- </head>
- <body>
- <h1>Hello H1</h1>
- <h2>Hello H2</h2>
- <h3>Hello H3</h3>
- <h4>Hello H4</h4>
- <h5>Hello H5</h5>
- <h6>Hello H6</h6>
- </body>
- </html>
3、实现结果

4、结果说明
(1)$(":header")
选择所有标题元素
(2)each函数
遍历h1-h6
(3)event.target.innerText
获取点击元素内容内容
(4)event.currentTarget.innerHTML
获取点击元素内容内容
利用:header匹配所有标题做目录的更多相关文章
- treeview自动从表中添加标题和列值做目录的方法2
treeview自动从表中添加标题和列值做目录的方法2,该方法是借鉴万一老师的 http://www.cnblogs.com/del/archive/2008/05/15/1114450.html 首 ...
- 利用rman进行异机还原(目录相同)
利用rman进行异机还原(目录相同) 源始库:192.168.201.2 目标库:192.168.201.3 --192.168.201.2 --rman [oracle@db01 ~]$ rman ...
- poj 2446 Chessboard (二分图利用奇偶性匹配)
Chessboard Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 13176 Accepted: 4118 Descr ...
- 京东无人超市的成长之路 如何利用AI技术在零售业做产品创新?
随着消费及用户体验的需求升级.人货场的运营效率需求提升.人工智能技术的突破以及零售基础设施的变革等因素共同推动了第四次零售革命的到来,不仅在国内,国外一线巨头互联网亚马逊等企业都在研发无人驾驶.无人超 ...
- Jqgrid利用正则匹配表达式正确移除html标签
在使用JqGrid表格插件过程中,遇到一个问题:后台取出来的字段是带有Html标签的,于是将内容填充到表格之后,带有的html标签会把表格撑开或者每一行的内容显示不统一,导致非常难看,就像下图所示: ...
- 利用基准电压效正Vcc做参考电压的ADC采样计算方法
利用基准电压效正Vcc做参考电压的ADC采样计算方法
- UIView封装动画--iOS利用系统提供方法来做转场动画
UIView封装动画--iOS利用系统提供方法来做转场动画 UIViewAnimationOptions option; if (isNext) { option=UIViewAnimationOpt ...
- UIView封装动画--iOS利用系统提供方法来做关键帧动画
iOS利用系统提供方法来做关键帧动画 ios7以后才有用. /*关键帧动画 options:UIViewKeyframeAnimationOptions类型 */ [UIView animateKey ...
- UIView封装动画--iOS 利用系统提供方法来做弹性运动
iOS 利用系统提供方法来做弹性运动 /*创建弹性动画 damping:阻尼,范围0-1,阻尼越接近于0,弹性效果越明显 velocity:弹性复位的速度 */ [UIView animateWith ...
随机推荐
- Spark Streaming数据清理内幕彻底解密
本讲从二个方面阐述: 数据清理原因和现象 数据清理代码解析 Spark Core从技术研究的角度讲 对Spark Streaming研究的彻底,没有你搞不定的Spark应用程序. Spark Stre ...
- Neo4J简单了解
1.什么是Neo4j Neo4j是由java实现的开源NOSQL图数据库 数据库分为关系型和非关系型两种类型. 其中非关系型又分为Graph(图形),Document(文档),Cloumn Famil ...
- [OpenCV]实验1.1:图像加载、显示
实验要求:利用图像库的功能,实现从文件加载图像,并在窗口中进行显示的功能:利用常见的图像文件格式(.jpg;.png;.bmp; .gif)进行测试 实验原理:图片读取到程序中是以Mat结构存储的,在 ...
- Android_Activity知识点
一:安卓的目录下面有两个文件夹,一个是assets一个是RES其中在resw文件夹放的所有东西都会在R文件夹中自动对应的生成了一个ID,那么在assets中我们可以放关于这个工程的任何文件. 二:dr ...
- JavaScript第二课
1.关于鼠标事件有: onmouseover(),onmouseout(),onmousedown(),onmouseup(),onclick()事件. 2.创建JavaScript对象: 方法1:通 ...
- js 创建数组方法以及区别
示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...
- js设置加载进度提示
CreateTime--2017年8月23日09:17:46Author:Marydon js设置加载进度提示 第一部分:CSS /*加载样式*/ .Loading { position: abs ...
- 如何更改Docker默认的images存储位置
Docker的镜像以及一些数据都是在/var/lib/docker目录下,它占用的是Linux的系统分区,也就是下面的/dev/vda1,当有多个镜像时,/dev/vda1的空间可能不足,我们可以把d ...
- jquery 在ul中取得第一级的li
在ul中取得第一级的li <div id='demo1'> <ul> <li id='1'>1<li> <li id='2'>2<li ...
- 《MVC +EasyUI 》——表单的提交
之前用AJax给Controller传递參数,然后再调用服务端的方法对数据库进行更改,今天碰到一个新的方法,就是表单的提交.这样能够省去AJax穿參.当表单提交后.我们能够获取表单上控件中的值 ...