Web API---DOM---點擊操作---part2---14個案例

来源:https://www.cnblogs.com/jane-panyiyun/archive/2019/12/05/11987304.html

案例1:點擊按鈕禁用文本框 <input type="button" value="禁用文本框" id="btn" /> <input type="text" value="文本框" id="txt" /> <script> document.getElementById("btn").onclic ...


案例1:點擊按鈕禁用文本框

  <input type="button" value="禁用文本框" id="btn" />
  <input type="text" value="文本框" id="txt" />

  <script>
    document.getElementById("btn").onclick = function () {
      document.getElementById("txt").disabled = true;
    };
  </script>

 

案例2:點擊按鈕修改列表的背景顏色

  <input type="button" value="變色" id="btn" />
  <ul id="uu">
    <li>王陸</li>
    <li>海雲帆</li>
    <li>聞寶</li>
    <li>琉璃仙</li>
    <li>王舞</li>
  </ul>
  <script>
    document.getElementById("btn").onclick = function () {
      document.getElementById("uu").style.backgroundColor = "pink";
    };
  </script>

 

 案例3:點擊超鏈接彈出對話框,但阻止超鏈接的預設的跳轉

先執行彈框,用return false停止事件

  <!--第一種寫法:-->
  <a href="http://www.baidu.com" onclick="alert('哎呀我被點了'); return false">百度1</a>

  <!--第二種寫法-->
  <script>
    function f1() {
      alert("好漂亮呀");
      return false;
    }
  </script>
  <a href="http://www.baidu.com" onclick="return f1()">百度2</a>


  <!--第三種寫法:-->
  <a href="http://www.baidu.com" id="ak">百度3</a>
  <script>
    document.getElementById("ak").onclick = function () {
      alert("嘎嘎");
      return false;
    };
  </script>

 

案例4:點擊小圖,下麵顯示大圖

  <a href="images/1.jpg" id="ak">
    <img src="images/1-small.jpg" alt="">
  </a>
  <img src="" alt="" id="big">
  <script src="common.js"></script>
  <script>
    //點擊超鏈接
    my$("ak").onclick = function () {
      //big圖片的src變成當前對象的地址href
      my$("big").src = this.href;
      return false; //阻止預設超鏈接挑轉
    };
  </script>

 

案例5:美女相冊

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body {
      font-family: "Helvetica", "Arial", serif;
      color: #333;
      background-color: #ccc;
      margin: 1em 10%;
    }

    h1 {
      color: #333;
      background-color: transparent;
    }

    a {
      color: #c60;
      background-color: transparent;
      font-weight: bold;
      text-decoration: none;
    }

    ul {
      padding: 0;
    }

    li {
      float: left;
      padding: 1em;
      list-style: none;
    }

    #imagegallery {

      list-style: none;
    }

    #imagegallery li {
      margin: 0px 20px 20px 0px;
      padding: 0px;
      display: inline;
    }

    #imagegallery li a img {
      border: 0;
    }
  </style>
</head>

<body>

  <h2>
    美女畫廊
  </h2>

  <ul id="imagegallery">
    <li><a href="images/1.jpg" title="美女A">
        <img src="images/1-small.jpg" width="100" alt="美女1" />
      </a></li>
    <li><a href="images/2.jpg" title="美女B">
        <img src="images/2-small.jpg" width="100" alt="美女2" />
      </a></li>
    <li><a href="images/3.jpg" title="美女C">
        <img src="images/3-small.jpg" width="100" alt="美女3" />
      </a></li>
    <li><a href="images/4.jpg" title="美女D">
        <img src="images/4-small.jpg" width="100" alt="美女4" />
      </a></li>
  </ul>
  <div style="clear:both"></div>


  <!--顯示大圖的-->
  <img id="image" src="images/placeholder.png" alt="" width="450" />
  <p id="des">選擇一個圖片</p>

  <script src="common.js"></script>
  <script>
    //從ul中標簽獲取獲取所有的a標簽
    var aObjs = my$("imagegallery").getElementsByTagName("a");
    //迴圈遍歷所有的a標簽
    for (var i = 0; i < aObjs.length; i++) {
      //為每個a標簽註冊點擊事件
      aObjs[i].onclick = function () {
        //為id為image的標簽的src賦值
        my$("image").src = this.href;
        //為p標簽賦值
        my$("des").innerText = this.title;
        //阻止超鏈接預設的跳轉
        return false;
      };
    }
  </script>
</body>
</html>

 

實現效果:

 

案例6:列表隔行變色

練習的時候,因為background拼寫錯誤,找bug找了很久....在加入console.log("哈哈")測試後,大致定位到改背景顏色部分出錯。

<!-- 奇黃偶綠 -->
  <input type="button" value="隔行變色" id="btn" />
  <ul id="brandlist">
    <li>雅詩蘭黛</li>
    <li>蘭蔻</li>
    <li>契爾氏</li>
    <li>海藍之謎</li>
    <li>歐舒丹</li>
    <li>雅頓</li>
  </ul>

  <script src="common.js"></script>
  <script>
    // my$("btn").onclick = function () {
    //   //獲取所有li標簽
    //   var list = my$("brandlist").getElementsByTagName("li");
    //   for (var i = 0; i < list.length; i++) {
    //     if (i % 2 == 0) {
    //       list[i].style.backgroundColor = "yellow";
    //     } else {
    //       list[i].style.backgroundColor = "green";
    //     }
    //   }
    // };

    //優化後
    my$("btn").onclick = function () {
      var list = my$("brandlist").getElementsByTagName("li");
      for (var i = 0; i < list.length; i++) {
        list[i].style.backgroundColor = i % 2 == 0 ? "yellow" : "green";
      }
    };
  </script>

 

