参考资料：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. java学习（二）--- 变量类型

    变量声明 type identifier [ = value][, identifier [= value] ...] ; 局部变量: 1.局部变量声明在方法.构造方法.语句块中 2.局部变量在方法. ...

  2. 找不到 main 方法, 请将 main 方法定义为: public static void main(String[] args) 否则 JavaFX 应用程序类必须扩展javafx.应用程序类必 须扩展javafx.application.Application”

    用eclipse写代码的时候,写了一个简单的程序,编译的时候突然出现“错误: 在类 com.test.demo 中找不到 main 方法, 请将 main 方法定义为: public static v ...

  3. java面试基础题------》Java 中List、Set、Map异同点

    借鉴地址:http://blog.csdn.net/speedme/article/details/22398395 几句喜欢的话,拷贝下来: 世间上本来没有集合,(只有数组参考C语言)但有人想要,所 ...

  4. springboot:spring data jpa介绍

    转载自:https://www.cnblogs.com/ityouknow/p/5891443.html 在上篇文章springboot(二):web综合开发中简单介绍了一下spring data j ...

  5. HTML轮播图实现（前后端分离）

    1,首先前后端分离用到了3个插件 2,异步请求后端获取数据库图片地址(图片名字) //图片轮播 axios({ url:'http://127.0.0.1:8000/userctrl/image', ...

  6. 【转载】word2vec原理推导与代码分析

    本文的理论部分大量参考<word2vec中的数学原理详解>,按照我这种初学者方便理解的顺序重新编排.重新叙述.题图来自siegfang的博客.我提出的Java方案基于kojisekig,我 ...

  7. python摸爬滚打之day18----instance, type, issubclass和反射

    1.issubclass(a,b)  ----> 判断a是否是b的子类.  isinstance(a,b)  ----> 判断a这个对象是否是b类型的(可以向上判断, 即考虑继承关系往父类 ...

  8. what's the 颈线

    出自 MBA智库百科(https://wiki.mbalib.com/) 什么是颈线 颈线一种支撑线,出现在头肩顶形态中,是连接两个低点的平行线. 什么是“头肩顶”型态 一个完美的“头肩顶”走势,可以 ...

  9. spring重要知识点总结

    一.面向切面编程 配置applicationContext.xml文件 <beans xmlns="http://www.springframework.org/schema/bean ...

  10. MySQL Backup mysqldump 常用选项与主要用法

    The mysqldump client utility performs logical backups, producing a set of SQL statements that can be ...