第八天

03-對(duì)象模型-第02天{表單屬性、屬性操作}

• 第八天
  • 表單屬性
  • 大量拼接字符串
  • 仿京東搜索框
  • 排他思想
  • 全選反選
  • 自定義屬性
    • 元素對(duì)象的自定義屬性
    • 標(biāo)簽的自定義屬性
    • 元素對(duì)象&&標(biāo)簽

表單屬性

大量拼接字符串

var btn = document.getElementById("btn");
var demo = document.getElementById("demo");
var inputs = demo.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = i;
}
//大量拼接字符串很消耗性能
//大量拼接字符串用數(shù)組
btn.onclick = function () {
    var arr = [];
    for (var i = 0; i < inputs.length; i++) {
        //console.log(inputs[i].value);
        arr.push(inputs[i].value);
    }
    console.log(arr.join("-"));
    //join可以把數(shù)組中的字符串拼接
    //如果不傳參 默認(rèn)按照 , 拼接
};

仿京東搜索框

var txt = document.getElementById("txt");
//文本框獲取焦點(diǎn)事件 onfocus
txt.onfocus = function () {
    //txt.value = "";
    //如果用戶沒(méi)有輸入 才清空
    if (this.value === "這是什么???") {
        this.value = "";
    }
};
//文本框失去焦點(diǎn) onblur
txt.onblur = function () {
    //如果用戶沒(méi)有輸入了文字 失去焦點(diǎn)后 才把默認(rèn)文字加上
    if (this.value === "") {
        this.value = "這是什么???";
    }
};

排他思想

<input type="button" value="按鈕"/>
<input type="button" value="按鈕"/>
<input type="button" value="按鈕"/>
<input type="button" value="按鈕"/>
<script>
    //點(diǎn)擊當(dāng)前按鈕 只讓當(dāng)前按鈕亮起來(lái)
    var inputs = document.getElementsByTagName("input");
    //給每一個(gè)都綁定事件
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = function () {
            //讓當(dāng)前按鈕亮起來(lái)
            //this.className = "highlight";
            //排他思想:干掉所有人留下我自己
            //干掉所有人 讓所有人的類名是空
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].className = "";
            }
            //留下我自己 讓當(dāng)前這個(gè)的類名變?yōu)閔ighlight
            this.className = "current";
        };
    }
</script>

全選反選

var all = document.getElementById("j_cbAll");
var tbody = document.getElementById("j_tb");
var checkboxes = tbody.getElementsByTagName("input");//下面的單選框
//點(diǎn)擊all 讓下面的的選中狀態(tài)和all一致
all.onclick = function () {
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = all.checked;
    }
};

//讓下面的影響上面
//點(diǎn)擊每一個(gè)都判斷 如果每一個(gè)都選中了 all就選中 否則不選中
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function () {
      var isCheckedAll = true;
      for (var i = 0; i < checkboxes.length; i++) {
          if (!checkboxes[i].checked) {
              isCheckedAll = false;
              break;
          }
      }
      all.checked = isCheckedAll;
  };
}

自定義屬性

元素對(duì)象的自定義屬性

• 可以像給對(duì)象定義屬性一樣,直接以點(diǎn)語(yǔ)法設(shè)置屬性

  <div id="box"></div>
  var box = document.getElementById("box");// 獲取元素對(duì)象
  box.aaa = "bbb";// 設(shè)置屬性
  
  

• 可以設(shè)置該元素對(duì)應(yīng)的標(biāo)簽所擁有的屬性,也可以設(shè)置沒(méi)有的屬性

  <div id="box"></div>
  var box = document.getElementById("box");// 獲取元素對(duì)象
  box.id = "cl";// div有id這個(gè)屬性
  box.abc = “aaa”; // div沒(méi)有abc這個(gè)屬性,但是也可以設(shè)置成功
  
  

標(biāo)簽的自定義屬性

• 設(shè)置標(biāo)簽屬性: setAttribute()

  <div id="box"></div>
  var box = document.getElementById("box");
  box.setAttribute("id","aaa");// 有規(guī)定的屬性可以設(shè)置
  box.setAttribute("bbb","ccc");// 沒(méi)有規(guī)定的屬性也可以設(shè)置
  
  

• 獲取標(biāo)簽屬性

  <div id="box"></div>
  var box = document.getElementById("box");
  box.getAttribute("id");// 有規(guī)定的可以獲取
  box.getAttribute("aaa"); // 沒(méi)有規(guī)定的也可以獲取
  
  

• 移除標(biāo)簽屬性

  <div id="box"></div>
  var box = document.getElementById("box");
  box.removeAttribute("id"); // 有規(guī)定的可以刪除
  box.removeAttribute("aaa"); // 沒(méi)有規(guī)定的也可以刪除
  
  

元素對(duì)象&&標(biāo)簽

• 給元素對(duì)象設(shè)置自定義屬性,無(wú)法映射到對(duì)應(yīng)的標(biāo)簽上
• 給標(biāo)簽設(shè)置自定義屬性
  • 有規(guī)定的可以映射到元素對(duì)象上
  • 沒(méi)有規(guī)定的無(wú)法映射到元素對(duì)象上
  • ie6/7/8都可以從元素對(duì)象上獲取(特殊)
• 標(biāo)簽和對(duì)象的自定義屬性 不會(huì)相互影響(IE678除外)