<!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. 【Sum Root to Leaf Numbers】cpp

    题目: Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a nu ...

  2. C++ Tempatet之模板模型

    模板一共有三种类型: 1.第一种包含模型:包含模型是讲模板的定义和声明都放在头文件里(注:一般我们写的代码是将声明放在头文件里,实现放在cpp里,防止产生两份实现代码) 缺点:包含模型会增加代码的量. ...

  3. Matlab实现网络拓补图

    顶点号 顶点号 权值 1 2 400 1 3 450 2 4 300 2 8 230 2 9 140 3 4 600 4 5 210 4 19 310 5 6 230 5 7 200 6 7 320 ...

  4. Winform跨线程操作界面的策略

    BeginInvoke(new ThreadStart(() => toolStripButton1.Text = "aaa")); 1.非跨线程操作和部分跨线程get不会引 ...

  5. orbis 链接 .a的问题

    orbis-clang.exe :error: no such file or directory : libppfxd_delta.a 这个东西真是见鬼 明明在那里就是说找不到 在依赖里libppf ...

  6. javascript刷新页面的方法

    Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(locat ...

  7. WCF服务端与客户端时间匹配问题

    当服务端部署的WCF服务服务在被客户机调用时,如果显示: 错误,展开后,详细错误为:An error occurred when verifying security for the message ...

  8. HDU 5014Number Sequence

    思路: 对于一个二进制100011: 尽量将填满:填成111111: 然后有一个很好算的方法 gets(n)表示二进制下N有多少位,N^X=(111111)2 X=111111^N; 其实答案可以直接 ...

  9. 一篇不错的讲解Java异常的文章(转载）

    http://www.blogjava.net/freeman1984/archive/2007/09/27/148850.html 六种异常处理的陋习 你觉得自己是一个Java专家吗?是否肯定自己已 ...

  10. HDU4945 2048(dp)

    先是看错题意..然后知道题意之后写了发dp..无限TLE..实在是不知道怎么优化了,跑了遍数据是对的,就当作理论AC掉好了.. #pragma warning(disable:4996) #inclu ...