详细整理，理解DOM中表单、Tab栏切换和style样式等

本文笔记基于「千古壹号」的GitHub项目： https://github.com/qianguyihao/web

---

1.基础

1.1 点击按钮，显示和隐藏

1.思路：

• JS:设置点击事件函数，改变类标签内容;
• CSS:类标签内容.

2.事件函数

 if (this.innerHTML === "隐藏") {
        div1.className = "hide";
        btn.innerHTML = "显示";
  } else {
        div1.className = "show";
        btn.innerHTML = "隐藏";
  } 

3.CSS

.show {
          display: block;
       }
.hide {
          display: none;
      }       

1.2 相册显示

1.思路

• HTML:设置超链接图片;
• JS:使点击相册时属性值改变。

2.HTML

<a href="imgs/4.jpg" title="美女D">
     <img src="imgs/4.jpg" width="100" alt="美女4"/>
</a>     

3.事件函数

for (var i = 0; i < aArr.length; i++) {
      aArr[i].onclick = function () {  
      img.src = this.href; 
      des.innerHTML = this.title;     
      return false;    //阻止继续执行下面的代码。
      }    
}      

1.3 鼠标悬停显示二维码大图

1.思路：

• JS:利用onmouseover和onmouseout事件函数
• CSS:设置二维码大小与位置。

2.事件函数

a.onmouseover = fn1;   //鼠标悬停时
a.onmouseout = fn2;     //鼠标离开时
function fn1() {
    doo.className = "code-big show";
}
         
function fn2() {
    doo.className = "code-big hide";          
}             

---

2.表单

2.1 禁用、解禁文本

1.思路：JS:设置点击事件，引入disabled属性。
2.事件函数：

btn1.onclick = function () {
                inp.disabled = "no";   //禁用文本框。
            }
btn2.onclick = function () {
                inp.removeAttribute("disabled"); //解禁文本框
            }           

2.2 文本框获取、失去焦点

1.方法1：点击文本框后需要先删除提示文字再输入内容，删除内容后离开文本框后重新显示文字

• html:input表单

 <input id="inp1" type="text" value="微单相机" />

• js:设置onfocus和onblur

inp1.onfocus = function () {
            if (this.value === "微单相机") {
               this.value = "";
               this.style.color = "#000";
            }
        }
        //失去焦点事件
        inp1.onblur = function () {
            if (this.value === "") {
                this.value = "微单相机";
                this.style.color = "#ccc";
            }
        }

2.方法2：直接输入提示文字，删除内容后立即显示提示文字

• html:将值写在一个标签中，如label，而不是放在input中的value

<label for="inp2">电动牙刷</label>//点击后若不输入依旧显示电动牙刷
<input id="inp2" type="text" />

• js：设置oninput事件，输入文字和删除文字都会触发

var lab = document.getElementsByTagName("label")[0];
inp2.oninput = function () {
            //判断input中的值是否为空，如果为空，那么label显示，否则隐藏。
            if (this.value === "") {
                lab.className = "show";
            } else {
                lab.className = "hide";
            }
        }

3.方法3：html5的占位符

placeholder: <input type="text" placeholder="我是placeholder" />

2.3 全选和单选

• html中设置表格，按钮则设置选择按钮

   <input type="checkbox" />

• js中需要先绑定3个事件

var topInp = document.getElementById("title");//标题按钮
var tbody = document.getElementById("content");//内容：包含了内容按钮、文字
var botInpArr = tbody.getElementsByTagName("input");//内容按钮

• 两个需求，其中需求1是点击第一行，实现所有行全选或不选

 topInp.onclick = function () {
                for(var i=0;i<botInpArr.length;i++){
                    botInpArr[i].checked = this.checked;
                }
            }

• 另一个需求是下面的行全选定了第1行的行全选，否则第一行不选

for(var i=0;i<botInpArr.length;i++){
                botInpArr[i].onclick = function () { 
                    var bool = true;//排他思想：先默认为true
                    /*检测每一个input的checked属性值。*/
                    for(var j=0;j<botInpArr.length;j++){
                        if(botInpArr[j].checked === false){
                            bool = false;
                        }
                    }
                    topInp.checked = bool;
                }
            }

---

3.Tab栏切换

3.1 鼠标悬停，背景变色

1.思路：

• 方法1：js：利用onmouseover和mouseout事件，重要思想为排他思想，需要设置所有classname为空，this按钮需要特别设置为当前按钮。css：当前按钮背景色不同。
• 方法2：仅设置css鼠标悬停效果。

2.绑定事件：绑定的是1个数组

var btnArr = document.getElementsByTagName("button");

3.排他思想：

 for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环
        btnArr[i].onmouseover = function () {
        //统一默认设置
            for(var j=0;j<btnArr.length;j++){
                btnArr[j].className = "";
            }
            this.className = "current";  //【重要】核心代码
        }
    }

4.离开按钮，还原背景色：

for(var i=0;i<btnArr.length;i++){
        btnArr[i].onmouseout = function () {
            this.className = "";
        }
    }

3.2 初代代码

