参考资料：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. ubuntu安装python3.6

    环境: ubuntu18.04 64位,python3.6.5 安装过程 1.打开终端 首先创建安装目录, sudo mkdir /usr/local/python3 2.然后下载安装包,解压,并且进 ...

  2. mui 普通新闻文字列表 图文新闻列表

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. Oracle课程档案，第七天

    数据库管理 关闭数据库有4中方式: 1.shutdown modes 关机模式 2.shutdown normal 关机正常 3.shutdown immediate 立即关闭 ★★ 常用命令 4.s ...

  4. 20165311 ch02 课下作业

    补充完成课上测试(不能只有截图,要有分析,问题解决过程,新学到的知识点) 完成教材 p97 2.96 2.97,要有完备的

  5. poj2480（利用欧拉函数的积性求解）

    题目链接: http://poj.org/problem?id=2480 题意:∑gcd(i, N) 1<=i <=N,就这个公式,给你一个n,让你求sum=gcd(1,n)+gcd(2, ...

  6. Golang自定义包导入

    # 文件Tree project -/bin -/pkg -/src -main.go -/test -test1.go -test2.go main.go package main import ( ...

  7. 【UML】NO.47.EBook.5.UML.1.007-【UML 大战需求分析】- 部署图（Deployment Diagram）

    1.0.0 Summary Tittle:[UML]NO.47.EBook.1.UML.1.007-[UML 大战需求分析]- 部署图(Deployment Diagram) Style:Design ...

  8. zabbix-agent 在SElinux Enforcing 状态的文件权限问题及解决办法

    因为某种原因必须要开启SElinux,用yum装了一个zabbix-agent 替换了一下配置文件结果悲剧了 # systemctl restart zabbix-agent ● zabbix-age ...

  9. [warn] _default_ VirtualHost overlap on port 443, the first has precedence

    配置文件中添加 NameVirtualHost *:433 保存重启apache

  10. LCA Tarjan方法

    LCA Tarjan方法 不得不说,高中生好厉害,OI大佬,感觉上个大学好憋屈啊! 说多了都是眼泪 链接拿去:http://www.cnblogs.com/JVxie/p/4854719.html