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实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
九种原生js动画效果
Nov 11 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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
mac下安装nginx和php
2013/11/04 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python常见的pandas用法demo示例
2019/03/16 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
名词解释型面试题(主要是网络)
2013/12/27 面试题
园林施工员岗位职责
2013/12/11 职场文书
外企求职信范文分享
2013/12/31 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