最近做了一个项目，包括了一个列表页，为了用户体验，操作均使用射流研究…实现，其中包括在列表中实现上移，下移，删除等功能，前台JS，后端数据修改使用AJAX，本文主要说一下前台射流研究…这块

先看一下页面的截图

看一下它的超文本标记语言结构，当然，这与前台切图有关，后端程序人员只负责写自己的射流研究…这块，我以我们项目为例，看一下它们切的超文本标记语言

ul class=' clear fix ' Li class='课程列表' div class=' titDefault clear fix ' div class=' left clear fix ' span class=' DragBtn '/span span class=' tit '内容em class=' ContinDex ' 1/em:/span em title=' 2013年加班. txt' class='titDefaultName'2013年加班。txt/em/div div class=' mid ' 2014/9/24 9:54:00/div class=' right clear fix ' a value=' 253040 ' class=' moveuptn ' href=' JavaScript :span class='delTit '上移/span/aa value=' 253040 ' class=' moveDownBtn ' href=' JavaScript :span class='delTit '下移/span/aa value=' 253040 ' class=' deleteBtn ' href=' JavaScript :span class='delTit '删除/span/a/div/div/Lili class='课程列表' div class=' titDefault clear fix ' div class=' left clear fix ' span class=' DragBtn '/span span class=' tit '内容em class=' continudex ' 2/em:/span em title='使用说明. txt' class='titDefaultName '使用说明. txt/em/div class=' mid ' 2014/9/24 9:54336000/div class=' right clear fix ' a value=' 253041 ' class=' moveuptn ' href=' JavaScript :span class='delTit '上移/span/aa value=' 253041 ' class=' moveDownBtn ' href=' JavaScript :span class='delTit '下移/span/aa value=' 253041 ' class=' deleteBtn ' href=' JavaScript :span class='delTit '删除/span/a/div/div/Lili class='课程列表' div class=' titDefault clear fix ' div class=' left clear fix ' span class=' DragBtn '/span span class=' tit '内容em class=' continudex ' 3/em:/span em title='占占大师. txt' class='titDefaultName '占占大师. txt/em/div class=' mid ' 2014/9/24 9:54:00/div class=' right clear fix ' a value=' 253040 ' class=' moveuptn ' href=' JavaScript :span class='delTit '上移/span/aa value=' 253040 ' class=' moveDownBtn ' href=' JavaScript :span class='delTit '下移/span/aa value=' 253040 ' class=' deleteBtn ' href=' JavaScript :span class='delTit '删除/span/a/div/div/Lili class='课程列表' div class=' titDefault clear fix ' div class=' left clear fix ' span class=' DragBtn '/span span class=' tit '内容em class=' continudex ' 4/em:/span em title='排序问题. txt' class='titDefaultName '排序问题. txt/em/div class=' mid ' 2014/9/24 9:54336000/div class=' right clear fix ' a value=' 253041 ' class=' moveuptn ' href=' JavaScript :span class='delTit '上移/span/aa value=' 253041 ' class=' moveDownBtn ' href=' JavaScript :span class='delTit '下移/span/aa value=' 253041 ' class=' deleteBtn ' href=' JavaScript :span class='delTit '删除/span/a/div/div/li/ul下面我们主要看一下射流研究…代码，主要使用JQ的在方法实现的，原因是因为列表的数据有第一次为静态的（绑定),当排序后，数据变为动态的（直播),所以，这种结构只能使用在才最合理，看一下代码

脚本类型=' text/ecmascript ' $(function(){//上移$('.清除修复').打开('点击','。moveUpBtn '，function(){ var self=$(this)；var _ old=self。关('李。课程列表’)；var _ new=self。关('李。课程列表').prev(' Li ')；if(_ new。长度0){ var _ temp=_ old。html()；_old.empty().追加(_ new。html())；_new.empty().追加(_ temp)；}});//下移$('.清除修复').打开('点击','。moveDownBtn '，function(){ var self=$(this)；var _ old=self。关('李。课程列表’)；var _ new=self。关('李。课程列表').下一个(“李”)；if(_ new。长度0){ var _ temp=_ old。html()；_old.empty().追加(_ new。html())；_new.empty().追加(_ temp)；}});//删除$('.清除修复').打开('点击','。deleteBtn '，function(){ var self=$(this)；//当前点击事件源对象自我。关('李。课程列表').移除();});});/script运行之后，效果就出来了，本射流研究…中没有把与后台交互的创建交互式、快速动态网页应用的网页开发技术方法写出来，大家可以根据具体情况而定。