最近感觉学习挺紧的。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. CMSIS Example - Mail and Timer

    #include <stdint.h> #include "bsp-fifisdr.h" #include "lpclib.h" #include ...

  2. Codeforces Round #146 (Div. 1) B. Let's Play Osu! dp

    B. Let's Play Osu! 题目连接: http://www.codeforces.com/contest/235/problem/B Description You're playing ...

  3. Codeforces Round #313 (Div. 1) A. Gerald's Hexagon 数学题

    A. Gerald's Hexagon Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/559/p ...

  4. hdu 4740 The Donkey of Gui Zhou bfs

    The Donkey of Gui Zhou Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproble ...

  5. script的defer和async

    我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...

  6. 终端I/O之终端选项标志

    http://www.cnblogs.com/nufangrensheng/p/3575752.html 中的表18-1至表18-4中列出的所有选项标志(除屏蔽标志外)都用一位或几位(设置或清除)表示 ...

  7. Linux下校验下载文件的完整性(MD5,SHA1,PGP)

    查看: Linux下校验下载文件的完整性(MD5,SHA1,PGP) http://blog.useasp.net/archive/2014/03/29/use-md5-sha1-or-pgp-to- ...

  8. Drawable和Bitmap转换

    一.Bitmap转Drawable Bitmap mBitMap=getYourBitMap(); //getYourBitMap()是你获取BitMap的方法 BitmapDrawable mBit ...

  9. 解决python3 不能引入setuptools

    1,原理分析: python中的setuptools因为其安全考虑需要ssl模块的支持.如果编译时没有通过ssl测试,就不能安装setuptools. 所以才会出现 Python3/dist-pack ...

  10. Python xml 解析百度糯米信息

    先利用爬虫利用百度糯米提供的api来采集北京当天的团购信息,保存为numi.html import xml.etree.ElementTree as ET import os class Nuomi( ...