<!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. 自定义异常时如何定义checked异常和unchecked异常

    When defining your own exception type, study the existing exception classes in the Java API and try ...

  2. OS X 使用技巧——访问所有的键盘功能

    苹果笔记本电脑和苹果的无线键盘只有一个Delete键,可以删除光标前面的字. 按住Fn键再按Delete键就能删除光标后面的字符. 按住Fn键会把上下方向键的效果变成Page Up / Page Do ...

  3. Extjs中TextField中显示图标

    现看实现效果:   实现代码: { width:500, height : 25, fieldLabel : '过滤条件', itemId : 'queryText', labelAlign : 'r ...

  4. 打印xls注意事项

    1.ctrl+p 2.打印机选择 就绪的,不是脱机的,不要只看打印机的名字. 3.打印名单信息的话 要用横向打印 4.从数据库里导出来的数据xls可能在excel里没显示完全,比如学号.身份证号等(e ...

  5. 博弈论入门小结 分类： ACM TYPE 2014-08-31 10:15 73人阅读 评论(0) 收藏

    文章原地址:http://blog.csdn.net/zhangxiang0125/article/details/6174639 博弈论:是二人或多人在平等的对局中各自利用对方的策略变换自己的对抗策 ...

  6. Brush Mode --- Nyoj 236 分类： Brush Mode 2014-04-02 06:56 116人阅读 评论(0) 收藏

    心急的C小加 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 C小加有一些木棒,它们的长度和质量都已经知道,需要一个机器处理这些木棒,机器开启的时候需要耗费一个单位的时间 ...

  7. linux install

    http://www.ubuntu.org.cn/index_kylin 先在官网下个Ubuntu  是个iso 然后下个UltraISO 是个软件 插好空u盘 打开软件 在菜单栏上 点击 文件-&g ...

  8. 一个包的libevent流程

    //一个发包的流程 第一个包就是客户端的心跳包,现在加了版本的包 再来看看这个发包打包过程,过程坚持,但理解费劲 void NGP::OnliveTimer()//客户端心跳,5s发一次 { Send ...

  9. Codeforces Round #204 (Div. 2)->B. Jeff and Periods

    B. Jeff and Periods time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. 《JavaScript DOM编程艺术》

    第2章JS语法关联数组在为新元素给出下标时,不必局限于整数数字.数组下标可以是字符串逻辑与&&只有两个操作数都是true时结果才为true逻辑或||只有两个操作数都是false时结果才 ...