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

曾经终败给现在 2021-12-24 08:25 249阅读 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 条评论，249人围观）

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

相关阅读

相关 Java动态代理详解：应用场景与问题案例

Java动态代理是一种强大的工具，用于在运行时创建对象或修改已有行为。以下是动态代理的详细解释，包括应用场景和常见问题。 1. **什么是动态代理？** 动态代理是Ja

忘是亡心i/ 2024年10月22日 00:27/ 0 赞/ 51 阅读

相关 JSP页面动态生成元素的常见问题

在使用JSP（JavaServer Pages）页面动态生成元素时，可能会遇到一些常见的问题。以下是这些问题及解决方案： 1. **语法错误**： - 解决：确保使用的

客官°小女子只卖身不卖艺/ 2024年10月17日 02:15/ 0 赞/ 43 阅读

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

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

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

相关动态创建iframe页面内容

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

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

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

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

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

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

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

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

相关动态创建html页面,如何动态创建html页面？

这是从该链接：注：jQuery开发团队已经决定不采取这个插件过去的测试版。它不再被积极开发或维护。文档暂时保留(仅供参考)，直到准备好合适的替换模板插件。我不能写

傷城~/ 2022年10月06日 04:56/ 0 赞/ 36 阅读

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

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

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

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

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

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

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

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

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