例题：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="../jquery-1.11.2.min.js"></script> 7 <style type="text/css"> 8 *{ margin:0px auto; padding:0px} 9 #wai{ 100%; height:300px; margin-top:50px} 10 #left{ 45%; height:300px; float:left; background-color:#0CF} 11 #middle{ 10%; height:300px; float:left; background-color:#FC3} 12 #right{ 45%; height:300px; float:left;background-color:#0CF} 13 .llist{ 150px; height:26px; background-color:#63F; margin-top:2px; color:white; text-align:center; line-height:26px; vertical-align:middle} 14 #one{ 80px; height:23px; margin:100px 0px 0px 0px; background-color:#0F3;text-align:center; line-height:23px; vertical-align:middle; font-weight:bold} 15 #all{80px; height:23px; margin:10px 0px 0px 0px; background-color:#0F3;text-align:center; line-height:23px; vertical-align:middle; font-weight:bold} 16 .rlist{150px; height:26px; background-color:#63F; margin-top:2px; color:white; text-align:center; line-height:26px; vertical-align:middle} 17 </style> 18 </head> 19 20 <body> 21 <div id="wai"> 22 <div id="left"> 23 <div class="llist">巴萨</div> 24 <div class="llist">皇马</div> 25 <div class="llist">曼联</div> 26 <div class="llist">曼城</div> 27 <div class="llist">阿森纳</div> 28 </div> 29 <div id="middle"> 30 <div id="one">></div> 31 <div id="all">>></div> 32 </div> 33 34 <div id="right"> 35 36 </div> 37 </div> 38 </body> 39 <script type="text/javascript"> 40 $(document).ready(function(e) { 41 42 //点击选中 43 $(".llist").click(function(){ 44 //清除所有的选中 45 $(".llist").css("background-color","#63F") 46 $(".llist").attr("xz",0); 47 //设置该项选中 48 $(this).css("background-color","red"); 49 $(this).attr("xz",1); 50 51 }) 52 //移动一项 53 $("#one").click(function(){ 54 55 var list = $(".llist"); 56 for(var i=0; i<list.length;i++) 57 { 58 //判断哪像选中 59 if(list.eq(i).attr("xz")==1) 60 { 61 //判断该值是否已经存在 62 var zhi = list.eq(i).text(); 63 if(Has(zhi)) 64 { 65 var str = "<div class='rlist'>"+zhi+"</div>"; 66 $("#right").append(str); 67 } 68 } 69 } 70 71 }) 72 //移动所有 73 $("#all").click(function(){ 74 75 var llist = $(".llist"); 76 for(var i=0;i<llist.length;i++) 77 { 78 var zhi = llist.eq(i).text(); 79 if(Has(zhi)) 80 { 81 var str = "<div class='rlist'>"+zhi+"</div>"; 82 $("#right").append(str); 83 } 84 } 85 86 }) 87 88 }); 89 90 function Has(zhi) 91 { 92 var list = $(".rlist"); 93 var iscunzai = true; 94 for(var i=0;i<list.length;i++) 95 { 96 if(list.eq(i).text()==zhi) 97 { 98 iscunzai = false; 99 break; 100 } 101 } 102 103 return iscunzai; 104 } 105 </script> 106 </html>
显示结果：
