第八天
03-對(duì)象模型-第02天{表單屬性、屬性操作}
表單屬性
表單屬性 | 作用 | 示例 |
---|---|---|
type | 設(shè)置input元素的類型 |
<input type="text"> <input type="text"> |
value | 設(shè)置input元素的值 |
<input type="text" value="123"> <input type="text" value="123"> |
checked | 設(shè)置input選擇框是否選中 |
<input type="radio" checked="checked"> <input type="radio" checked="checked"> |
selected | 設(shè)置下拉列表select中的option是否被選中 |
<select><option selected="selected">我被選中了</option><option>沒(méi)被選中</option></select> <select><option selected="selected">我被選中了</option><option>沒(méi)被選中</option></select> |
disabled | 設(shè)置input元素是否被禁用 |
<input type="text" disabled="disabled" value="我被禁用了"> <input type="text" disabled="disabled" value="我被禁用了"> |
大量拼接字符串
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除外)