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

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5.     select{
  6.         height: 140px;
  7.         border: #000 1px solid;
  8.     }
  9. </style>
  10.     <script type="text/javascript" src="jquery-3.3.1.js"></script>
  11.     <meta charset="UTF-8">
  12. </head>
  13. <body>
  14.     <select multiple="multiple" id="select1">
  15.       <option value="看书">看书</option>
  16.       <option value="旅游">旅游</option>
  17.       <option value="运动">运动</option>
  18.       <option value="购物">购物</option>
  19.     </select>
  20.     <input type="button" value="<==" id="b4">
  21.     <input type="button" value="<=" id="b3">
  22.     <input type="button" value="=>" id="b1">
  23.     <input type="button" value="==>" id="b2">
  24.     <select multiple="multiple" id="select2">
  25.       <option value="游戏">游戏</option>
  26.     </select>
  27.     <script type="text/javascript">
  28.     $(document).ready(function(){
  29.         //给id为b1的按钮绑定click事件
  30.         $("#b1").click(function(){
  31.             // alert($("#select1 option:selected").val());
  32.             // id为select1且option为选中状态的元素添加到id为select2下
  33.             $("#select1 option:selected").appendTo($("#select2"));
  34.         });
  35.     });
  36.     $(document).ready(function(){
  37.         $("#b2").click(function(){
  38.             $("#select1 option").appendTo($("#select2"));
  39.         })
  40.     });
  41.     $(document).ready(function(){
  42.         $("#b3").click(function(){
  43.             $("#select2 option:selected").appendTo($("#select1"));
  44.         })
  45.     });
  46.     $(document).ready(function(){
  47.         $("#b4").click(function(){
  48.             $("#select2 option").appendTo($("#select1"));
  49.         })
  50.     });
  51.     $(document).dblclick(function(){
  52.         $("#select1 option:selected").appendTo($("#select2"));
  53.     });
  54.     </script>
  55. </body>
  56. </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. day21 二十一、垃圾回收机制、re正则

    一.内存管理 1.垃圾回收机制:不能被程序访问到的数据称之为垃圾 2.引用计数:引用计数是用来记录值的内存地址被记录的次数 每一次对值地址的引用都可以使该值的引用计数 +1 每一次对值地址的释放都可以 ...

  2. BrowserRoute服务器配置

    BrowserRoute服务器配置 在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由 ...

  3. c语言实现wc功能

    本随笔对网站http://blog.chinaunix.net/uid-22566367-id-381958.html有所借鉴 #include <stdio.h> #define BEG ...

  4. js/jquery 元素是否存在

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>spli ...

  5. js 整数型数组和字符型数组相互转换

    需求背景: 需要将 a = [1,2,3,4,5] 转换成  a = ['1','2','3','4','5'](整数型数组转换成字符型没找到直接的方法,思路就是先将数组转换成字符串,然后再将字符串转 ...

  6. Codeforces 799D Field expansion(随机算法)

    Field expansion [题目链接]Field expansion [题目类型]随机化算法 &题解: 参考自:http://www.cnblogs.com/Dragon-Light/p ...

  7. nodejs之querystring（查询字符串）

    querystring模块经常用在URL参数的处理,一共有四个方法: 1. stringify (字符串转对象) 2. parse (对象转字符串) 3. escape (对字符串进行URL编码) 4 ...

  8. 前端学习历程--js事件监听

    一.事件监听使用场景 1.事件触发多个方法的时候,后一个方法会把前一个方法覆盖掉. window.onload = function(){  var btn = document.getElement ...

  9. Docker 基础 (二)

    网络管理 容器网络模式 Docker支持5种网络模式 bridge 默认网络,Docker启动后默认创建一个docker0网桥,默认创建的容器也是添加到这个网桥中 host  容器不会获得一个独立的n ...

  10. day09 python之函数进阶

    楔子 假如有一个函数,实现返回两个数中的较大值: def my_max(x,y): m = x if x>y else y return mbigger = my_max(10,20)print ...