第九周学习笔记

我爱拜仁慕尼黑

于 2021-06-30 01:30:24 发布

阅读量125

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46096384/article/details/118348301

版权

第九周学习笔记

- - 1.1json课堂实验
  - 1.2jQuery 设置内容 - text()、html() 以及 val()

1.1json课堂实验

html部分代码




<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>  $.ajax({	 
	                type: "GET",	 
	                url: "new_file.json",	
	                dataType: "json",	
	　　　　　　　　　success: function(result){	
	                    addBox(result);	 
	                }	 
	            });
				function addBox(result) {
									//result是Json对象的集合,通过JQuery的each方法进行遍历，为每个对象生成div元素
									$.each(result, function(index, obj) {
										//添加一个class为product的容器，放置产品信息
										$("#box").append("<div class='product'>" + 
										
											//获得图片地址
											"<div><img class='img' src='" + obj['url'] + "'></div>" +
											
											//获得名字
											"<div class='p1 p'>" + obj['name'] + "</div>" +
											
											//获得地址
											"<div class='p2 p'>" + obj['address'] + "</div>" +
				
											//获得作者
											"<div class='p3 p'>" + obj['author'] + "</div>" +
				
											"</div>");
									});
								}
</script>
		<title>JSON示例</title>
		<style type="text/css">
			.p {			
				display: inline-block;			
				float: left;			
				width: 50%;			
				font-family: Microsoft YaHei;			
			}
			
			.p1 {
				font-size: 14px;
				color: #000;
				margin-top: 16px;
			}

			.p2 {
				font-size: 12px;
				color: #b0b0b0;
			}

			.p3 {
				font-size: 14px;
				color: #ff5f19;
			}

			.product {
				width: 100%;
				position: relative;
				margin: 20px 0 5px 0;
				height: 100px;
				background: #fafafa;
			}

			.img {
				width: 100px;
				height: 100px;
				float: left;
				margin-right: 20px;
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			
		</div>
	</body>
</html>

json部分代码

[
  {
    "name":"桥",
    "address":"地址1",
    "author":"作者1",
    "url":"./img/1.jpg"
  },
 
  { 
    "name":"大海星",
    "address":"地址1",
    "author":"作者2",
    "url":"./img/2.jpg"
  },
 
  {
    "name":"海滨日落",
    "address":"地址1",
    "author":"作者3",
    "url":"./img/3.jpg"
  },
 
  {
    "name":"日出",
    "address":"地址1",
    "author":"作者4",
    "url":"./img/4.jpg"
  },
 
  {
    "name":"桂林山水甲天下",
    "address":"地址1",
    "author":"作者5",
    "url":"./img/5.jpg"
  },
 
  {
    "name":"花田中的木屋",
    "address":"地址1",
    "author":"作者6",
    "url":"./img/6.jpg"
  }
  	        

]

效果
在这里插入图片描述

1.2jQuery 设置内容 - text()、html() 以及 val()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("今日的气温是35℃");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>目前您所在道路通畅</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("交警正在赶来的路上");
  });
});
</script>
</head>

<body>
<p id="test1">亲爱的司机朋友</p>
<p id="test2">请保持清醒驾驶</p>
<p>状态: <input type="text" id="test3" value=" "></p>
<button id="btn1">查询天气</button>
<button id="btn2">查询路况</button>
<button id="btn3">紧急报警</button>
</body>
</html>

在这里插入图片描述

我爱拜仁慕尼黑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第九周学习笔记

第九周学习笔记1.1json课堂实验1.2jQuery 设置内容 - text()、html() 以及 val()1.1json课堂实验html部分代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&
复制链接

扫一扫