最近感觉学习挺紧的。JQuery没有学几天就又开始学习AngularJS了。学习的时候都是看着老师用着很简单，自己写的时候就觉得不太会用。但是学习AngularJS的时候有很多问题，我觉得不管是学习JQuery还是AngularJS都需要多练习。

之前做的一个有一个框里面有名字然后选中就移到右边去，也可以右边移到左边。之前看见很多网站上都有这种效果。现在我来简单讲解一下。

<body>

<div class="all">

    <div>

        <select name="left" id="left" class="left" multiple="multiple" size=""   >

            <option value="">关羽</option>

            <option value="">张飞</option>

            <option value="">刘备</option>

            <option value="">曹操</option>

            <option value="">诸葛亮</option>

            <option value="">周瑜</option>

            <option value="">黄盖</option>

        </select>

    </div>

    <div>

        <button onclick="moveRight()" >&gt;</button><br>

        <button onclick="moveAllRight()">&gt;&gt;</button><br>

        <button onclick="moveLeft()">&lt;</button><br>

        <button onclick="moveAllLeft()" >&lt;&lt;</button><br>

    </div>

    <div>

        <div>

            <select name="left" id="right" class="right" multiple="multiple" size=""   >

            </select>

        </div>

        <div>

            <button onclick="moveUp()">↑</button><br>

            <button onclick="moveDown()">↓</button>

        </div>

    </div>

</div>

</body>

如上，body里面写两个select，multiple="multiple" size="10"这样写框就会高一点，能看见下面所有的option.

页面效果图如下：

<script src="js/jquery-1.9.1.min.js"></script>

jquery文件千万不要忘记导入。

下面来加入具体的js

全部移入右边框：

    function moveAllRight(){

        $(".left>option").appendTo(".right");

}

定义一个函数名为movvAllRight的函数。我们用appenTo来操作。

AppendTo概述：

把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

效果图如下：

同理：右边全部移入左边也是这样写的，代码如下:

function moveAllLeft(){

        $(".right>option").appendTo(".left");

}

效果图如下：

当然，上面的还可以用append来做

Append概述：向每个匹配的元素内部追加内容。

用append上面就可以写成如下代码：

function moveAllRight(){

        $(".right").append (".left>option");

}

function moveAllLeft(){

        $(".left").append(".right>option");

    }

下面我们接着讲选中左边框中的一部分然后移到右边框

  function moveRight(){

        $(".left>option:selected").appendTo(".right");

        $("option:selected").prop("selected", false);

}

Selected:匹配所有选中的option元素

$(".left>option:selected")就表示在class为left中的所有选中的option。

$("option:selected").prop("selected", false)就是让选中的移过去之后状态从选中变为没选中。

效果图如下：

同理：选中右边框中的一部分然后移到左边框

 function moveLeft(){

        $(".right>option:selected").appendTo(".left");

        $("option:selected").prop("selected", false);

    }

效果图如下：

选中其中的一部分然后向上移：

function moveUp(){

        $("option:selected:first").prev().before($("option:selected"));

    }

我们要用到prev

Prev概述：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

before概述：在每个匹配的元素之前插入内容

first概述：获取匹配的第一个元素。如果不要用first的话如果选中的不是一个向上移的过程中会不断的增加。而且只是把选中的中间没有选中的移到

下面，但是选中的没有继续往上移。

效果图：

同理向下移也是一样的：

function moveDown(){

        $("option:selected:last").next().after($("option:selected"));

    }

Next概述：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

After概述：在每个匹配的元素之后插入内容。

Last概述：获取最后个元素。

效果图：

