DOM (二)

2017-02-03  本文已影响0人  believedream

第八天

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;
  };
}

自定义属性

元素对象的自定义属性

标签的自定义属性

元素对象&&标签

上一篇 下一篇

猜你喜欢

热点阅读