本次课程主要学习到了如果用jQuery操作网页的dom.处理事件的一些逻辑方式。
另外还学习到了一些jQuery函数.
split()分割数据 参数为字串符传入需要分割的分隔符。
parent()获取父元素
before() 插入之前
after() 插入之后
prev(0前一个
next()后一个
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap{
width: 350px;
border: 1px solid grey;
box-shadow: 2px 2px 2px grey;
padding-left: 10px;
overflow: hidden;
}
.main ul{margin: 0;padding: 0;list-style: none;}
.main ul li{float: left;width: 150px;height: 200px;text-align: center;margin: 5px;}
.main ul li img{width: 150px;}
.main button{border: none;background: #3487ff;}
.main button:hover{background: black;color: white;cursor: pointer;}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">
<h2 style="text-align: center">私人相册</h2>
<p>
<label for="img_url">请选择本地图片</label>
<input type="file" name="img_url" id="img_url" placeholder="图片地址">
</p>
<p>
<label><span>选择显示方式</span></label>
<input type="radio" name="normal" value="0" id="normal" checked><label for="normal">正常</label>
<input type="radio" name="normal" value="10%" id="fillet"><label for="fillet">圆角</label>
<input type="radio" name="normal" value="50%" id="round"><label for="round">正圆</label>
</p>
<p>
<label for="shadow">选择阴影</label>
<select name="shadow" id="shadow">
<option value="0" selected>不显示阴影</option>
<option value="1">显示阴影</option>
</select>
</p>
<p>
<button class="add">添加图片</button>
</p>
</div>
<div class="main">
<ul>
</ul>
</div>
</div>
<script src="jquery-3.4.0.js"></script>
<script>
$(function () {
$('.add').on('click',function () {
// 第一步获取图片地址
var img_url = $('#img_url').val();
console.log(img_url);
if (img_url.length === 0){
alert('请选择图片');
$('#img_url').focus();
return false;
}
// 把图片地址分割取实际地址
var imges = img_url.split('\\')[2];
console.log(imges);
var imgurl = 'http://html.io/0521/static/images/'+imges;
console.log(imgurl);
// 获取显示方式数据
var radius = $('input[type="radio"]:checked').val();
console.log(radius)
// 获取阴影
var shadow = 'none';
if ($(':selected').val()==='1'){
shadow = '2px 2px 2px #888';
};
// 创建图片
var img = $('<img>').attr({src:imgurl,alt:'明星图片'}).css({borderRadius:radius,boxShadow:shadow});
// 创建按钮
var before = $('<button></button>').text('前移');
var after = $('<button></button>').text('后移');
var remove = $('<button></button>').text('删除');
// 创建li
var list = $('<li>');
// 在li里面添加数据
list.append(img,before,after,remove);
// 把数据添加到ul
$('.main ul').append(list);
// 三个按钮的事件触发
before.on('click',function () {
// 获取父元素
var curren = $(this).parent();
console.log(curren);
// 在父元素上获取父元素的前一个元素
var pev = curren.prev();
// 在父元素的前一个元素位置插入本层li
pev.before(curren);
});
after.on('click',function () {
// 获取父元素
var curren = $(this).parent();
console.log(curren);
// 在父元素上获取父元素的后一个元素
var pev = curren.next();
// 在父元素的后一个元素位置插入本层li
pev.after(curren);
})
remove.on('click',function () {
if (confirm('确定删除吗?')){
$(this).parent().remove();
}
})
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例