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几种形式的树结构菜单
May 10 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
javascript内置对象操作详解
Feb 04 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
javaScript封装的各种写法
Aug 14 Javascript
js断点调试经验分享
Dec 08 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
python3.4中清屏的处理方法
2020/07/06 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
SQL数据库笔试题
2016/03/08 面试题
中专毕业个人的自荐信格式
2013/09/21 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
爱心捐助活动总结
2015/05/09 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书