js易错点及经典案例

最新推荐文章于 2024-01-27 21:03:55 发布

weixin_45925177

最新推荐文章于 2024-01-27 21:03:55 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/weixin_45925177/article/details/108035100

版权

一，易错点

0 == null // false
判断变量是否被声明过
通过if判断:

if(abcaa11112)//error
{
  console.log(abcaa11112);
}else{
    console.log('没有被声明过');
}

运行结果:报错
在这里插入图片描述

总结:通过if判断不保险.

正确的做法是通过typeof 来判断

console.log(typeof abcaa11112);//ok

运行结果:undefined

当然也可以通过下面的方式来判断:

if(window.abcaa11112)//ok
{
  console.log(window.abcaa11112);
}else{
    console.log('没有被声明过');
}

注意:在变量前增加了”window.”

在这里插入图片描述
输出结果：undefined 123 rxm

二，经典案例

创建一个页面，有两个下拉选择框
在第一个下拉框里面有一个事件：改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
- onchange 事件会在域的内容改变时发生。
  onchange 事件也可用于单选框与复选框改变后触发的事件。
  这里是下拉选项发生变化触发的事件
创建一个二维数组，存储数据
- 每个数组中第一个元素是省名称，后面的元素是省里面的城市

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			select{
				width:100px;
			}
		</style>	
	</head>
	<body>
		省：
		<select id="province" οnchange="selectcity()">
			<option value="">请选择省份</option>
			<option value="0">陕西省</option>
			<option value="1">山东省</option>
			<option value="2">河南省</option>
			<option value="3">山西省</option>	
		</select>
		市：
		<select id="city">
			<option value="">请选择市</option>
		</select>
	</body>
	<script type="text/javascript">
		var arrs = [];
		arrs[0] = ["西安","咸阳","铜川","渭南","宝鸡"];
		arrs[1] = ["济南","临沂","青岛","威海"];
		arrs[2] = ["洛阳","郑州","开封","周口"];
		arrs[3] = ["太原","大同","运城","忻州"];
		
		function selectcity(){
			var province = document.getElementById('province').value;
			var city = document.getElementById("city");	
			var citys = arrs[province];
			
			//清空原来的信息
			//获取市的option属性
			var city_opts = city.getElementsByTagName("option");
			
			//遍历删除市中的option		
			for(var i= city_opts.length - 1; i >= 1; i--){
				var city_opt = city_opts[i];
				city.removeChild(city_opt);
			}
			
			
			for(var i = 0; i < citys.length; i++){
				var textNode = document.createTextNode(citys[i]);
				var opt = document.createElement("option");
				opt.appendChild(textNode);
				city.appendChild(opt);
			}
		}
	</script>
</html>

呈现效果：
在这里插入图片描述

weixin_45925177

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js易错点及经典案例

一，易错点0 == null // false判断变量是否被声明过通过if判断:if(abcaa11112)//error{ console.log(abcaa11112);}else{ console.log('没有被声明过');}运行结果:报错总结:通过if判断不保险.正确的做法是通过typeof 来判断console.log(typeof abcaa11112);//ok运行结果:undefined当然也可以通过下面的方式来判断:if(windo
复制链接

扫一扫