Collection
Collection
内容：
在线相册管理器（jQuery的DOM节点操作）
在线查询系统（Ajax+JSON）
相册管理
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>相册管理</title>
<style>
body{
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514521014&di=aea58d49590e603363c32e33d7c5f582&imgtype=jpg&er=1&src=http%3A%2F%2F2f.zol-img.com.cn%2Fproduct%2F140%2F651%2FceXf4a0nF1oyU.jpg");
background-repeat: no-repeat;
background-size:cover
}
/*设置相册样式*/
#album{
margin: 80px auto;
width: 1220px;
height: 800px;
border: 1px solid black;
background-image: url("http://img05.tooopen.com/images/20150623/tooopen_sy_131623443114.jpg");
background-repeat: no-repeat;
background-size:cover;
box-shadow: 10px 10px 5px black;
border-radius: 10px;
/*border-bottom: transparent;*/
}
/*设置标题样式*/
h2{
color:skyblue;
text-indent:40px;
height: 40px;
margin: auto 0px;
border-bottom: solid 1px whitesmoke;
line-height: 40px;
}
/*设置相册输入表样式*/
#select{
height: 80px;
width: 1220px;
border-bottom: solid 1px whitesmoke;
margin: 0;
}
p{
margin: 15px 20px;
color:skyblue;
}
/*设置相册内容样式*/
#box{
width: 1220px;
height: 600px;
/*border: 1px solid black;*/
}
.imgbox{
float: left;
margin: 10px 10px;
background-color:burlywood;
border:1px solid black;
}
/*设置相片按钮样式*/
.btnbox{
height: 25px;
margin: 0;
/*background-color:wheat;*/
padding-left: 5px;
}
</style>
</head>
<body>
<!--相册-->
<div id="album">
<h2>我的相册</h2> <!--标题-->
<div id="select"> <!--添加相片表单-->
<p>照片地址：<input name="url" type="text"><button id="add" style="margin: auto 10px ">添加</button></p>
<p>边框类型：
<input type="radio"id="zj" name="biankuang" value="0" checked><laber for="zj">直角</laber>
<input type="radio"id="yj" name="biankuang" value="20"><laber for="yj">圆角</laber>
<input type="radio"id="yx" name="biankuang" value="50"><laber for="yx">圆形</laber>
</p>
</div>
<div id="box"> <!--预留相片存放盒子-->
</div>
</div>
<script>
$('#add').on('click',function () {
var imgUrl=$('#select input[name="url"]').val() //获取图片地址
var biankuang=$('#select input[name="biankuang"]:checked').val() //获取边框样式
var img=$('<img>').attr('src',imgUrl).width(150).height(150) //设置图片地址已经宽度
img.css('borderRadius',biankuang+'%') //设置边框样式
var imgBox=$('<div></div>').append(img) //创建图片div容器
var moveUp=$('<button style="margin:0 2px">前移</button>') //创建前移按钮
var moveDown=$('<button style="margin:0 2px">后移</button>') //创建后移按钮
var remove=$('<button style="margin:0 2px">删除</button>') //创建删除按钮
moveUp.on('click',function () { //添加前移点击事件
imgBox.prev().before(imgBox)
})
moveDown.on('click',function () { //添加后移点击事件
imgBox.next().after(imgBox)
})
remove.on('click',function () { //添加删除点击事件
imgBox.remove()
})
var btnbox=$('<div></div>') //创建按钮盒子
btnbox.append(moveUp,moveDown,remove) //添加按钮到按钮盒子中
imgBox.append(img,btnbox) //添加按钮盒子到图片盒子中
$('#box').append(imgBox) //添加图片盒子到页面中
})
</script>
</body>
</html>在线查询系统 test.json文件在最下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>在线查询系统</title>
<style>
body{
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513941729702&di=a9aab5d6c7c3c7fa804e3e5ae23798e3&imgtype=0&src=http%3A%2F%2Fpic1a.nipic.com%2F2008-12-18%2F2008121823464396_2.gif");
background-size: cover;
background-repeat: no-repeat;
}
.box{
width: 300px;
height: 200px;
background-color:lightgreen;
border-radius: 10px;
margin: 80px auto;
border: 1px solid black;
text-align: center;
}
.bule{
border-radius: 5px;
height: 20px;
/*background-color: deepskyblue;*/
}
.withe{
background-color: white;
}
#info{
margin: 0 auto;
width: 480px;
background-color: lightgreen;
border-radius: 10px;
}
</style>
</head>
<body>
<!--成绩查询框-->
<div class="box">
<div class="bule"></div> <!--框头-->
<div class="withe"> <!-- 内容框获取用户信息-->
<p>成绩查询系统</p>
<p><input type="text" id="name" placeholder="请输入学生姓名"></p>
<p><input type="text" id="id" placeholder="请输入学生学号"></p>
<button class="json">查询</button>
<button class="remove">清空</button>
</div>
<div class="bule"></div><!-- 框脚-->
</div>
<div id="info"></div> <!--占位查询结果输出盒子-->
<script>
$('.json').on('click',function () { //添加查询按钮点击事件通过数据json库获取
$.ajax({
type:'GET',
url:'test.json',
data:null,
dataType:'json',
success:function (data,status) {
// alert(data)
if ($('#name').val()||$('#id').val()) {//判断是否有获取到用户输入信息
var flag=null //生成标记变量flag用于判断是否找到所需要的信息，null表示没有
$.each(data, function (key, value) {
// alert(value.id)
// alert($('#name').val())
// alert($('#id').val())
//将数据进行表格化
var info = '<tr>' + '<td>' + value.id + '</td>' + '<td>' + value.name + '</td>' + '<td>' + value.sex + '</td>' + '<td>' + value.chinese + '</td>' + '<td>' + value.english + '</td>' + '<td>' + value.math + '</td>' + '</tr>'
//创建表格容器
var table = $('<table cellspacing="0" border="1px"><tr>' +
' <th>学号</th>' +
' <th>姓名</th>' +
' <th>性别</th>' +
' <th>语文</th>' +
' <th>英语</th>' +
' <th>数学</th>' +
'</tr></table>')
table.width(480).css('text-align', 'center')//表格内容居中
table.append(info) //将数据表格化并储存在table变量里面
if ($('#name').val()) { //验证姓名
if ($('#name').val() == value.name) //找到姓名符合信息
{
flag=1
return $('#info').append(table) //将符合信息输出
}
}
else { //验证学号
if ($('#id').val() == value.id)
{
flag=1
return $('#info').append(table)
}
}
})
if (flag==null) alert('姓名或学号不正确')
}
else {
alert('请输入姓名或学号')
}
}
})
})
$('.remove').on('click',function () { //设置清空按钮
$('#info').children().remove()
}
)
</script>
</body>
</html>test.json文件
{
"1": {
"id": "1",
"name": "小红",
"sex": "女",
"chinese": "82",
"english": "81",
"math": "80"
}
,
"2": {
"id": "2",
"name": "小李",
"sex": "男",
"chinese": "79",
"english": "78",
"math": "77"
},
"3": {
"id": "3",
"name": "啊花",
"sex": "女",
"chinese": "80",
"english": "100",
"math": "100"
}
}