jQuery监听事件经典例子
关键字:jQuery监听事件经典例子
js代码:
============================================================
$(function(){
$("#s1 option:first,#s2 option:first").attr("selected",true);
$("#s1").dblclick(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");
so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
$("#s2").append(so);
});
$("#s2").dblclick(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");
so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
$("#s1").append(so);
});
$("#add").click(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");
so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
$("#s2").append(so);
});
$("#remove").click(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");
so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
$("#s1").append(so);
});
$("#addall").click(function(){
$("#s2").append($("#s1 option").attr("selected",true));
});
$("#removeall").click(function(){
$("#s1").append($("#s2 option").attr("selected",true));
});
$("#s1up").click(function(){
var so = $("#s1 option:selected");
if(so.get(0).index!=0){
so.each(function(){
$(this).prev().before($(this));
});
}
});
$("#s1down").click(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");
if(so.get(so.length-1).index!=alloptions.length-1){
for(i=so.length-1;i>=0;i--)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});
$("#s2up").click(function(){
var so = $("#s2 option:selected");
if(so.get(0).index!=0){
so.each(function(){
$(this).prev().before($(this));
});
}
});
$("#s2down").click(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");
if(so.get(so.length-1).index!=alloptions.length-1){
for(i=so.length-1;i>=0;i--)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});
});
jQuery监听事件经典例子的更多相关文章
- jquery实现拖拽以及jquery监听事件的写法
很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...
- jquery监听事件on写法以及简单的拖拽效果
引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- Android 属性动画监听事件与一个菜单的例子
简单监听事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 3 ...
- jquery的监听事件和触发事件
监听事件 $(selector).on('Event me',function(e){ //do something }) 触发事件 $(selector).trigger('Event name') ...
- jquery中,使用append增加元素时,该元素的绑定监听事件失效
举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...
- jquery中,使用append增加新元素时,新增元素的绑定监听事件失效的解决办法
$("outerSelector").on("eventType","innerSelector",function(){}); 举例:如果 ...
- 一步一步学android之事件篇——单选按钮监听事件
在平常使用软件的时候,我们经常会碰见一些选择题,例如选择性别的时候,在男和女之间选,前面说过这个情况要用RadioGroup组件,那么点击了之后我们该怎么获取到选择的那个值呢,这就是今天要说的OnCh ...
- js监听事件 上滑消失下滑出现的效果 触摸与手势事件
https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...
随机推荐
- C++对C的实用性增强
#include <iostream> using namespace std; //C语言中的变量都必须在作用域开始的位置定义!! //C++中更强调语言的"实用性" ...
- Android开发学习之路--Android系统架构初探
环境搭建好了,最简单的app也运行过了,那么app到底是怎么运行在手机上的,手机又到底怎么能运行这些应用,一堆的电子元器件最后可以运行这么美妙的界面,在此还是需要好好研究研究.这里从芯片及硬件模块-& ...
- 最简单的基于FFmpeg的视频编码器-更新版(YUV编码为HEVC(H.265))
===================================================== 最简单的基于FFmpeg的视频编码器文章列表: 最简单的基于FFMPEG的视频编码器(YUV ...
- SQL 2012 Always On 为 MSCRMSqlClrLogin SQL 登录名创建非对称密钥时报语法错误
根据实施手册中的下图的SQL在为MSCRMSqlClrLogin 创建非对称秘钥时报语法错误,具体的错误在就path那,调了多次还是报错,索性就把SQL拆开执行. 先执行这条 SELECT * FRO ...
- FFmpeg获取DirectShow设备数据(摄像头,录屏)
这两天研究了FFmpeg获取DirectShow设备数据的方法,在此简单记录一下以作备忘.本文所述的方法主要是对应Windows平台的. 1. 列设备 ffmpeg -list_devic ...
- 1022. Digital Library (30) -map -字符串处理
题目如下: A Digital Library contains millions of books, stored according to their titles, authors, key w ...
- Flexbox布局指南
Flexbox布局概念 Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的 ...
- UIPassValue页面传值 UI_08(下)
2.从前一个界面到后一个界面 注意:解题思路 葵花宝典:属性传值 第一步:在下一个界面视图控制器的.h文件中定义一个属性 第二步:在push之前将数据存储到属性中 第三步:取出属性中的值让控件 ...
- TCP的ACK确认系列 — 发送状态转换机
主要内容:TCP的ACK发送方式,以及ACK发送状态转换机的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 概述 TCP采用两种方式来发送ACK: ...
- XBMC源代码分析 2:Addons(皮肤Skin)
前文已经对XBMC源代码的整体架构进行了分析: XBMC源代码分析 1:整体结构以及编译方法 从这篇文章开始,就要对XBMC源代码进行具体分析了.首先先不分析其C++代码,分析一下和其皮肤相关的代码. ...