jq中append()、prepend()、after()、before()的区别详解

1、append() - 在被选元素的结尾插入内容（内容的结尾，比如说有个a标签，则是在</a>这个标签之前添加东西）

2、prepend() - 在被选元素的开头插入内容（内容的开始，比如说有个a标签，则是在<a>这个标签之后添加东西）

3、after() - 在被选元素之后插入内容（元素的结尾，比如说有个a标签，则是在</a>这个标签之后添加东西）

4、before() - 在被选元素之前插入内容（内容的开始，比如说有个a标签，则是在<a>这个标签之前添加东西）

所以我们经常用的表格元素的添加，一般用apend 和prepend ，因为是在</table>标签之前。

比如 btn1 和btn3两个按钮，两个表格，未上传 nouploaded和已上传uploaded。 未上传表中选中，一行或者几行，按btn1，那么将这几行数据移动到已上传的表中。

在已上传的表中，选中一行或者几行，按btn3，几行数据移动到未上传的表中。

$(document).ready(function(){

$("#btn1").on("click",function(){

$('#nouploaded tbody :checked').parents('tr').appendTo('#uploaded');
$("input[type=checkbox]").each(function(){ //循环checkbox选择或取消
$(this).prop("checked",false);
})
$("#nouploaded tbody :checked").parents('tr').remove();
})
$("#btn3").on("click",function(){
$('#uploaded tbody :checked').parents('tr').appendTo('#nouploaded');
$("input[type=checkbox]").each(function(){ //循环checkbox选择或取消
$(this).prop("checked",false);
})
$("#uploaded tbody :checked").parents('tr').remove();

})

})

$(function(){

/**
* 鼠标移到的颜色
*/
$("table tr").mouseover(function(){
$(this).find("td").addClass("mouse_color");
});

/**
* 鼠标移出的颜色
*/
$("table tr").mouseout(function(){
$(this).find("td").removeClass("mouse_color");
});

//点击一行加色选中checkbox
$("tbody tr").click(function() {
var hasSelected = $(this).hasClass("blue");
$(this)[hasSelected ? "removeClass" : "addClass"]("blue").find(":checkbox").prop("checked", !hasSelected);

})
})

function selectAll1(){
var isCheck=$("#sel_1").is(':checked'); //获得全选复选框是否选中

$("#nouploaded input[type='checkbox']").each(function() {
this.checked = isCheck; //循环赋值给每个复选框是否选中
if(isCheck==true){
$(this).parent().parent().addClass('blue');
}else{
$(this).parent().parent().removeClass('blue');
}

});

}
function selectAll2(){

var isCheck=$("#sel_2").is(':checked'); //获得全选复选框是否选中
$("#uploaded input[type='checkbox']").each(function() {
this.checked = isCheck; //循环赋值给每个复选框是否选中
if(isCheck==true){
$(this).parents('tr').addClass('blue');
}else{
$(this).parents('tr').removeClass('blue');
}

});
}