jQuery元素的左右移动
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" > >> </a> <br />
<a href="#" id="a2"> >>> </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="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
</table>
</body>
</html>
jQuery元素的左右移动的更多相关文章
- 深入学习jQuery元素过滤
× 目录 [1]索引过滤 [2]内容过滤 前面的话 过滤是jQuery扩展的一个重要的内容.jQuery选择器中的一个重要部分就是过滤选择器.除了过滤选择器,还有专门的元素过滤的方法.本文将详细介绍j ...
- jquery元素插入、删除、清空
1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...
- 获取元素的xpath, 转换xpath为csspath进行jQuery元素获取
获取元素的xpath, 转换xpath为csspath进行jQuery元素获取 博客分类: 编程心得 jQueryCSSHTML var $shadow = new Object(); /** 获取 ...
- JQuery元素获取
前言:这是本类别博文JQuery即用即查开篇. 因为查手册太麻烦,而且有时候需要深入命令所在详细页面才能了解此命令的具体作用是什么. 写这几篇文章就是为了,工作遇到问题时,一看这几篇文章就可以查到哪个 ...
- jquery元素定位方法
用chrome浏览器打开页面,按f12调出开发者调试模式,查看elements,部分代码如下图所示,注意红框部分 假设我们要查找某些元素的位置,用鼠标移到那部分元素,调试器会自动用蓝颜色标示选中部分的 ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- 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.数组插入.删除 ...
- jquery元素插入、删除、清空、找父子级元素
1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...
- jquery元素节点操作
jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...
- [Web 前端] 029 jQuery 元素的“节操”
目录 jQuery 元素的节点操作 1. 创建节点 2. 插入节点 2.1 在现存元素的内部,从后面插入元素 2.2 在现存元素的内部,从前面插入元素 2.3 在现存元素的外部,从后面插入元素 2.4 ...
随机推荐
- Monkey自动化测试命令
adb shell monkey –p com.baidu.yuedu -s 123 --throttle 2000 --ignore-crashes --ignore-security-exce ...
- bsearch的使用
懒得写二分查找,结果发现stdlib里自带了二分查找. C 库函数 void *bsearch(const void *key, const void *base, size_t nitems, si ...
- HTML学习第七天（二）
HTML学习第七天(二) 新增的非主体结构 header元素 footer元素 hgroup元素 address元素 header元素:通常用于存放整个页面或页面内的一个区域块的标题,但也可以存放类似 ...
- 2-10 就业课(2.0)-oozie：11、hadoop的federation（联邦机制，了解一下）
==================================================== Hadoop Federation 背景概述 单NameNode的架构使得HDFS在集群扩展性 ...
- vim修改缩进问题
- KMP【模板】 && 洛谷 P3375
题目传送门 解题思路: 首先说KMP的作用:对于两个字符串A,B(A.size() > B.size()),求B是否是A的一个字串或B在A里的位置或A里有几个B,说白了就是字符串匹配. 下面创设 ...
- 0203 生成mysql的数据库的数据字典
原理 项目的数据库字典表是一个很重要的文档.通过此文档可以清晰的了解数据表结构及开发者的设计意图. 通常为了方便我都是直接在数据库中建表,然后通过工具导出数据字典. 在Mysql数据库中有一个info ...
- 使用python将请求的requests headers参数格式化方法
import json # 使用三引号将浏览器复制出来的requests headers参数赋值给一个变量 headers = """ Host: zhan.qq.com ...
- 003.Oracle数据库 , 查询日期格式格式化
/*日期格式转换*/ SELECT TO_CHAR( OCCUR_DATE, 'yyyy/mm/dd hh24:mi:ss' ) FROM LM_FAULT WHERE ( ( OCCUR_DATE ...
- docker安装centos7镜像
拉取centos7镜像[root@localhost ~]# docker pull centos:71启动镜像centos7,如果不指定 /bin/bash,容器运行后会自动停止[root@loca ...