<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript"  src="../../popwindow/jquery-1.11.2.min.js"></script>

<style type="text/css">

.t

{

    width:%;

    text-align:center ;

    top:10px;

    height:130px;

    background:#00C;

}

.left

{

    width:%;

    top:150px;

    height:500px;

    background:#C69;

    position:absolute;

    left:0px;

}

.middle

{

    width:%;

    top:150px;

    height:500px;

    background:#CF0;

    position:absolute;

    left:%;

}

.right

{

    width:%;

    top:150px;

    height:500px;

    background:#C69;

    position:absolute;

    right:0px;

}

.leftb

{

    width:%;

    height:500px;

    left:%;

    position:absolute;

}

.rightb

{

    width:%;

    height:500px;

    right:%;

    position:absolute;

}

.le

{

     margin-top:5px;

     width:%;

     text-align:center ;

     background:#3F0;

}

.ri

{

     margin-top:5px;

     width:%;

     text-align:center ;

     background:#3F0;

}

.btn1

{

    top:200px;

    width:%;

    height:30px;

    text-align:center;

    left:%;

    position:absolute;

    background:#F30;

}

.btn2

{

    bottom:200px;

    width:%;

    height:30px;

    text-align:center;

    left:%;

    position:absolute;

    background:#F30;

}

</style>

</head>

<body>

<div class="t"><h1>添加列表</h1></div>

<div class="left">

<div class="leftb">

<div class="le">皇马</div>

<div class="le">曼联</div>

<div class="le">米兰</div>

</div>

</div>

<div class="middle">

<div class="btn1">>></div>

<div class="btn2">></div>

</div>

<div class="right">

<div class="rightb">

<script  type="text/javascript">

$(document).ready(function(e) {

    //鼠标选中

    //鼠标点击选中事件

    $(".le").click(function(e) {

           //初始化

    $(".le").css("background","#3F0")

    $(".le").attr("cz","")//添加标记

        //选中的样式

    $(this).css("background","#FFF")

    $(this).attr("cz","")//更改标记

    });

        //点击中间按钮移动到右侧中

    $(".btn1").click(function(e) {

       var mz= $(".le")//将所有名字存到名字mz中

       for (var i=;i<mz.length;i++)//查找

       {

           //判断选中项

           if (mz.eq(i).attr("cz")=="")//eq()判断cz标签是否是选中标签1

           {

               var zhi= mz.eq(i).text()//将选中的值放入zhi中

                //判断该值是否存在

              if (Has(zhi))

            {   

               var str="<div class='ri'>"+zhi+"</div>";//将值zhi内容拼成div输出字符串

               $(".rightb").append(str);//将要输出的div拼到右侧窗口中

            }

           }

       }

    });

           //全选移动

       $(".btn2").click(function(e) {

           //左侧全部显示选中状态

       $(".le").css("background","#FFF")

          //将所有名字存入值中

       var list=$(".le")

          //循环添加

           for (var i=; i<list.length;i++)

           {

             var zhi= list.eq(i).text()

              if(Has(zhi))//去重

            {

             var str="<div class='ri'>"+zhi+"</div>";//将值zhi内容拼成div输出字符串

             $(".rightb").append(str);//将要输出的div拼到右侧窗口中

            }

           }

    });

});

function Has(zhi)//判断是否重复

{

    var list=$(".ri");

    var isok=true;

    for (var i=;i<list.length;i++)

    {

        if    (list.eq(i).text()==zhi)

        {

            isok=false;

            break;

        }

    }

    return isok;

}

</script>

