参考资料：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. Linux在终端命令行模式下智能补全功能以及组合键

    linux命令行下也有很多热键(快捷键).先来看看tab键 1.如果想看看linux下以c开头的命令可直接在命令行下敲入c然后连续敲两次tab,再选择y,会显示所有以c开头的命令. 2.涉及到文件时, ...

  2. 如果报错，使用 journalctl -f -t etcd 和 journalctl -u etcd 来定位问题。

    如果报错,使用 journalctl -f -t etcd 和 journalctl -u etcd 来定位问题.

  3. spring 开始构造

    1,选择“org.apache.maven.archetypes:maven-archetype-webapp”骨架(模板),创建一个Web项目: 在main 目录下创建文件夹  java,  res ...

  4. java的几种对象(PO,VO,DAO,BO,POJO，DTO)解释

    一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数 ...

  5. python摸爬滚打之day19----类的约束, 异常处理

    1.类的约束 父类对子类某些功能的约束. python 中的两种约束: 1, 提取父类, 然后在父类中定义好方法, 该方法什么都不用干, 就通过主动抛出异常 raise NotImplementedE ...

  6. 点击图片img提交form表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. Yii2 mongoDb的配置及使用

    yii2 的配置都是在启动时加载的,所以mongo的配置也同样在component里面配置. 具体实现(无用户和密码): [ 'mongo1' => [ 'class' => '\yii\ ...

  8. Spring中IOC和AOP的详细解释（转）

    原文链接:Spring中IOC和AOP的详细解释 我们是在使用Spring框架的过程中,其实就是为了使用IOC,依赖注入,和AOP,面向切面编程,这两个是Spring的灵魂. 主要用到的设计模式有工厂 ...

  9. 手写RPC框架

    https://www.bilibili.com/video/av23508597?from=search&seid=6870947260580707913 https://github.co ...

  10. 【LeetCode每天一题】Length of Last Word(字符串中最后一个单词的长度)

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...