参考资料：http://jquery.cuishifeng.cn/index.html

代码：

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

    select{

        height: 140px;

        border: #000 1px solid;

    }

</style>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <meta charset="UTF-8">

</head>

<body>

    <select multiple="multiple" id="select1">

      <option value="看书">看书</option>

      <option value="旅游">旅游</option>

      <option value="运动">运动</option>

      <option value="购物">购物</option>

    </select>

    <input type="button" value="<==" id="b4">

    <input type="button" value="<=" id="b3">

    <input type="button" value="=>" id="b1">

    <input type="button" value="==>" id="b2">

    <select multiple="multiple" id="select2">

      <option value="游戏">游戏</option>

    </select>

    <script type="text/javascript">

    $(document).ready(function(){

        //给id为b1的按钮绑定click事件

        $("#b1").click(function(){

            // alert($("#select1 option:selected").val());

            // id为select1且option为选中状态的元素添加到id为select2下

            $("#select1 option:selected").appendTo($("#select2"));

        });

    });

    $(document).ready(function(){

        $("#b2").click(function(){

            $("#select1 option").appendTo($("#select2"));

        })

    });

    $(document).ready(function(){

        $("#b3").click(function(){

            $("#select2 option:selected").appendTo($("#select1"));

        })

    });

    $(document).ready(function(){

        $("#b4").click(function(){

            $("#select2 option").appendTo($("#select1"));

        })

    });

    $(document).dblclick(function(){

        $("#select1 option:selected").appendTo($("#select2"));

    });

    </script>

</body>

</html>

界面显示：

【四】jquery之文档处理习题（内部处理、外部处理）[移动节点]的更多相关文章

  1. python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  2. jQuery之文档处理

    jQuery 文档处理 1)内部插入 2)外部插入 3)包裹 4)替换 5)删除 6)复制 1.内部插入 append(content|fn) 向每个匹配的元素内部追加内容. 向所有段落中追加一些HT ...

  3. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  4. jQuery 的文档操作

    在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...

  5. Elasticsearch入门教程(四)：Elasticsearch文档CURD

    原文:Elasticsearch入门教程(四):Elasticsearch文档CURD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...

  6. jquery获取文档高度和窗口高度的例子

    jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  7. js、jQuery 获取文档、窗口、元素的各种值

    基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...

  8. 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Thinking in Java 4th（Java编程思想第四版）文档、源码、习题答案

    Thinking in Java 4th 中.英文两版pdf文档,书中源码及课后习题答案.链接:https://pan.baidu.com/s/1BKJdtgJ3s-_rN1OB4rpLTQ 密码:2 ...

随机推荐

  1. 剑指offer——python【第44题】翻转单词顺序

    题目描述 牛客最近来了一个新员工Fish,每天早晨总是会拿着一本英文杂志,写些句子在本子上.同事Cat对Fish写的内容颇感兴趣,有一天他向Fish借来翻看,但却读不懂它的意思.例如,“student ...

  2. Linux网络 - 数据包的接收过程（转）

    https://segmentfault.com/a/1190000008836467

  3. 基于 ASP.NET Core 2.1 的 Razor Class Library 实现自定义错误页面的公用类库

    注意:文中使用的是 razor pages ,建议使用 razor views ,使用 razor pages 有一个小坑,razor pages 会用到 {page} 路由参数,如果应用中也用到了这 ...

  4. dex2jar反编译dex文件

    apk实际是一组文件的压缩包,修改为zip或rar后直接解压可以看到其内部内容,其中classes.dex就是java代码编译后的结果 dex2jar可以实现对该文件的反编译 dex2jar镜像地址: ...

  5. 指数型生成函数（EGF）学习笔记

    之前,我们学习过如何使用生成函数来做一些组合问题(比如背包问题),但是它面对排列问题(有标号)的时候就束手无策了. 究其原因,是因为排列问题的递推式有一些系数(这个待会就知道了),所以我们可以修改一下 ...

  6. Visual Studio 2017使用Asp.Net Core构建Angular4应用程序

    文章转载请著名出处:http://www.cnblogs.com/smallprogram 你需要了解的名词 1. NodeJS,这是一个基于Chrome V8 JavaScript引擎构建的Java ...

  7. Cocoa 框架 For iOS(一) 框架的介绍，Objectivie-C运行时能力的解析等 (转载)

    http://blog.csdn.net/totogo2010/article/details/8081253 Cocoa框架是iOS应用程序的基础,了解Cocoa框架,对开发iOS应用有很大的帮助. ...

  8. MySQL 误操作后数据恢复（update,delete忘加where条件）

    在数据库日常维护中,开发人员是最让人头痛的,很多时候都会由于SQL语句写的有问题导致服务器出问题,导致资源耗尽.最危险的操作就是在做DML操作的时候忘加where条件,导致全表更新,这是作为运维或者D ...

  9. std::bind学习

    std::bind bind是对C++98标准中函数适配器bind1st/bind2nd的泛化和增强,可以适配任意的可调用对象,包括函数指针.函数引用.成员函数指针和函数对象. bind接受的第一个参 ...

  10. python常用函数及模块

    原文来源于博客园和CSDN 1.计算函数 abs()--取绝对值 max()--取序列最大值,包括列表.元组 min()--取序列最小值 len()--取长度 divmod(a,b)---取a//b除 ...