JSON的应用，动态创建页面元素（案例详解）

使用json对象进行页面的动态渲染

实现功能：
1、动态创建页面内容
2、当鼠标移入时改变该事件源的样式

效果展示

<body>
		<ul id="u">
			<!--<li><img src="a.jpg"/><p>小米</p></li>-->
		</ul>
	</body>

//js

<script>
	//创建一个对象，里面存放li 数据， 将每一组的信息作为一个数组中的元素
	var jsonObj = {
		"info":[
			{"src" : "a.jpg", "name" : "小米"}，
			{"src" : "a.jpg", "name" : "大米"}，
			{"src" : "a.jpg", "name" : "高粱米"}，
		]
	}
	//定义一个空的字符串用于存放每组数据
	var  str = ""
	//遍历json对象
	for ( var i = 0 ; i < jsonObj.info.length ; i++){
		str +=`
			<li><img src = "${jsonObj.info[i].src}"/><p>"${jsonObj.info[i].name}"</p></li>
			`
			//var pro = jsonObj.info[i];
			str += `<li><img src = "${pro.src}"/><p>"${pro.name}"</p></li>`
			//字符串模板`${识别变量}`字符串出现的地方都可以使用字符串模板
	}
		//将拼接好的字符串放到ul当中
		u.innerHTML = str;
		//设置鼠标划入事件
		u.onmouseover = function(e){
			//解决浏览器兼容问题
			var e = e || event;
			//获得触发事件的元素
			var target = e.target || e.srcElement
			//DOM 对象属性，用于获取DOM对象的标签名，取出来都是大写的，或者用toLowerCase()把tagName转化
			if（target.tagName == "IMG"）{
				target.style.border = "1px solid red";
				//nextElementSibling 属性返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）
				target.nextElementSibling.style.background = "pink";
				
			}
		}
		//设置鼠标划出事件
		u.onmouseout =function (e){
			var e = e || event;
			var target = e.ttarget || e.srcElement;
			if( target.tagName == "IMG"){
				target.style.border = "";
				target.nextElementSibling.style.background = "";
				}
			}
</script>

JSON的应用，动态创建页面元素（案例详解）

使用json对象进行页面的动态渲染

猜你喜欢