jQuery实现获取h1-h6标题元素值的方法


Posted in Javascript onMarch 06, 2017

本文实例讲述了jQuery实现获取h1-h6标题元素值的方法。分享给大家供大家参考,具体如下:

1、问题背景:

查找到h1-h6,并遍历它们,打印出内容

2、实现代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>查找标题</title>
    <script type="text/javascript" src="jquery-1.7.2.min.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、运行效果图:

jQuery实现获取h1-h6标题元素值的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
js函数调用的方式
May 06 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 #Javascript
JavaScript函数参数的传递方式详解
Mar 06 #Javascript
jQuery实现遍历复选框的方法示例
Mar 06 #Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 #Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 #Javascript
jQuery简单实现遍历单选框的方法
Mar 06 #Javascript
jQuery在header中设置请求信息的方法
Mar 06 #Javascript
You might like
php表单提交实例讲解
2015/11/12 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php封装的page分页类完整实例
2016/10/18 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
JS Loading功能的简单实现
2013/11/29 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
python多进程操作实例
2014/11/21 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
python speech模块的使用方法
2020/09/09 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
Html5 localStorage入门教程
2018/04/26 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
副厂长岗位职责
2014/02/02 职场文书
个人作风剖析材料
2014/02/02 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
Django显示可视化图表的实践
2021/05/10 Python
Go语言读取txt文档的操作方法
2022/01/22 Golang