前端WEB-API 第三天--事件自定義屬性和元素的動態建立

時間 2019-12-10

標籤前端 web api 第三天事件自定義屬性元素動態建立欄目 HTML 简体版

原文原文鏈接

web-api 實際上來說一共也就是三天所學的，後面我會講一些案例，今天將四個相當重要的！html

取消事件的默認行爲
自定義屬性
節點的親屬訪問
建立元素
複製代碼

一、取消事件的默認行爲

常見的默認行爲兩種：html5

一、 form 表單的提交
 二、a  標籤的跳轉


 一、 form 表單的提交
<body>
    <!-- 這裏咱們註冊了一個form 表單，而後點擊submit 後會發現瀏覽器地址上面出現？號 -->
    <form action="">
      <input type="submit" />
    </form>
  </body>
  <script>
    // 咱們註冊一個事件
    var btn = document.querySelector("input");
    btn.onclick = function() {
      // alert會阻塞頁面
      alert("點擊提交");
    };
  </script>
複製代碼

二、a 標籤的跳轉java

<body>
    <a href="https://juejin.im/editor/drafts/5ca96b91f265da24fb7dd5ca">掘金</a>
  </body>
  <script>
    var btn = document.querySelector("a");
    btn.onclick = function() {
      alert("點擊阻隔跳轉");
    };
  </script>
複製代碼

事件的默認行爲就是：在邏輯執行完畢以後事件還有一些其餘的操做就是默認行爲

如何取消默認行爲呢？只須要在事件處理函數中返回 false

return false //點擊按鈕事件出發後，不會觸發默認行爲

<script>
    var btn = document.querySelector("a");
    btn.onclick = function() {
      alert("點擊阻隔跳轉");
      return false //點擊按鈕事件出發後，不會觸發默認行爲 
    };
  </script>
複製代碼

二、自定義屬性

爲何使用自定義屬性
     咱們能夠自定義屬性，用來描述內容，html 支持給任意標籤增長任意屬性，只要保證屬性的名字是
     一、不與系統重名
     二、命名規則是以字母開開頭，數字，字母下劃線，
     
 </head>
  <!-- 能夠再標籤中存儲數據 可是不影響展現
  從 html5 的規範中開始 全部自定義屬性應該使用data - 或 x- 開頭
  -->
  <body data-jingjing="我是靜靜">
    1231
  </body>
</html>
複製代碼

這裏能夠看到我在添加了自定義屬性後並不影響頁面展現

咱們來說如何js操做自定義屬性 attribute 屬性，特性或者簡寫形式attr 已經要記住attr是簡寫形式操做讀取，和賦值

<title>Document</title>
  </head>
  <!-- 能夠再標籤中存儲數據 可是不影響展現
  從 html5 的規範中開始 全部自定義屬性應該使用data - 或 x- 開頭
  -->
  <body data-jingjing="我是靜靜">
    <button>點擊按鈕</button>
  </body>
  <script>
    var btn = document.querySelector("button");
    btn.onclick = function() {
      var body = document.querySelector("body");
      var v = body.getAttribute("data-jingjing");
      alert(v);
    };
  </script>
</html>
<!-- 
  自定義屬性 

  標籤元素.getAttribute('自定義屬性名') 讀取自定義屬性獲得
  標籤元素.setAttribute('自定義屬性名','屬性值')
複製代碼

document.body()能夠直接獲取到頁面中的body

標籤元素.setAttribute('自定義屬性名','屬性值')

若是讀取的時候，元素沒有這個屬性，那麼就會返回空

<body>
    <button>點擊按鈕</button>
  </body>
  <script>
    var btn = document.querySelector("button");
    btn.onclick = function() {
      alert(document.body.getAttribute("data-id"));
    };
  </script>
</html>
<!-- 
  若是讀取的時候，元素沒有這個屬性，那麼就會返回空
複製代碼

節點的親屬訪問

該知識點也是屬於元素查找的範圍web

<div class="menu">
  <div>
    <a href="#">主菜單</a>
    <div>
      <a href="#">子菜單</a>
      <a href="#">子菜單</a>
      <a href="#">子菜單</a>
    </div>
  </div>
  <div>
    <a href="#">主菜單</a>
    <div>
      <a href="#">子菜單</a>
      <a href="#">子菜單</a>
      <a href="#">子菜單</a>
    </div>
  </div>
</div>
當咱們要作一個這樣的菜單按鈕的時候 點擊主菜單顯示和隱藏項目的子菜單的時候，咱們就須要親屬訪問
複製代碼

重點 ***

節點的親屬訪問
  獲取父元素
    元素.praentNode
  獲取哥哥
    元素.previousElementSibling
  得到其弟弟
    元素.nextElementSibling
  得到其孩子(注意這裏是僞數組)
    元素.children
複製代碼

上面是重點中的重點

訪問子節點的簡單屬性 .firstChild 獲取的第一個 .lastChild 得到最後一個api

<body>
    <div id="elem">
      <div></div>
    </div>
  </body>
  <script>
    var elem = document.querySelector("#elem");
    var list1 = elem.childNodes;
    var list2 = elem.children;

    console.log(list1);
    console.log(list2);

    var f1 = elem.firstChild;
    var f2 = elem.firstElementChild;

    console.log(f1);
    console.log(f2);

    var l1 = elem.lastChild;
    var l2 = elem.lastElementChild;

    console.log(l1);
    console.log(l2);
  </script>
複製代碼

代碼講解

明確: 全部的元素要麼是兄弟關係，要麼是父子關係
   <div> 父
      <div>哥哥</div>
      <div>兄弟
        <div>大兒子</div>
        <div>二兒子</div>
        <div>小兒子</div>
      </div>
      <div>弟弟</div>
    </div>

    語法：
      一、獲取父元素
          元素.parentNode
      二、獲取其哥哥
          元素.previousElementSibling
      三、得到其弟弟
          元素.nextElementSibling
      四、得到其孩子(僞數組)
           元素.children
