cgb2103
/
day12.txt

一,jQuery练习
	--1,代码
		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>jquery练习</title>

				<!-- 先引入jquery的文件 -->
				<script src="js/jquery-1.8.3.min.js"></script>

				<!-- 再用jQuery语法,选择器.事件 -->
				<script >
					//文档就绪
					$(function(){
						//点击p,隐藏div
						$("#p1").click(function(){
							$("#div1").hide();	//hide()隐藏
						})
						//点击a2,获取a1的内容,再改内容
						$(".a2").click(function(){
							alert( $(".a1").text() );//获取指定元素的内容
							//设置指定元素的内容
							$(".a1").text("我变了...");
						})
						//点击a,隐藏p
						$("a").click(function(){
							$("#p1").hide();
						})
					});
				</script>
			</head>
			<body>
				<p id="p1">单击我弹1</p>
				<div id="div1">双击我弹2</div>
				<a href="#" class="a2">鼠标划走弹4</a>
				<a href="#" class="a1">鼠标进入弹3</a>
			</body>
		</html>
二,Json
	--1,概述
		是一种轻量级的技术,用来解决 浏览器和服务器之间的数据传输
		格式简单,体量小
	--2,语法
		"k":"v"
		{"k":"v","k":"v","k":"v"}
		[{"k":"v","k":"v","k":"v"} ,{"k":"v","k":"v","k":"v"} ]
	--3,练习
			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title>json语法</title>
					<!-- HTML嵌套js代码 -->
					<script>
						//json用来在浏览器和服务器之间做数据的传输,因为语法简洁,轻量级的
						function d1(){
							//定义json字符串:语法--- "k" : "v"
							var jsonstr = ' "name" : "张三"  ' ;  //简单的json串
							jsonstr = ' { "name" : "张三" , "age" : "20"  } ' ; //json对象
							jsonstr = [  //json数组
											  { "name" : "张三" , "age" : "20"  },
											  { "name" : "李四" , "age" : "10"  },
											  { "name" : "王五" , "age" : "30"  }
										 ] ;
							//给div处显示json字符串的数据
							var ele = document.getElementById("d1");
							// ele.innerHTML=jsonstr ;
							//把数组里[1]的对象,里的age属性值10获取到,,,,再赋值
							ele.innerHTML=jsonstr[1].age ;
						}
					</script>
				</head>
				<body>
					<div id="d1" onclick="d1();">点我</div>
				</body>
			</html>

	--4,转换工具
		使用js的内置对象JSON,进行 两种 json数据的转换
		把json字符串 转成 js对象  -- JSON.parse("json字符串")
		把js对象 转成 json字符串  -- JSON.stringify(js对象)
	--5,测试
			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title>JSON对象的使用</title>
					<script src="js/jquery-1.8.3.min.js"></script>

					<!-- 嵌入js代码  -->
					<script>
						function d1(){
							//定义json字符串
							var text = ' { "name":"熊大" , "age":"20"  } ' ;

							//1,,,把串转成js对象 -- 使用js的内置对象JSON
							var jsobj = JSON.parse(text);

							//console输出
							console.log(text);//json字符串
							console.log(jsobj);//js对象 -- 方便的  获取对象身上的属性值.函数
							console.log(text.name);//undefined
							console.log(jsobj.age); //"熊大"

							//2,,,把js对象 转成json串 -- 使用js的内置对象JSON
							var jsonstr = JSON.stringify(jsobj);
							console.log(jsonstr);//json字符串
							console.log(jsonstr.length);//获取 json字符串的长度
						}
					</script>
				</head>
				<body>
					<div id="d1" onclick="d1();">我是div1</div>
				</body>
			</html>

