最近感觉学习挺紧的。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. PostgreSQL中的AnyArray例子

    http://www.joeconway.com/presentations/function_basics.pdf CREATE FUNCTION myappend(anyarray, anyele ...

  2. 通过RDB还原用户误删除的邮件

    1.在任意一台邮箱服务器上新建RDB数据库目录:C:\rdb01 2.使用Windows Server Backup还原已备份的邮件数据(mbdb02)库到 C:\rdb01 目录下 3.创建RDB数 ...

  3. c# ActiveX 控件的开发

    关于ActiveX控件的开发,网上很多例子,昨天也整整研究一天才捋顺了. 网上大部分例子都是js调用控件的方法,由于要实现在html页面"相应"控件的事件,整整折腾一天. 关键点在 ...

  4. 【M5】对定制的“类型转换函数”保持警觉

    1.隐式类型转换有两种情况:单个形参构造方法和隐式类型转换操作符.注意:隐式类型转换不是把A类型的对象a,转化为B类型的对象b,而是使用a对象构造出一个b对象,a对象并没有变化. 2.单个形参构造方法 ...

  5. jQuery循环滚动新闻列表

    最近由于项目原因,学习了下jquery,实现了一个小小的功能,就是点击公告的上一条下一条来查看滚动条.具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT ...

  6. AIM Tech Round (Div. 2) B. Making a String 贪心

    B. Making a String 题目连接: http://codeforces.com/contest/624/problem/B Description You are given an al ...

  7. Codeforces Round #307 (Div. 2) C. GukiZ hates Boxes 贪心/二分

    C. GukiZ hates Boxes Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/551/ ...

  8. java学习笔记（5）——内部类

    一.内部类 1,静态内部类 使用static修饰,声明在类体中 静态内部类中可以访问外部类的静态成员 2,成员内部类 声明在类体中,不使用static,具有类的成员特征,也就是,必须有类的实例才能 创 ...

  9. 都是iconv惹的祸

    今天在做采集的时候发现只取到了网页的部分内容,当时我就郁闷了,之前都用的采集都可以采集到网页的所有内容,但这次死活就取到部分内容.寻找原因才知道原来是iconv惹的祸. 发现问题时,网上搜了搜,才发现 ...

  10. linux 认证方式