第八天
03-对象模型-第02天{表单属性、属性操作}
表单属性
| 表单属性 | 作用 | 示例 |
|---|---|---|
| type | 设置input元素的类型 |
<input type="text"><input type="text"> |
| value | 设置input元素的值 |
<input type="text" value="123"><input type="text" value="123"> |
| checked | 设置input选择框是否选中 |
<input type="radio" checked="checked"><input type="radio" checked="checked"> |
| selected | 设置下拉列表select中的option是否被选中 |
<select><option selected="selected">我被选中了</option><option>没被选中</option></select><select><option selected="selected">我被选中了</option><option>没被选中</option></select> |
| disabled | 设置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;
}
//大量拼接字符串很消耗性能
//大量拼接字符串用数组
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可以把数组中的字符串拼接
//如果不传参 默认按照 , 拼接
};
仿京东搜索框
var txt = document.getElementById("txt");
//文本框获取焦点事件 onfocus
txt.onfocus = function () {
//txt.value = "";
//如果用户没有输入 才清空
if (this.value === "这是什么👻❓") {
this.value = "";
}
};
//文本框失去焦点 onblur
txt.onblur = function () {
//如果用户没有输入了文字 失去焦点后 才把默认文字加上
if (this.value === "") {
this.value = "这是什么👻❓";
}
};
排他思想
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<script>
//点击当前按钮 只让当前按钮亮起来
var inputs = document.getElementsByTagName("input");
//给每一个都绑定事件
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function () {
//让当前按钮亮起来
//this.className = "highlight";
//排他思想:干掉所有人留下我自己
//干掉所有人 让所有人的类名是空
for (var i = 0; i < inputs.length; i++) {
inputs[i].className = "";
}
//留下我自己 让当前这个的类名变为highlight
this.className = "current";
};
}
</script>
全选反选
var all = document.getElementById("j_cbAll");
var tbody = document.getElementById("j_tb");
var checkboxes = tbody.getElementsByTagName("input");//下面的单选框
//点击all 让下面的的选中状态和all一致
all.onclick = function () {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = all.checked;
}
};
//让下面的影响上面
//点击每一个都判断 如果每一个都选中了 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;
};
}
自定义属性
元素对象的自定义属性
-
可以像给对象定义属性一样,直接以点语法设置属性
<div id="box"></div> var box = document.getElementById("box");// 获取元素对象 box.aaa = "bbb";// 设置属性 -
可以设置该元素对应的标签所拥有的属性,也可以设置没有的属性
<div id="box"></div> var box = document.getElementById("box");// 获取元素对象 box.id = "cl";// div有id这个属性 box.abc = “aaa”; // div没有abc这个属性,但是也可以设置成功
标签的自定义属性
-
设置标签属性:
setAttribute()<div id="box"></div> var box = document.getElementById("box"); box.setAttribute("id","aaa");// 有规定的属性可以设置 box.setAttribute("bbb","ccc");// 没有规定的属性也可以设置 -
获取标签属性
<div id="box"></div> var box = document.getElementById("box"); box.getAttribute("id");// 有规定的可以获取 box.getAttribute("aaa"); // 没有规定的也可以获取 -
移除标签属性
<div id="box"></div> var box = document.getElementById("box"); box.removeAttribute("id"); // 有规定的可以删除 box.removeAttribute("aaa"); // 没有规定的也可以删除
元素对象&&标签
- 给元素对象设置自定义属性,无法映射到对应的标签上
- 给标签设置自定义属性
- 有规定的可以映射到元素对象上
- 没有规定的无法映射到元素对象上
- ie6/7/8都可以从元素对象上获取(特殊)
- 标签和对象的自定义属性 不会相互影响(IE678除外)
网友评论