选择球队（例题）

<body>

<div id="a">
　　<div id="left">
　　　　<div class="llist">洛杉矶湖人</div>
　　　　<div class="llist">圣安东尼奥马刺</div>
　　　　<div class="llist">休斯顿火箭</div>
　　　　<div class="llist">芝加哥公牛</div>
　　</div>
　　<div id="middle">
　　　　<div id="one">></div>
　　　　<div id="all">>></div>
　　</div>
　　<div id="right"></div>
</div>

</body>

　　　　//创建属性xz，为0，方便区分是否被选中
　　　　$(".llist").attr("xz",0);

　　　　//改变选中项的背景颜色
　　　　$(this).css("background-color","red");

　　　　//更改属性xz，为1，表示被选中
　　　　$(this).attr("xz",1);
　　});
　　//移动一项事件
　　$("#one").click(function(){

　　　　//将class为llist的所有项的内容存入变量list中
　　　　var list=$(".llist");
　　　　//对左侧DIV中的内容进行循环
　　　　for(var i=0;i<list.length;i++)
　　　　{
　　　　　　//判断选中项
　　　　　　if(list.eq(i).attr("xz")==1)
　　　　　　{
　　　　　　　　//将选中项的内容放入变量zhi中
　　　　　　　　var zhi = list.eq(i).text();
　　　　　　　　//对选中的值进行判断，在右侧DIV中是否存在
　　　　　　　　if(Has(zhi))
　　　　　　　　{
　　　　　　　　　　//如果不存在，则在右侧添加一项内容
　　　　　　　　　　var str="<div class='rlist'>"+zhi+"</div>";

　　　　　　　　　　//将得到的字符串内容添加到ID为right的div内
　　　　　　　　　　$("#right").append(str);
　　　　　　　　}
　　　　　　}
　　　　}
　　});
　　//移动全部事件
　　$("#all").click(function(){
　　　　//找到左侧的所有内容
　　　　var llist=$(".llist");
　　　　//对左侧内容进行循环判断
　　　　for(var i=0;i<llist.length;i++)
　　　　{
　　　　　　//将所有内容存入变量zhi中
　　　　　　var zhi = llist.eq(i).text();
　　　　　　//判断zhi里的内容在右侧是否已存在
　　　　　　if(Has(zhi))
　　　　　　{
　　　　　　　　//如果不存在就在右侧添加内容项
　　　　　　　　var str="<div class='rlist'>"+zhi+"</div>" ;
　　　　　　　　$("#right").append(str);
　　　　　　}
　　　　}
　　})
});
//封装一个判断选中的内容是否在右侧已经存在
function Has(zhi){
　　//定义变量rlist用来存放右侧已经存在的内容
　　var list=$(".rlist");
　　//定义一个bool型变量用来做判断
　　var cunzai=true;
　　//循环右侧已存在的所有内容
　　for(var i=0;i<list.length;i++)
　　{
　　　　//如果右侧的内容与选中的值重复
　　　　if(list.eq(i).text()==zhi)
　　　　{
　　　　　　//将变量cunzai更改为false
　　　　　　cunzai = false;
　　　　　　//跳出循环
　　　　　　break;
　　　　}
　　}
　　//返回到cunzai变量
　　return cunzai;
};

</script>