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 相关文章推荐
javascript demo 基本技巧
Dec 18 Javascript
JS画线(实例代码)
Nov 20 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
Javascript玩转继承(一)
May 08 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
Vue js with语句原理及用法解析
Sep 03 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/02/16 PHP
详解php的socket通信
2015/08/11 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
Python中使用PDB库调试程序
2015/04/05 Python
python目录与文件名操作例子
2016/08/28 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Django框架模板介绍
2019/01/15 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
学校元旦晚会方案
2014/02/19 职场文书
大学信息公开实施方案
2014/03/09 职场文书
汽车促销活动方案
2014/03/31 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书