首頁 > web前端 > js教程 > jQuery取得h1-h6標題元素值方法實例

jQuery取得h1-h6標題元素值方法實例

小云云
發布: 2018-01-23 13:31:23
原創
2202 人瀏覽過

本文主要介紹了jQuery實作取得h1-h6標題元素值的方法,涉及$(":header")選擇器操作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取得元素的方法總結

#JavaScript取得元素的方法與屬性的實例分析


以上是jQuery取得h1-h6標題元素值方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板