最近感觉学习挺紧的。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. 设置文字在div中垂直居中，使用line-height

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...

  2. js 判断pc与手机

    var u = navigator.userAgent; if ((u.indexOf('Mac') > -1 || u.indexOf('Windows') > -1) &&am ...

  3. Notepad++配置Python运行环境

    转自:http://www.cnblogs.com/zhcncn/p/3969419.html Notepad++配置Python开发环境   1. 安装Python 1 下载 我选择了32位的2.7 ...

  4. OpenCV中cvWaitKey()函数注意事项

    注意:这个函数是HighGUI中唯一能够获取和操作事件的函数,所以在一般的事件处理中,它需要周期地被调用,除非HighGUI被用在某些能够处理事件的环境中.比如在MFC环境下,这个函数不起作用.

  5. PageValidate 类

    转载:http://www.cnblogs.com/sufei/archive/2010/01/14/1648028.html using System.Text.RegularExpressions ...

  6. Windows Server 2012远程刷新客户端组策略，IE代理设置

    Windows Server 2012远程刷新客户端组策略: 1.PowerShell命令对单台计算机进行刷新: Invoke-GPUpdate -RandomDelayInMinutes 0 -Co ...

  7. 【S17】使用“swap技巧”除去多余的容量

    1.考虑下面的需求,对于vec开始的时候有1000个元素,后来只有10个元素,那么vec的capacity至少还是1000,后面的990个内存单元,没有使用,但是还被vec霸占着.如何释放这些内存呢? ...

  8. Domain Driven Design and Development In Practice--转载

    原文地址:http://www.infoq.com/articles/ddd-in-practice Background Domain Driven Design (DDD) is about ma ...

  9. matplotlib作图中文显示问题

    def set_ch(): from pylab import mpl mpl.rcParams['font.sans-serif'] = ['FangSong'] # 指定默认字体 mpl.rcPa ...

  10. Intervals poj 1201 差分约束系统

    Intervals Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 22503   Accepted: 8506 Descri ...