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 相关文章推荐
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
jQuery示例收集
Nov 05 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
微信小程序实现列表左右滑动
Nov 19 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
javascript window对象属性整理
2009/10/24 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
node后端服务保活的实现
2019/11/10 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
vue实现信息管理系统
2020/05/30 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
设计部经理的岗位职责
2013/11/16 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
家长对学生的评语
2014/04/18 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
mysql中关键词exists的用法实例详解
2022/06/10 MySQL