js：上移、下移、置顶、删除

<div class="main">
<p>
<span class="nav">我们是谁？程序员！</span>
<a href="#" class="up" javascript:;="">上移</a>
<a href="#" class="down">下移</a>
<a href="#" class="top">置顶</a>
<a href="#" class="bottom">置底</a>
<a href="#" class="delete">删除</a>
</p>
<p>
<span class="nav">我们要干什么？敲代码、敲代码！</span>
<a href="#" class="up" javascript:;="">上移</a>
<a href="#" class="down">下移</a>
<a href="#" class="top">置顶</a>
<a href="#" class="bottom">置底</a>
<a href="#" class="delete">删除</a>
</p>
<p>
<span class="nav">出了bug怎么办？是环境的错！</span>
<a href="#" class="up" javascript:;="">上移</a>
<a href="#" class="down">下移</a>
<a href="#" class="top">置顶</a>
<a href="#" class="bottom">置底</a>
<a href="#" class="delete">删除</a>
</p>
<p>
<span class="nav">我们要成为顶级的前端工程师!fighting!</span>
<a href="#" class="up" javascript:;="">上移</a>
<a href="#" class="down">下移</a>
<a href="#" class="top">置顶</a>
<a href="#" class="bottom">置底</a>
<a href="#" class="delete">删除</a>
</p>

</div>

 

$(function() {
//prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
//after() 方法在被选元素后插入指定的内容。
//fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。// fadeIn() 用于淡入已隐藏的元素。
//prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。
//before() 方法在被选元素前插入指定的内容。 语法：$(selector).before(content)

//上移
var $Up = $(".up");
$Up.click(function() {
var $oP = $(this).parents("p");
$oP.fadeOut().fadeIn();

$oP.prev().before($oP);
});

//下移
var $Down = $(".down");
$Down.click(function() {
var $oP = $(this).parents("p");
$oP.fadeOut().fadeIn();
$oP.next().after($oP);
})
//置顶
var $Top = $(".top");
$Top.click(function() {
var $oP = $(this).parents("p");
$oP.fadeOut().fadeIn();
$("div").prepend($oP);
});

//置底
var $Bottom = $(".bottom");
$Bottom.click(function() {
var $oP = $(this).parents("p");
$oP.fadeOut().fadeIn();
$("#main").append($oP);
})

//删除
var $Delete = $(".delete");
$Delete.click(function() {
var $oP = $(this).parents("p");
$oP.fadeOut().fadeIn();
$oP.remove();
});
});