利用: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 ...
随机推荐
- IOS生成证书
1.生成本地签名文件, 点击此图标,选择证书助理,按照以下步骤生成签名文件,在生成证书时需要导入签名文件生成. 点击继续就能生成签名文件,保存次CSR文件. 2.生成证书 到下面这个页面选择证书的签名 ...
- ElasticSearch reindex报错:the final mapping would have more than 1 type
ElasticSearch reindex报错:the final mapping would have more than 1 type 学习了:https://blog.csdn.net/qq_2 ...
- 有趣的Java之调皮的浮点数
**当你在写一个电商网站的时候,你可能会给你的商品标价1.99,10.9这样的价格来吸引顾客.我应该用浮点数float/double来储存它们,当我的顾客购买商品的时候,从他们的账户里扣费,使用整型是 ...
- iOS 8 Share Extension Safari URL Example(在iOS中分享url的样例)
ios8 的Extension给我们提供了非常多奇妙的功能.以后分享内容再也不用进入app了,让我们的手机更安全,以下我们以在safari 浏览器中分享一个web url 来讲述Share Exten ...
- atitit.微信支付的教程文档 attilax总结
atitit.微信支付的教程文档 attilax总结 1. 支付流程概览 1 2. 设置支付起始文件夹 host/app/paydir/ 1 3. 设置oauth验证域名 1 4. 測试文件夹 能 ...
- ffmpeg怎么样处理网络流
http://blog.sina.com.cn/s/blog_675142dc01010otk.html 最近遇到好几个人在问ffmpeg如何处理网络流,刚好前段时间也在做这方面,抽空整理了下,把主要 ...
- 算法笔记_158:算法提高 逆序排列(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 编写一个程序,读入一组整数(不超过20个),并把它们保存在一个整型数组中.当用户输入0时,表示输入结束.然后程序将把这个数组中的值按逆序重新存 ...
- for in 与 Object.keys 与 hasOwnProperty区别
1.结论 for in遍历对象所有可枚举属性 包括原型链上的属性 Object.keys遍历对象所有可枚举属性 不包括原型链上的属性 hasOwnProperty 检查对象是否包含属性名,无法检查原型 ...
- SVN:This client is too old to work with working copy…解决方法
昨天升级了一下苹果系统到10.10,扁平化确实不错,高兴之余多少有些不快.我的svn出现故障,总是提示我 SVN:This client is too old to work with workin ...
- [Java - 调用WebService]{http://schemas.microsoft.com/ws/2005/05/addressing/none}ActionNotSupported
- Unable to find required classes (javax.activation.DataHandler and javax.mail.internet.MimeMultipar ...