一,jQuery练习
–1,代码
<!-- 先引入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,练习
--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,测试
<!-- 引用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–用记事本打开
–镜像仓库:在 标签里面,添加
ali
ali Maven
*
https://maven.aliyun.com/repository/public/
–本地仓库:修改settings.xml第54行配置:
D:\Java\maven\resp
–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
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
