![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
批改状态：合格
老师批语：
收藏
收藏
收藏
在jQuery的dom操作中，append（）这个方法可以支持多个参数，也就是可以在父级一次添加多个元素，next（）可以定位下一个节点，而after（）是插入操作，需要区分二者，类似的还有before（）和prev（）。
在线相册的思路：
获取图片的相关信息，在阴影那里可以使用0、 1进行判断赋值。
$('<img>')创建图片元素和按钮并赋值给变量，同时给图片添加属性，.width() .css()
把图片和按钮 添加到ul中，使用append（）全部添加。
给按钮添加点击事件，要定位到父级li，再用next（）或prev（）定位到附近li，用before（）或after（）进行插入。
案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线相册管理</title>
<style>
.box{
border: 4px double green;
width: 360px;
height: auto;
background-color: #efefef;
color: #636363;
border-radius: 2%;
}
.box .header{padding:15px}
h3{text-align: center}
.add{
width:100px;
height: 30px;
border: none;
cursor: pointer;
background-color: coral;
}
.add:hover{
font-size: 1.1rem;
background-color: skyblue;
}
.main ul{
overflow: hidden;
padding: 0;
margin: 0;
}
ul li{
float: left;
width: 150px;
list-style-type: none;
height: 200px;
margin-left: 20px;
margin-bottom: 10px;
text-align: center;
}
li button{
background-color: orange;
color: white;
border:none ;
cursor: pointer;
margin-left: 5px;
}
button:hover{
background: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="header">
<h3>江湖女侠排行榜</h3>
<label for="file">输入图片地址：</label>
<input type="file" id="file">
<!--<input type="text" id="file">-->
<p>
图片类型：
<input type="radio" name="border" id="rect" value="0" checked>直角
<input type="radio" name="border" id="radius" value="10%">圆角
<input type="radio" name="border" id="circle" value="50%">圆形
</p>
<p>
是否添加阴影：
<select name="shadow" id="">
<option value="1">添加</option>
<option value="0">不添加</option>
</select>
</p>
<p><button class="add">添加图片</button></p>
</div>
<div class="main">
<ul>
<!--<li>-->
<!--<img src="" alt="">-->
<!--<button>前</button>-->
<!--<button>后</button>-->
<!--<button>删</button>-->
<!--</li>-->
</ul>
</div>
</div>
<script src="../lib/jquery.js"></script>
<script>
//添加点击事件
$(function(){
$('.add').on('click',function () {
//1.获取图片的信息
let img_url = $('#file').val();
console.log(img_url);
//判断用户是否选择图片
if (img_url.length === 0){
alert('请选择图片');
$('#file').focus();//获取焦点
return false;
}
let border = $(':radio:checked').val();
//是否添加阴影
let shadow = $(':selected').val();
if (shadow == 1){
shadow = '3px 3px 3px #666';
}else {
shadow = 'none';
}
//拼接图片地址 split(分隔符) 返回数组
img_url = 'http://myphp.com/jquery/9.18/images/'+img_url.split('\\')[2];
//创建一个图片
let img = $('<img>')
.attr('src',img_url)
.width('150px')
.height('150px')
.css({
'border-radius': border,
'box-shadow': shadow
});
//创建三个按钮
let before = $('<button></button>').text('前移');
let after = $('<button></button>').text('后移');
let remove = $('<button></button>').text('删除');
//在li中添加图片和三个按钮
let container = $('<li>');
container.append(img, before, after, remove);//append（）支持多个参数
container.appendTo('ul');//把li添加到ul
//按钮添加事件
before.click(function () {
//获取到要移动的图片 父级li
let content = $(this).parent();
let prev = content.prev();//获取到前面的元素
prev.before(content);
});
//后移
after.click(function(){
let content = $(this).parent();
let next = content.next();//next()才是下一个 after（）是插入
next.after(content);
});
//删除
remove.click(function(){
if (confirm('确认删除')) {
let content = $(this).parent();
content.remove();
}
return false;
});
})
}
)
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：jquery的事件容易和js的原生事件混淆，js的事件有on且事件是作为一个对象的属性，而jquery的事件没有on，是作为对象的方法，或者用on（事件名，function）。jquery的选择器和方法需要更熟练，思路还需要磨炼。
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
