1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript"  src="../../popwindow/jquery-1.11.2.min.js"></script>
  7. <style type="text/css">
  8. .t
  9. {
  10.     width:%;
  11.     text-align:center ;
  12.     top:10px;
  13.     height:130px;
  14.     background:#00C;
  15. }
  16. .left
  17. {
  18.     width:%;
  19.     top:150px;
  20.     height:500px;
  21.     background:#C69;
  22.     position:absolute;
  23.     left:0px;
  24. }
  25. .middle
  26. {
  27.     width:%;
  28.     top:150px;
  29.     height:500px;
  30.     background:#CF0;
  31.     position:absolute;
  32.     left:%;
  33. }
  34. .right
  35. {
  36.     width:%;
  37.     top:150px;
  38.     height:500px;
  39.     background:#C69;
  40.     position:absolute;
  41.     right:0px;
  42. }
  43. .leftb
  44. {
  45.     width:%;
  46.     height:500px;
  47.     left:%;
  48.     position:absolute;
  49. }
  50. .rightb
  51. {
  52.     width:%;
  53.     height:500px;
  54.     right:%;
  55.     position:absolute;
  56. }
  57. .le
  58. {
  59.      margin-top:5px;
  60.      width:%;
  61.      text-align:center ;
  62.      background:#3F0;
  63. }
  64. .ri
  65. {
  66.      margin-top:5px;
  67.      width:%;
  68.      text-align:center ;
  69.      background:#3F0;
  70. }
  71. .btn1
  72. {
  73.     top:200px;
  74.     width:%;
  75.     height:30px;
  76.     text-align:center;
  77.     left:%;
  78.     position:absolute;
  79.     background:#F30;
  80.  
  81. }
  82. .btn2
  83. {
  84.     bottom:200px;
  85.     width:%;
  86.     height:30px;
  87.     text-align:center;
  88.     left:%;
  89.     position:absolute;
  90.     background:#F30;
  91. }
  92. </style>
  93. </head>
  94. <body>
  95. <div class="t"><h1>添加列表</h1></div>
  96. <div class="left">
  97. <div class="leftb">
  98. <div class="le">皇马</div>
  99. <div class="le">曼联</div>
  100. <div class="le">米兰</div>
  101. </div>
  102. </div>
  103. <div class="middle">
  104. <div class="btn1">>></div>
  105. <div class="btn2">></div>
  106. </div>
  107. <div class="right">
  108. <div class="rightb">
  109. <script  type="text/javascript">
  110. $(document).ready(function(e) {
  111.     //鼠标选中
  112.  
  113.     //鼠标点击选中事件
  114.     $(".le").click(function(e) {
  115.            //初始化
  116.     $(".le").css("background","#3F0")
  117.     $(".le").attr("cz","")//添加标记
  118.         //选中的样式
  119.     $(this).css("background","#FFF")
  120.     $(this).attr("cz","")//更改标记
  121.     });
  122.         //点击中间按钮移动到右侧中
  123.     $(".btn1").click(function(e) {
  124.        var mz= $(".le")//将所有名字存到名字mz中
  125.        for (var i=;i<mz.length;i++)//查找
  126.        {
  127.            //判断选中项
  128.            if (mz.eq(i).attr("cz")=="")//eq()判断cz标签是否是选中标签1
  129.            {
  130.                var zhi= mz.eq(i).text()//将选中的值放入zhi中
  131.                 //判断该值是否存在
  132.               if (Has(zhi))
  133.             {   
  134.  
  135.                var str="<div class='ri'>"+zhi+"</div>";//将值zhi内容拼成div输出字符串
  136.                $(".rightb").append(str);//将要输出的div拼到右侧窗口中
  137.             }
  138.            }
  139.        }
  140.     });
  141.            //全选移动
  142.        $(".btn2").click(function(e) {
  143.            //左侧全部显示选中状态
  144.        $(".le").css("background","#FFF")
  145.           //将所有名字存入值中
  146.        var list=$(".le")
  147.           //循环添加
  148.            for (var i=; i<list.length;i++)
  149.            {
  150.              var zhi= list.eq(i).text()
  151.               if(Has(zhi))//去重
  152.             {
  153.              var str="<div class='ri'>"+zhi+"</div>";//将值zhi内容拼成div输出字符串
  154.              $(".rightb").append(str);//将要输出的div拼到右侧窗口中
  155.             }
  156.            }
  157.  
  158.     });
  159.  
  160. });
  161. function Has(zhi)//判断是否重复
  162. {
  163.     var list=$(".ri");
  164.     var isok=true;
  165.     for (var i=;i<list.length;i++)
  166.     {
  167.         if    (list.eq(i).text()==zhi)
  168.         {
  169.             isok=false;
  170.             break;
  171.         }
  172.  
  173.     }
  174.     return isok;
  175.  
  176. }
  177. </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. Careercup - Microsoft面试题 - 5752271719628800

    2014-05-10 20:31 题目链接 原题: Given an array of integers and a length L, find a sub-array of length L su ...

  2. yii的常用配置文件

    <?php return array( 'basePath' => dirname(__FILE__).DIRECTORY_SEPARATOR.'..', //当前应用根目录路径 'nam ...

  3. SPFA 原理剖析代码实现分析比较

    算法简介 SPFA(Shortest Path Faster Algorithm)是Bellman-Ford算法的一种队列实现,减少了不必要的冗余计算. 算法流程 算法大致流程是用一个队列来进行维护. ...

  4. 【POJ】【2601】Simple calculations

    推公式/二分法 好题! 题解:http://blog.csdn.net/zck921031/article/details/7690288 这题明显是一个方程组……可以推公式推出来…… 然而这太繁琐了 ...

  5. EXCEL 跨表比较数据

    Public Sub Compare(fullname As String, sheet As String) Dim conn, sql, rows, i, cellContents ,rowInd ...

  6. 社区O2O，才是未来10年移动互联网最赚钱的项目

    原文:http://blog.sina.com.cn/s/blog_70e76a920102uyoi.html 8月12日  上海  晴 从深圳回来后,一直和郭老师探讨一个问题:新媒体营销未来最大的市 ...

  7. 使用eclipse maven遇到的错误（转）

    [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:2.5:resources (defaul ...

  8. IOS-闪光灯操作

    AVCaptureDevice.h主要用来获取iphone一些关于相机设备的属性. 前置和后置摄像头 enum { AVCaptureDevicePositionBack = , AVCaptureD ...

  9. UITextField中文搜索

    导入头文件 #import "ChineseInclude.h"#import "PinYinForObjc.h" NSMutableArray *search ...

  10. Python并发与并行的新手指南

    点这里 在批评Python的讨论中,常常说起Python多线程是多么的难用.还有人对 global interpreter lock(也被亲切的称为“GIL”)指指点点,说它阻碍了Python的多线程 ...