码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript-practice2019-0603

时间:2019-06-03 12:35:16      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:har   标签   UNC   value   index   length   idt   head   oct   

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

3.

 

javaScript-practice2019-0603

标签:har   标签   UNC   value   index   length   idt   head   oct   

原文地址:https://www.cnblogs.com/chengxiaofeng/p/10966511.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!