PHP-----球队例题

例题：
  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>
显示结果：