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

编程问答

WebAPI(part5)--排他操作

發布時間：2023/12/19 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 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)--排他操作的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：春天古诗100首六年级
下一篇： WebAPI(part6)--自定义属性