案例7:滑鼠划過,顯示和隱藏二維碼

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .nodeSmall {
      width: 50px;
      height: 50px;
      background: url(images/bgs.png) no-repeat -159px -51px;
      position: fixed;
      right: 10px;
      top: 40%;
    }

    .erweima {
      position: absolute;
      top: 0;
      left: -150px;
    }

    .nodeSmall a {
      display: block;
      width: 50px;
      height: 50px;
    }

    .hide {
      display: none;
    }

    .show {
      display: block;
    }
  </style>


</head>

<body>
  <div class="nodeSmall" id="node_small">
    <a href="#"></a>
    <!--錨定-->
    <div class="erweima hide" id="er">
      <img src="images/456.png" alt="" />
    </div>
  </div>


  <script src="common.js"></script>
  <script>
    ////獲取滑鼠要進入的a標簽
    var aObj = my$("node_small").getElementsByTagName("a")[0];
    //為a註冊滑鼠進入
    aObj.onmouseover = function () {
      my$("er").className = "erweima show";
    };
    //為a註冊滑鼠離開
    aObj.onmouseout = function () {
      my$("er").className = "erweima hide";
    };
  </script>
</body>
</html>

 

案例8:根據Name屬性值獲取元素

  <input type="button" value="顯示效果" id="btn" /> <br />
  <input type="text" value="你好" name="name1" /> <br />
  <input type="text" value="你好" name="name3" /> <br />
  <input type="text" value="你好" name="name2" /> <br />
  <input type="text" value="你好" name="name1" /> <br />
  <input type="text" value="你好" name="name1" /> <br />

  <script src="common.js"></script>
  <script>
    my$("btn").onclick = function () {
      var inputs = document.getElementsByName("name1");
      for (var i = 0; i < inputs.length; i++) {
        inputs[i].value = "我很好";
      }
    };
  </script>

 

實現效果:

 

 案例9:點擊按鈕設置應用cls類樣式的標簽的背景顏色為hotpink

getElementsByClassName();------>h5的, IE8及以下不支持
  <p>第一個p標簽</p>
  <p class="cls">第二個p標簽</p>
  <span>第一個行內元素span</span> <br />
  <span class="cls">第二個行內元素span</span> <br />
  <div>第一個盒子</div> <br />
  <div class="cls">第二個盒子</div> <br />
  <input type="button" value="顯示效果" id="btn" /> <br />
  <script src="common.js"></script>
  <script>

    my$("btn").onclick = function () {
      //根據類樣式的名字來獲取元素
      var objs = document.getElementsByClassName("cls");
      for (var i = 0; i < objs.length; i++


	
您的分享是我們最大的動力!

更多相關文章
  • 基於ES6語法手寫promise A+ 規範,源碼實現 class Promise { constructor(excutorCallBack) { this.status = 'pending'; this.value = undefined; this.fulfilledAry = []; th ...
  • 設置和獲取 標簽內容和文本內容 總結 設置: 使用innerText主要是設置文本的, 設置標簽內容, 是沒有標簽的效果的 innerHTML是可以設置文本內容 innerHTML主要的作用是在標簽中設置新的html標簽內容, 是有標簽效果的 想要設置標簽內容, 使用innerHTML 想要設置文本 ...
  • 一、HTML概述 htyper text markup language 即超文本標記語言。 超文本: 就是指頁面內可以包含圖片、鏈接,甚至音樂、程式等非文字元素。 標記語言: 標記(標簽)構成的語言。 1、網頁的組成 一個網頁一般由兩部分組成即: HTML(Hypertext Markup Lan ...
  • 當我們執行 JS 代碼的時候其實就是往執行棧中放入函數,那麼遇到非同步代碼的時候該怎麼辦?其實當遇到非同步的代碼時,會被掛起併在需要執行的時候加入到 Task(有多種 Task) 隊列中。一旦執行棧為空,Event Loop 就會從 Task 隊列中拿出需要執行的代碼並放入執行棧中執行,所以本質上來說 ...
  • 這裡介紹的是Win平臺的安裝方法,其他平臺請至Github>Puppeteer. 首先要安裝node.js 可以看我這篇的開頭>【Angular】學習筆記-環境部署、項目建立相關 1.新建項目目錄 2.打開gitbush(常用的Terminal都可以) 3.鍵入 npm i puppeteer 4. ...
  • 總結獲取元素的方式 1. 根據id屬性的值獲取元素,返回來的是一個元素對象 document.getElementById("id屬性的值"); document.getElementById("btn"); 2. 根據標簽名字獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象 docume ...
  • 本文由葡萄城技術團隊於博客園翻譯並首發 轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 如果我們自己編寫從URL中分析和提取元素的代碼,那麼有可能會比較痛苦和麻煩。程式員作為這個社會中最“懶”的群體之一,無休止的重覆造輪子必然是令人難以容忍的,所以大多數瀏 ...
  • 條件語句用於基於不同條件執行不同的動作。 條件語句 在您寫代碼時,經常會需要基於不同判斷執行不同的動作。 您可以在代碼中使用條件語句來實現這一點。 在 JavaScript 中,我們可使用如下條件語句: 使用 if 來規定要執行的代碼塊,如果指定條件為 true 使用 else 來規定要執行的代碼塊 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...