JQuery内容从左边框移到右边框的更多相关文章

  1. CSS border-right-style属性设置元素的右边框样式

    CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...

  2. dojo表格内容居左、居中和居右

    1.常规表格内容居左.居中和居右 style="text-align:left;" style="text-align:center;" style=" ...

  3. duilib中edit获得鼠标焦点后右边框被覆盖

    转载:http://www.cnblogs.com/minggong/p/6457734.html 用duilib做了一个窗口,窗口内有一个供用户输入使用的是edit控件. XML中是这样写的: &l ...

  4. 解决方案--duilib中edit获得鼠标焦点后右边框被覆盖

    用duilib做了一个登录框,用户名的输入使用的是edit控件. XML中是这样写的: <Edit name="subdomain_edit" tipvalue=" ...

  5. 话说C++中的左值、纯右值、将亡值

    写在前面 C++中有“左值”.“右值”的概念,C++11以后,又有了“左值”.“纯右值”.“将亡值”的概念.关于这些概念,许多资料上都有介绍,本文在拾人牙慧的基础上又加入了一些自己的一些理解,同时提出 ...

  6. devexpress中gridcontrol头部添加垂直线(右边框)

    winform开发,用devexpress中的gridcontrol控件,头部默认是3D样式,当客户希望像内容一样扁平化显示且需要添加垂直线(右边框)时恶梦开始了..经过一阵摸索发现可以这样解决: 1 ...

  7. C++ 11 左值，右值，左值引用，右值引用，std::move, std::foward

    这篇文章要介绍的内容和标题一致,关于C++ 11中的这几个特性网上介绍的文章很多,看了一些之后想把几个比较关键的点总结记录一下,文章比较长.给出了很多代码示例,都是编译运行测试过的,希望能用这些帮助理 ...

  8. C++雾中风景10:聊聊左值，纯右值与将亡值

    C++11的版本在类型系统上下了很大的功夫,添加了诸如auto,decltype,move等新的关键词来简化代码的编写与降低阅读代码的难度.为了更好的理解这些新的语义,笔者确定通过几篇文章来简单窥探一 ...

  9. 左值与右值,左值引用与右值引用(C++11)

    右值引用是解决语义支持提出的 这篇文章要介绍的内容和标题一致,关于C++ 11中的这几个特性网上介绍的文章很多,看了一些之后想把几个比较关键的点总结记录一下,文章比较长.给出了很多代码示例,都是编译运 ...

随机推荐

  1. 【绝密外泄】风哥Oracle数据库DBA高级工程师培训视频教程与内部资料v0.1

    [绝密外泄]风哥Oracle数据库DBA高级工程师培训视频教程与内部资料v0.1 由于是[绝密外泄]资料,防止被查,需要的小伙伴赶紧下载附件中的课件文档.由于视频太大了,已放在百度网盘了,已经在附中说 ...

  2. ISO 9141-2 and ISO 14230-2 INITIALIZATION and DATA TRANSFER

    http://ecad.tu-sofia.bg/et/2005/pdf/Paper097-P_Dzhelekarski1.pdf INITIALIZATION Prior to any diagnos ...

  3. Windows Server Backup 备份Hypver-V VM

    在Windows Server 2012中,可以通过Windows Server Backup备份Hypver-V VM.在还原时,将会还原到Hypver-V管理器中. 设置只保存2个备份副本,命令如 ...

  4. JDBC概述以及几种驱动程序

    JDBC(Java DataBase Connectivity,数据库连接)是用来执行SQL的Java API.开发人员可以使用这些标准API来连接和操作数据库 JDBC是Java的规范,考虑到规范的 ...

  5. 【JavsScript】Spine的作者曾经是Backbone的作者

    基于MVC的JavaScript Web富应用开发 Alex MacCaw,是一名Ruby/JavaScript程序员,在开源社区中很有名望,是Spine框架的作者,开发过Taskforce,Soci ...

  6. javascript异步延时载入及推断是否已载入js/css文件

    <html> <head> <script type="text/javascript"> /**======================= ...

  7. excel VLOOKUP函数的用法

    VLOOKUP函数是Excel中几个最重函数之中的一个,为了方便大家学习,兰色幻想特针对VLOOKUP函数的使用和扩展应用,进行一次全面综合的说明.本文为入门部分 一.入门级 VLOOKUP是一个查找 ...

  8. SimpleDateFormat使用详解及与毫秒的相互转换

    1. SimpleDateFormat使用详解 public class SimpleDateFormat extends DateFormat SimpleDateFormat 是一个以国别敏感的方 ...

  9. 动漫网站基于jquery的横向手风琴特效

    今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  10. 关于Android LayoutInflater的解释

    LayoutInflater的作用就是动态加载xml布局好的界面,类似于findViewById()来获取已经定义好的控件一样.不同点是LayoutInflater是用来找res/layout/下的x ...