日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

WebAPI(part5)--排他操作

發布時間：2023/12/19 编程问答 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 WebAPI(part5)--排他操作 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

學習筆記，僅供參考，有錯必究

文章目錄

    • Web API
      • 排他操作
        • 排他思想
        • 百度換膚案例
        • 表格隔行變色

Web API

排他操作

排他思想

如果有同一組元素，我們想要某一個元素實現某種樣式， 需要用到循環的排他思想算法：

  • 所有元素全部清除樣式（干掉其他人）
  • 給當前元素設置樣式 （留下我自己）

    • 注意：順序不能顛倒，首先干掉其他人，再設置自己


    • 舉個例子

    代碼：

    <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><button>1</button><button>2</button><button>3</button><button>4</button><button>5</button><script>var btns = document.getElementsByTagName("button")for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = '';}this.style.backgroundColor = 'pink';}}</script></body></html>

    現在，我們點擊4按鈕：

    再點擊3按鈕：

    OK!


    百度換膚案例

    • 實現效果

    實現點擊小圖片，換背景圖片的效果。

    • 代碼
    <body><ul class="baidu"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li><li><img src="images/4.jpg"></li></ul><script>// 1. 獲取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img');// 2. 循環注冊事件 for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function() {// this.src 就是我們點擊圖片的路徑document.body.style.backgroundImage = 'url(' + this.src + ')';}}</script> </body>

    表格隔行變色

    • 實現效果

    原始表格：

    將光標移動到月餅那一行：

    • 代碼
    <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bg {background-color: pink;}</style></head><body><table border="1"><thead><tr><th>preduct</th><th>money</th><th>number</th></tr></thead><tbody><tr><td>排骨</td><td>￥100</td><td>4</td></tr><tr><td>月餅</td><td>￥80</td><td>8</td></tr><tr><td>桂魚</td><td>￥200</td><td>2</td></tr></tbody></table><script>// 1.獲取元素 獲取的是 tbody 里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2. 利用循環綁定注冊事件for (var i = 0; i < trs.length; i++) {// 3. 鼠標經過事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠標離開事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}</script></body></html>

    總結

    以上是生活随笔為你收集整理的WebAPI(part5)--排他操作的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。