JS ========== 通過點擊每個td 實現 跳轉圖片
樣式：
.focus{background:#0f0}
結構：
<td class = "focus"></td>
<td></td>
<td></td>
<img src = "img/1.jpg " > // 在img下面有三張圖片分別是 1.jpg 2.jpg 3.jpg
<script>
// 獲取td
var tds = document.querySelectorAll("td") // 通過css選擇器 來獲取元素 ==> 得到的是一個數組
// 遍歷數組，為每個td添加點擊事件
for(var i = 0; i < tds.length ; i++){
tds[i].setAttribute("number", i + 1) // ====解決i 一直都是3的方法。i+ 1 的原因是 img 的路徑 是從 1，2,3開始的
tds[i].onclick = function(){ // 在這里想根據i的值獲取每個td，然后為每個td添加點擊事件，但是函數放在了for循環里面，當點擊事件還未點擊執行的時候，for循環已經結束了。
// 所以這里的i 每次取到的都是 3 =====》解決方法，在for 循環的過程中，獲取到 具體的 i 值，並把它作為td的一個屬性的屬性值保存起來，
// 這樣當想獲得每個td的 時候， 從 屬性值里面獲取即可
var index = this.getAttribute("number") // 之前設置了一個屬性 number 存了 i+ 1，這里將這個值取出來
var src = "img/" + index + ".jpg" // index 作為圖片的序號 重新給了src路徑，就可以改變圖片的路徑了
// 下面這兩行代碼 是為了實現，當前顯示的td 有背景色，點擊每個td的時候會有一個背景色
document.querySelector(".focus").className = ""; // 清除當前的舊交點 當前 第一個td已經設置了背景色
this.className = ".focus" // 點擊每個td的時候會給它添加一個focus類，這個類會改變td背景色
}
}
</script>
今日學習要點：
1. 將點擊事件函數寫在了for循環里面的時候，for循環會最先執行完畢，然后點擊函數才會能夠點擊。
==== 所以要注意 for（var i）i 的問題。
2. className
div.className== 內置屬性，獲取class名字的時候，要使用className