1.思路:html中设置一个盒子，图中第一行的效果用列表设置，第2行均用span实现。css中可以设置span内容默认为none，只有鼠标移动时才显示块状。js中设置鼠标移动事件。
2.js代码如下：

 for(var i=0;i<liArr.length;i++){
                
                liArr[i].index = i;
                liArr[i].onmouseover = function () {
                    //(排他思想)
                    for(var j=0;j<liArr.length;j++){
                        liArr[j].className = "";
                        spanArr[j].className = "";
                    }
                    this.className = "current";
                    spanArr[this.index].className = "show"; //【重要代码】
                }
            }

3.3 优化代码

需求：设置3个盒子
思路：将上述戴拿封装在函数fn（element）中，并设置1个循环函数进行调用，循环函数如下：

for (var i = 0; i < boxArr.length; i++) {
                fn(boxArr[i]);
            }

---

4.innerHTML

4.1 write

• 第1种创建方式（不推荐）:

document.write("<li class='hehe'>我是document.write创建的</li>");

4.2 innerHTML

• 可以调用、增加、替换和删除指定标签内的文字。

ul.innerHTML += "<li id='li1'>我是innerHTML增加的</li>" ; //+=增加
ul.innerHTML = "<li id='li1'>我是innerHTML替换的</li>"  ;//=替换
ul.innerHTML = " "  ;//删除

4.3 在线用户测试

for (var i = 0; i < users.length; i++) {
        ul.innerHTML += '<li>' +'<a href="#" target="blank"><img src="' + users[i].icon + 
        '" width="48" height="48" alt="' + users[i].name + '"></a>' +'<p><a href="#" title="'
         + users[i].name + '" target="_blank">' + users[i].name + '</a></p>' + '</li>';
    }

4.4 模拟百度下方提示

• html标签设置：

 <div class="box">
 	<input type="text" />
 	<button>搜索</button>
 </div>

• 步骤1：获取事件源
  思路：模拟服务器的内容，先设置一个数组，作为提示的内容，然后捕获事件源。

var arr = ["a", "ab", "abc", "abcd", "aa", "aaa"];//提示内容数组
var box = document.getElementsByTagName("div")[0];
var inp = box.children[0];//第1个子元素为文本框

children() 方法返回被选元素的所有直接子元素。

• 步骤2：绑定事件：onkeyup为输入事件，键盘弹起事件

 inp.onkeyup = function () {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
            //【重要】判断老数组arr中的每一项，是否以input的内容为开头
                if (arr[i].indexOf(this.value) === 0) {  
                    newArr.push("<li>" + arr[i] + "</li>");
                }
            }
            var str = newArr.join("");

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
在每次创建新的ul之前若存在旧的ul，需要先删除，ul标签是div盒子的第3个儿子。

  if (box.getElementsByTagName("ul")[0]) {
                box.removeChild(box.children[2]);
            }

若未输入或newarr数组长度为0，则证明不存在，直接返回。

if (this.value.length === 0 || newArr.length === 0) {  
                return;
            }

• 步骤3：书写事件驱动程序

var ul = document.createElement("ul");
ul.innerHTML = str;
box.appendChild(ul);

---

5.定时器：关闭广告

需求：点击“×”号，广告页面关闭
思路：设置定时器，点击后透明度opacity逐渐变为0，并隐藏盒子。

• 步骤1：获取事件源，定义定时器

var closeBanner = document.getElementById("closeBanner");//“×”号
var topBanner = document.getElementById("topBanner");
var timer = null;

• 步骤2：绑定事件

closeBanner.onclick = function () {
        timer = setInterval(function () {
            topBanner.style.opacity -= 0.1;
            if (topBanner.style.opacity < 0) {
                topBanner.style.display = "none";
                clearInterval(timer);
            }
        }, 50);
    }

---

6.style设置样式

• style作为对象只能调用行内样式，如

console.log(box1.style.backgroundColor);

• 通过cssText一次性设置行内样式

 box1.style.cssText = "width: 300px;height: 300px;background-color: green;";

• 透明度设置

  div.style.opacity = "0.2";   //设置背景色的透明度。单位是0.1

6.1 文本框聚焦、失焦后的背景设置

• 聚焦事件：onfocus

this.style.backgroundColor = "red";//js中没有-，故C大写

• 失焦事件：onblur

this.style.backgroundColor = "";

6.2 隔行变色

• 需求：
  1.隔行颜色不同；
  2.悬停高亮，离开恢复。
• 思路：
  1.针对需求1，设置奇偶数行不同；
  2.针对需求2，设置鼠标“停离”事件，但先要保存原背景色，使离开后恢复到原来一样。
• 需求1代码：

for (var i = 0; i < trArr.length; i++) {
        if (i % 2 !== 0) {//偶数行
            trArr[i].style.backgroundColor = "red";
        } else {
            trArr[i].style.backgroundColor = "blue";//奇数行
        }

• 需求2代码：

  var myColor = "";
        trArr[i].onmouseover = function () {
            //赋值颜色之前，先记录颜色
            myColor = this.style.backgroundColor;
            this.style.backgroundColor = "white;
        }
        trArr[i].onmouseout = function () {
            this.style.backgroundColor = myColor;
        }

• 两个需求均写在一个for循环中

 for (var i = 0; i < trArr.length; i++){}