<!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. 【LRU Cache】cpp

    题目: Design and implement a data structure for Least Recently Used (LRU) cache. It should support the ...

  2. 关于Office 2013的几个问题

    最近在阅读一些pdf的材料,想对其中做一些批注,但是PDF文档做批准比较麻烦,而且市场上的几个pdfToWord也不是很好用. 偶然的机会发现,使用office2013可以直接打开pdf文件,所以赶紧 ...

  3. ASP.NET MVC 如何在一个同步方法（非async）方法中等待async方法

    问题 首先,在ASP.NET MVC 环境下对async返回的Task执行Wait()会导致线程死锁.例: public ActionResult Asv2() { //dead lock var t ...

  4. 2010 Asia Fuzhou Regional Contest

    A hard Aoshu Problem http://acm.hdu.edu.cn/showproblem.php?pid=3699 用深搜写排列,除法要注意,还有不能有前导零.当然可以5个for, ...

  5. DXGI_FORMAT_R8G8B8A8_UNORM_SRGB

    这个类型的resource 后面多个SRGB 表示SRGB空间是指gamma 矫正系数为2.2的色彩空间,这个问题我没有问别人,是我自己是上网查的,我觉得我不是个女人了......我又level up ...

  6. 服务器NPC的ID如何分配的

    服务器ID分配包括NPC,Monster,Pet的ID分配都是调用allocateUID然后自动保存的ID加一,pet说是通过玩家的ID移位获得的,调试一下发现还是调用allocateUID,如果通过 ...

  7. ios 7 20像素解决

    1.if ([[[UIDevicecurrentDevice] systemVersion] floatValue] >= 7) { self.view.bounds = CGRectMake( ...

  8. ios 5

    1.屏幕尺寸568×2/320×2  需要一张568h@2x.png的图片. 2.iOS5不支持udid,用uuid替代,取得uuid方法: -(NSString*) uuid { CFUUIDRef ...

  9. in_array函数的第三个参数 strict

    看段代码 <?php $array = array('testing',0,'name'); var_dump($array); var_dump(in_array('foo', $array) ...

  10. INSERT IGNORE 与INSERT INTO的区别

      INSERT IGNORE 与INSERT INTO的区别就是INSERT IGNORE会忽略数据库中已经存在 的数据,如果数据库没有数据,就插入新的数据,如果有数据的话就跳过这条数据.这样就可以 ...