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

曾经终败给现在 2021-12-24 08:25 235阅读 0赞

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

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

**效果展示**  
![效果展示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]

<body>
    		<ul id="u">
    			
    		</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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20211223/b73c0cb338374c3297dff29562afbe51.png

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java反射机制应用案例：动态创建类和方法

Java的反射机制允许我们在运行时检查、修改甚至创建对象。以下是一个关于如何使用反射动态创建类和方法的简单示例： 1. 创建一个接口，例如`DynamicClassInter

爱被打了一巴掌/ 2024年09月16日 01:39/ 0 赞/ 22 阅读

相关 Java动态代理及其应用案例

目录 Java动态代理的原理 Java动态代理的应用案例 AOP编程 RPC框架单元测试总结 -------------------- Java动态代理是J

迈不过友情╰/ 2024年03月24日 10:14/ 0 赞/ 45 阅读

相关动态创建iframe页面内容

版本一：通过文本域内容创建iframe页面 <!DOCTYPE html> <html> <head> <title>创建ifra

骑猪看日落/ 2023年07月25日 08:51/ 0 赞/ 113 阅读

相关 vue多页面应用的动态配置

vue结合webpack构建多页面应用时，若一个个页面配置显然过于繁琐。这里我们以示例介绍下多页面应用如何实现动态配置。一：src目录下建pages文件夹，将所有页面放在

向右看齐/ 2023年03月13日 06:43/ 0 赞/ 236 阅读

相关根据json 动态生成页面——问卷页面

后台向前端传递的json串 { "groups":[ { "group":[

待我称王封你为后i/ 2023年01月01日 04:54/ 0 赞/ 117 阅读

相关 JavaScript经典案例：页面元素拖拽

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

小鱼儿/ 2022年12月23日 11:14/ 0 赞/ 162 阅读

相关 html超链接href设置技巧和动态创建页面元素技巧

1. 如果<a />的href不能设置连接时可以如下处理 <a href="javascript:;" οnclick="clickFn()" >click here</a

Bertha 。/ 2022年09月30日 06:57/ 0 赞/ 197 阅读

相关 Jquery获取页面的动态元素

今天为了获取EasyUI的动态数据块疯了，终于在网上找到了答案。Jquery的各个版本间存在很大的差异，所以在使用的时候，一定要搞清楚那些方法已经被淘汰了。 jquery

川长思鸟来/ 2022年08月20日 12:24/ 0 赞/ 164 阅读

相关 js动态创建/删除（页面）元素节点、设置其属性方法

在项目过程中，多数情况下，一个页面是满足不了要求的，这时就需要多个页面相互切换，进行交互，js可以动态的创建一个页面，在不需要的时候删除。方法如下：创建方法：crea

冷不防/ 2022年06月04日 08:05/ 0 赞/ 168 阅读

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

使用json对象进行页面的动态渲染实现功能： 1、动态创建页面内容 2、当鼠标移入时改变该事件源的样式效果展示 ![效果展示][watermark_ty

曾经终败给现在/ 2021年12月24日 08:25/ 0 赞/ 236 阅读