jQuery练习二球队移动的更多相关文章

  1. 微信生成二维码 只需一个网址即刻 还有jquery生成二维码

    <div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...

  2. jquery 生成二维码

    jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码 <!DOCTYPE html> <html> <head> <meta ch ...

  3. MVC5中使用jQuery Post 二维数组和一维数组到Action

    很久没有写了,最近在做一个MVC项目,这是我做的第一个MVC项目.之前可以说多MVC一点都不了解,今天把昨天遇到的一个问题记录下来.MVC大神就请飘过吧,跟我遇到同样问题的可以进来看看.遇到的第一个问 ...

  4. JQuery FullCalendar(二)

    前言:根据前文介绍,我们对JQuery FullCalendar如何从后台取数据有了初步了解,已经实现最基本的要求.下面介绍一下FullCalendar的事件 $('#calendar').fullC ...

  5. 强大的JQuery（二）--动画效果

    上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...

  6. Jquery 学习二

    一.事件编程 1.基本事件(以方法形式存在的) 基本语法: 原生Javascript代码中的事件绑定方式: DOM对象.事件 = 事件的处理程序   jQuery代码中的事件绑定方式: jQuery对 ...

  7. JQuery的二维码插件

    jquery.qrcode.js 只有能重新生成的二维码才是安全的,大牛做了插件,满足我们吃糖的需求: 用法(除了翻译git上的readme我一下子想不到还能写点什么) 引用 <script t ...

  8. Python开发【第十三篇】：jQuery（二）

    http://www.bubuko.com/infodetail-1438296.html 处理完毕需要整理贴进来 Python之路[第十三篇]jQuery案例-Form表单&插件及扩展   ...

  9. 使用jquery生成二维码

    二维码已经渗透到生活中的方方面面,不管到哪,我们都可以用扫一扫解决大多数问题.二狗为了准备应对以后项目中会出现的二维码任务,就上网了解了如何使用jquery.qrcode生成二维码.方法简单粗暴,[] ...

随机推荐

  1. .NET Framework 4.5、4.5.1 和 4.5.2 中的新增功能

    .NET Framework 4.5.4.5.1 和 4.5.2 中的新增功能 https://msdn.microsoft.com/zh-cn/library/ms171868.aspx

  2. zepto判断手机横竖屏

    var CheckOrientation = (function(){ var win = $( window ), get_orientation, last_orientation, initia ...

  3. hdu 2853 Assignment KM算法

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2853 Last year a terrible earthquake attacked Sichuan ...

  4. 【BZOJ】【1041】【HAOI2008】圆周上的点

    数学 orz hzwer 完全不会做…… 很纠结啊,如果将来再遇到这种题,还是很难下手啊…… 引用题解: [分析]: 样例图示: 首先,最暴力的算法显而易见:枚举x轴上的每个点,带入圆的方程,检查是否 ...

  5. 【BZOJ】【1520】【POI2006】Szk-Schools

    网络流/费用流 比较裸的一道题 依旧是二分图模型,由源点S连向每个学校 i (1,0),「注意是连向第 i 所学校,不是连向学校的标号m[i]……唉这里WA了一次」 然后对于每所学校 i 连接 j+n ...

  6. 引擎设计跟踪(九.14.2a) 导出插件问题修复和 Tangent Space 裂缝修复

    由于工作很忙, 近半年的业余时间没空搞了, 不过工作马上忙完了, 趁十一有时间修了一些小问题. 这次更新跟骨骼动画无关, 修复了一个之前的, 关于tangent space裂缝的问题: 引擎设计跟踪( ...

  7. HDU 1104 Remainder

    与前一题类似,也是BFS+记录路径, 但是有很多BUG点, 第一MOD操作与%不同i,其实我做的时候注意到了我们可以这样做(N%K+K)%K就可以化为正数,但是有一点要注意 N%K%M!=N%M%K; ...

  8. poj 3254

    状态压缩 dp dp[i][j] 为第 i 行状态为 j 的总数 #include <cstdio> #include <cstdlib> #include <cmath ...

  9. Sqli-labs less 51

    Less-51 本关的sql语句为    $sql="SELECT * FROM users ORDER BY '$id'"; 我们此处要进行stacked injection,要 ...

  10. AwSnap：让全版本（Windows、iOS、Android）Chrome浏览器崩溃的有趣漏洞

    彩蛋爆料直击现场 几周前,我们曾报道了13个字符导致Chrome崩溃的漏洞.然而,这个漏洞有个小小的遗憾,那就是它只在MAC OS X下生效,其他系统并不受影响. 现在,我们又有了一个更有趣的漏洞.黑 ...