javaScript-practice2019-0603

1.搜索框示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <!--onfocus        元素获得焦点。               // 练习：输入框-->
    <!--onblur         元素失去焦点。 -->
    <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">
<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="请输入关键字"){
        inputEle.value="";
    }
}

function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){            //去掉元素两端的空格
        inputEle.value="请输入关键字";
    }
}
</script>
</body>
</html>

View Code

2. 城市联动

1.定义data数据
2.通过ID获取标签
3.定义onchange()函数，先获取省名，再得到市名

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select联动</title>
</head>
<body>
<select id="province">
  <option>请选择省:</option>
</select>

<select id="city">
  <option>请选择市:</option>
</select>

<script>
  data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    var p = document.getElementById("province");  //1.通过ID获取标签
    var c = document.getElementById("city");
  
  for (var i in data) {
    var optionP = document.createElement("option");     //a 创建节点，通过标签名创建节点
    optionP.innerHTML = i;      //b XX.innerHTML 获取文本节点的值：
    p.appendChild(optionP);     //c 将optionP的值追加一个子节点（作为最后的子节点）
  }

  p.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML; //a 选择不同的省份
    var citys = data[pro];                  //b  通过省份，获取市名
    c.innerHTML = "";               //c 清空option，下面的for循环添加城市内容

    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>

View Code