<!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. 利用Python获取ZOJ所有题目的名字

    先贴出代码,行数比较少,仅仅用正则表达式分析出题目Title所在的标签并把题目Title提取出来 import urllib.request import re import dbm #定义URL,其 ...

  3. ZeroMQ 在 centos 6.5_x86_64 下的安装

    ZeroMQ 在 centos 6.5_x86_64 下的安装 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.ZeroMQ介绍 ZeroMQ是一个开 ...

  4. 【BZOJ】【1055】【HAOI2008】玩具取名

    区间DP/记忆化搜索 sigh……看了提示才想到是区间DP >_>我果然还是太弱 f[l][r][k]表示L到R这段区间能否合并成K,那么就是枚举拆分方案(从哪里断开)和组合方式(左半合成 ...

  5. 【BZOJ】【3504】【CQOI2014】危桥

    网络流/最大流 比较裸的最大流= = 无向图上走来回其实就等价与走两遍>_> 如果路径有相交其实不影响答案的 比较恶心的是两个人路过同一座桥,但走的方向不同互相抵消流量了…… 其实只要在第 ...

  6. 8大排序算法图文讲解 分类： Brush Mode 2014-08-18 11:49 78人阅读 评论(0) 收藏

    排序算法可以分为内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存. 常见的内部排序算法有:插入排序.希尔排序. ...

  7. HackPorts – Mac OS X 渗透测试框架与工具

    HackPorts是一个OS X 下的一个渗透框架. HackPorts是一个“超级工程”,充分利用现有的代码移植工作,安全专业人员现在可以使用数以百计的渗透工具在Mac系统中,而不需要虚拟机. 工具 ...

  8. （链接保存）CentOS 6.6下yum快速升级内核

    (因Docker建议3.8以上kernel版本)这个方法升级很方便,保存链接备用: http://www.dadclab.com/archives/5340.jiecao Docker Engine安 ...

  9. 如何理解JS项目

    JS API(DOM/PhoneGap/Cordova/NodeJS/Library/Android/MongoDB....)最基础,可以看懂一行代码. -------> JS OOP, JS语 ...

  10. 关于SOAP

    http://www.tutorialspoint.com/soap/index.htm http://www.w3.org/TR/2000/NOTE-SOAP-20000508/ SOAP协议规范介 ...