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>
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>
3.