三,Ajax
	--1,概述
		ajax的Asynchronous Javascript And XML
		好处:异步访问(加快响应速度,不必等待)
				局部刷新(不必刷新整个网页,只是局部刷新)
	--2,测试
			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title>测试 ajax</title>

					<!-- 引用jQuery文件 -->
					<script src="js/jquery-1.8.3.min.js"></script>

			<!-- ajax的好处: 异步访问(加快响应速度,不必等待),局部刷新(不必刷新整个网页,只是局部刷新) -->
					<script>
						$(function(){//文档就绪事件
							/* 使用jQuery提供的Ajax技术,需要指定一些参数 */
							$.ajax({//发起ajax的请求--准备参数
			//访问https://p.3.cn/prices/mgets?skuIds=J_100003717483
								type: "POST" ,  //请求方式
								url: "https://p.3.cn/prices/mgets" ,    //请求地址
								contentType: "application/json;charset=utf-8",   //请求的数据的类型
								data:  //请求时带的参数
								{
									 "skuIds": "J_100003717483"
								},
								dataType: "jsonp" ,  //期望服务器返回来的数据的类型
			//返回数据:[{"p":"-1.00","op":"2499.00","cbf":"0","id":"J_100003717483","m":"10000.00"}]
								success: function(data){ //请求成功,会返回数据封装在data里
									// document.getElementById("d1").innerHTML=data[0].id; //js
									$("#d1").text(data[0].id); //jquery
									document.getElementById("d2").innerHTML=data[0].op;
									document.getElementById("d3").innerHTML=data[0].p;
								},
								error: function(data){  //请求失败,给失败提示
									alert(" 请求错误! ");
								}
							})
						} );
					</script>
				</head>
				<body>
					<div id="d1"></div>
					<div id="d2"></div>
					<div id="d3"></div>

					<img src="images/1.jpg" />
					<img src="images/a.png" />

				</body>
			</html>


四,Maven
	--1,概述
		是项目构建的工具.
		以前是需要手动管理jar包(下载/安装/编译)
	--2,涉及的概念
			中央仓库:就是一个国外的网址,存了大量的jar包
			镜像仓库:国内的网址,人家从中央仓库下载了所有jar包(阿里/网易/华为...)
			本地仓库:从镜像仓库down的jar包,存到本地的磁盘中(可以自己指定)
			依赖:每个核心jar包形成一个依赖，maven底层进行它相关的jar的自动导入
			坐标:jar包的真实路径(层层的文件夹)，groupId-artifactId-version
			命令:maven提供了特殊的命令,但是很少用,被IDEA整合了
	--3,maven的使用
		--直接解压就能
		--找到settings.xml,添加镜像仓库和本地仓库的配置:
			--maven解压好的位置--conf--settings.xml--用记事本打开
			--镜像仓库:在 <mirrors>标签里面,添加 <mirror>
					<!--阿里私服地址-->
					<mirror>
						<id>ali</id>
						<name>ali Maven</name>
						<mirrorOf>*</mirrorOf>
						<url>https://maven.aliyun.com/repository/public/</url>
					</mirror>
			--本地仓库:修改settings.xml第54行配置:
				<localRepository>D:\Java\maven\resp</localRepository>
	--4,IDEA 里配置 maven
		--File-Settings-maven-配置三处(解压位置/settings.xml/本地仓库)-ok
	--5,IDEA创建 maven工程
		--File-New-Project-选Maven-next-输入工程名/groupId-Finish
		--配置maven管理工程
			--File-Settings-maven-配置三处(解压位置/settings.xml/本地仓库)-ok
		--双击打开pom.xml文件,不报错就行了.
			如果报错,打开右侧的Maven视图-点击刷新就行了maven会再去下载jar包

扩展:
	--熟练的配置maven,并创建maven项目
	--安装NodeJS,参考笔记1.31
	--maven:用来统一管理jar包
		--步骤:
			--创建maven工程
				File-New-Project-选中Maven-next-起个名字(展开填GroupId--cn.tedu)-Finish
			--在idea里配置maven
				File-Settings-Build, Execution, Deployment-Build Tools-Maven-设置Maven Home Directory(浏览maven解压后的位置)-ok