複製代碼

元素關係到DOM 操做因此下面的要記牢

節點親屬訪問菜單案例

<style>
      div {
        border: 1px solid pink;
      }
      a {
        display: block;
      }
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="menu">
      <div>
        <a href="#">主菜單</a>
        <div class="hide">
          <a href="#">子菜單</a>
          <a href="#">子菜單</a>
          <a href="#">子菜單</a>
        </div>
      </div>
      <div>
        <a href="#">主菜單</a>
        <div class="hide">
          <a href="#">子菜單</a>
          <a href="#">子菜單</a>
          <a href="#">子菜單</a>
        </div>
      </div>
    </div>
  </body>
  <script>
    var btns = document.querySelectorAll(".menu > div > a");

    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function() {
        // 經過this 來判斷 找到其子菜單 就是nextElementSibling
        var submenu = this.nextElementSibling;
        // 控制它顯示與隱藏判斷該元素是否含有類樣式 hide
        var className = submenu.className;
        // 而後if進行判斷
        if (className === "hide") {
          submenu.className = "";
        } else {
          submenu.className = "hide";
        }
      };
    }
  </script>
複製代碼

若是在裏面出現問題 return false; 取消a 標籤的默認值數組

菜單案例第二種方法實際中開發使用

<script>
    var menu = document.querySelectorAll(".menu > div > a");
    for (var i = 0; i < menu.length; i++) {
      menu[i].onclick = function() {
        var submenu = this.nextElementSibling;
        var className = submenu.className.split(" ");
        var index = className.indexOf("hide");

        if (index > -1) {
          className.splice(index, 1);
          submenu.className = className.join(" ");
        } else {
          className.push("hide");
          submenu.className = className.join(" ");
        }
      };
    }
  </script>
 
這裏解釋呢？是使用split進行切割把裏面全部的類樣式進行切割，
而後使用indexOf找到hide 而後複製給 index 而後判斷 index 不等於-1 是沒找到 而後在有的有的狀況下去掉splice 找到index，裏面第一個 而後使用join 進行鏈接賦值 沒有的狀況下呢使用puch 追加一個hide 而後 join 鏈接 賦值
複製代碼

字符串.replace('匹配字符串','替換字符串')

var c = 'c  c0 c1'; //移除c類樣式
c = c.replace('c ','')

var c = 'c0 c c1'; //移除c類樣式
c = c.replace(' c','')

var c = 'c0 c1 c'; //移除c類樣式
c = c.replace(' c', '') 有一個bug

c = (' ' + c + ' ').replace(' c','');
var c = 'c0 c1 c'; //移除c類樣式
c = c.replace(' c ',' ');
複製代碼

建立元素重點重點！！！

/*
	問題：
		一、生成標籤的時候，不方便處理事件
		二、沒法實現追加
*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        padding: 5px;
        margin: 5px 0;
        border: 1px solid pink;
      }
      a {
        display: block;
      }
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    var data = [
      {
        menuName: "BAT",
        submenus: [
          { submenuName: "百度", url: "http://www.baidu.com" },
          { submenuName: "阿里巴巴", url: "http://taobao.com" },
          { submenuName: "網易", url: "http://wangyi.com" }
        ]
      },
      {
        menuName: "拼接",
        submenus: [
          { submenuName: "js", url: "http://www.w3cschool" },
          { submenuName: "web", url: "http://www.heihawugong" }
        ]
      }
    ];

    var html = '<div class="menu">\n';
    for (var i = 0; i < data.length; i++) {
      html += "<div>\n";
      html += "<a>" + data[i].menuName + "</a>\n";
      //   html += '<div class="hide">\n';
      //   這時候咱們去掉class hide 就會發現
      html += '<div class="">\n';
      for (var j = 0; j < data[i].submenus.length; j++) {
        var url = data[i].submenus[j].url;
        var submenuName = data[i].submenus[j].submenuName;
        html += "<a href=''+ url + ''>" + submenuName + "</a>\n";
      }
      html += "</div>\n";
      html += "</div>\n";
    }
    html += "</div>\n";

    // console.log(html);

    document.querySelector("#container").innerHTML = html;

    /*
		問題：
			一、生成標籤的時候，不方便處理事件
			二、沒法實現追加
	*/
  </script>
</html>
複製代碼

拿字符串拼接只能一次性處理，沒法對每個標籤DOM 對象

對元素的操做重要重要！！！重要！！！！

一、建立元素
             document.createElement('元素的標籤的名字')
	二、追加元素
	    父元素.appendChild('子元素')
	    功能是:將子元素放到父元素的 子元素的結尾處
	三、插入元素
	四、刪除元素
	五、修改元素
	六、查詢元素
複製代碼

一、 document.createElement('元素的標籤的名字')

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var anchor = document.createElement("a");
    anchor.innerHTML = "你好create";
    console.log(anchor);

    var p = document.createElement("p");
    p.innerHTML = "嘿哈java 很難嗎？";
    p.style.backgroundColor = "black";
    console.log(p);
  </script>
</html>
複製代碼

二、父元素. appendChild（元素）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p>111</p>
      <p>222</p>
    </div>
  </body>
  <script>
    var p = document.createElement("p");
    p.innerHTML = "建立的p標籤";
    p.style.backgroundColor = "pink";

    var container = document.querySelector("#container");
    // 這裏的p是就是DOM 對象對不對 寶貝們，讓咱們來綁定事件
    container.appendChild(p);

    p.onclick = function() {
      alert("1");
    };
  </script>
</html>
複製代碼