1.下载jQuery，并导入：https://blog.csdn.net/weixin_44718300/article/details/88746796

2.代码实现：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<!--

			步骤:

				1. 导入JQ的文件

				2. 文档加载函数 :页面初始化

				3.确定事件 :　点击事件　onclick

				4. 事件触发函数

					1. 移动被选中的那一项到右边

		-->

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

		<script>

			$(function(){

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

					//找到被选中的那一项

					//将被选中项添加到右边

					$("#rightSelect").append($("#leftSelect option:selected"));

				});

				//将左边所有商品移动到右边

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

					$("#rightSelect").append($("#leftSelect option"));

				});

			});

		</script>

	</head>

	<body>

		<table border="1px" width="400px">

			<tr>

				<td>分类商品</td>

				<td>

					<!--左边-->

					<div style="float: left;">

						已有商品<br />

						<select multiple="multiple" id="leftSelect">

							<option>华为</option>

							<option>小米</option>

							<option>锤子</option>

							<option>oppo</option>

						</select>

						<br />

						<a href="#" id="a1" > &gt;&gt; </a> <br />

						<a href="#" id="a2"> &gt;&gt;&gt; </a>

					</div>

					<!--右边-->

					<div style="float: right;">

						未有商品<br />

						<select multiple="multiple" id="rightSelect">

							<option>苹果6</option>

							<option>肾7</option>

							<option>诺基亚</option>

							<option>波导</option>

						</select>

						<br />

						<a href="#"> &lt;&lt; </a> <br />

						<a href="#"> &lt;&lt;&lt; </a>

					</div>

				</td>

			</tr>

		</table>

	</body>

</html>

jQuery元素的左右移动的更多相关文章

  1. 深入学习jQuery元素过滤

    × 目录 [1]索引过滤 [2]内容过滤 前面的话 过滤是jQuery扩展的一个重要的内容.jQuery选择器中的一个重要部分就是过滤选择器.除了过滤选择器,还有专门的元素过滤的方法.本文将详细介绍j ...

  2. jquery元素插入、删除、清空

    1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...

  3. 获取元素的xpath, 转换xpath为csspath进行jQuery元素获取

    获取元素的xpath, 转换xpath为csspath进行jQuery元素获取 博客分类: 编程心得 jQueryCSSHTML  var $shadow = new Object(); /** 获取 ...

  4. JQuery元素获取

    前言:这是本类别博文JQuery即用即查开篇. 因为查手册太麻烦,而且有时候需要深入命令所在详细页面才能了解此命令的具体作用是什么. 写这几篇文章就是为了,工作遇到问题时,一看这几篇文章就可以查到哪个 ...

  5. jquery元素定位方法

    用chrome浏览器打开页面,按f12调出开发者调试模式,查看elements,部分代码如下图所示,注意红框部分 假设我们要查找某些元素的位置,用鼠标移到那部分元素,调试器会自动用蓝颜色标示选中部分的 ...

  6. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  7. javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）

    主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...

  8. jquery元素插入、删除、清空、找父子级元素

    1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...

  9. jquery元素节点操作

    jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...

  10. [Web 前端] 029 jQuery 元素的“节操”

    目录 jQuery 元素的节点操作 1. 创建节点 2. 插入节点 2.1 在现存元素的内部,从后面插入元素 2.2 在现存元素的内部,从前面插入元素 2.3 在现存元素的外部,从后面插入元素 2.4 ...

随机推荐

  1. SSH框架系列：Spring配置多个数据源

    分类: [java]2013-12-09 16:59 1247人阅读 评论(0) 收藏 举报 1.问题的引入 对于普通的SSH框架而言,一般配置一个数据源,一个SessionFactory,一个事务管 ...

  2. Vue3中的Proxy作用在哪里？

    目录 前言 Vue没有Proxy会怎么样? proxy开始 前言 在讲解Proxy之前,我们有些前置知识点是必要掌握的: Object相关静态函数 Reflect相关静态函数 简单说明知识盲点 名称 ...

  3. 设备树DTS 学习：1-有关概念

    背景 设备树在Linux驱动开发中是一种比较常用的架构. 参考:<设备树DTS使用总结> .<linux内核设备树及编译> Linux设备树 介绍 在Linux 2.6中,ar ...

  4. P1093 字符串A+B

    1093 字符串A+B (20分)   给定两个字符串 A 和 B,本题要求你输出 A+B,即两个字符串的并集.要求先输出 A,再输出 B,但重复的字符必须被剔除. 输入格式: 输入在两行中分别给出  ...

  5. HTML学习第七天（二）

    HTML学习第七天(二) 新增的非主体结构 header元素 footer元素 hgroup元素 address元素 header元素:通常用于存放整个页面或页面内的一个区域块的标题,但也可以存放类似 ...

  6. 51nod 1163：最高的奖励 优先队列

    1163 最高的奖励 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 有N个任务,每个任务有一个最晚结束时间以及一个对应的奖励.在结束时间之前完成该 ...

  7. 旧iPhone遭禁，会让苹果产业链迎来新转机吗？

    过去几个月,苹果的日子并不好过,先是新iPhone定价过高导致销售疲软,股价连续下跌,万亿市值失守,被微软和亚马逊超越:手机销量上则被华为赶超,整个iPhone产业链都有点儿"哀鸿遍野&qu ...

  8. XV6源代码阅读-中断与系统调用

    Exercise1 源代码阅读 1.启动部分: bootasm.S bootmain.c 和xv6初始化模块:main.c bootasm.S 由16位和32位汇编混合编写成的XV6引导加载器.boo ...

  9. Python连载61-tkinter三种布局

    一.pack布局举例 #pack布局案例 import tkinter baseFrame = tkinter.Tk() #以下代码都是创建一个组件,然后布局 btn1 = tkinter.Butto ...

  10. 吴裕雄--天生自然java开发常用类库学习笔记：NumberFormat

    import java.text.* ; public class NumberFormatDemo01{ public static void main(String args[]){ Number ...