您的位置：首页 > Web前端 > JQuery

jQuery学习全面总结二

2014-07-24 14:53 489 查看

1.jQuery事件

一、事件

1、加载DOM

$(document).ready() 这个第一节里详细介绍了

2、事件绑定

jQuery定义了bind()方法作为统一的接口，用来为每一个匹配元素绑定事件处理程序。其基本语法：bind(type,[data],fn);

其中参数type表示事件类型，参数data是可选参数,它可以作为event.data属性值传递给事件对象的额外数据对象。参数fn表示事件处理函数。

例如下例中为p元素绑定单击事件，当点击不同段落文本的时候会提示不同段落文本的内容：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> toggle() </title>

<script src="jquery-2.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">



</script>

</head>

<body>

<input type="button" value="查看联系方式" onclick="">

</body>

</html></span>

如果希望向事件处理函数中传递更多的信息时，则可以把这些信息封装在一个对象结构中，然后把这个对象作为bind()方法的第二个参数，从而实现数据外与数据内进行数据通信。

例如在上面的示例基础上向其传递两个值A和B：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> New Document </title>

<script src="jquery-2.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">



</script>

</head>

<body>

<p>段落1</p>

<p>段落2</p>

<p>段落3</p>

</body>

</html></span>

我们可以将绑定事件简写成 $("p").click(function(){})

使用one()绑定事件

one() 是bind()的一个特例，由它绑定的事件在执行一次响应之后就失效。看个例子吧：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> toggle() </title>

<script src="jquery-2.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">



</script>

</head>

<body>

<input type="button" value="one绑定测试" onclick="">

</body>

</html></span>

也就是说one()方法绑定的事件执行一次之后就注销了，但是实际开发中有些场景下某些事件需要在特定情况下注销，而不是触发一次就注销。

对此，jQuery定义了专门注销事件的方法

各种事件

blur()	focus()	mousedown()	resize()
change()	keydown()	mousemove()	scroll()
click()	keypress()	mouseout()	select()
dblclick()	keyup()	mouseover()	submit()
error()	load()	mouseup()	unload()

3、注销事件

unbind()，该方法与bind()是对应的，能够从一个匹配元素中删除所有绑定的事件或者是删除指定的绑定事件。如果没有指定参数，那就删除所有。

参数：

第一个参数是事件类型

第二个参数是要移除的函数

如果没有参数，则删除所有绑定的事件，如果提供了事件类型作为参数，那么只删除该类型的绑定事件

应该不算常用吧。

4、合成事件

jQuery有两个合成事件----hover()和toggle(),这两个方法都是jQuery自定义的方法

(1)、hover()方法

语法结构为 hover(enter,leave)

hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数，离开时触发第二个函数。

这个函数很好理解，而且实际开发中会有很多妙用。

举个最简单的例子：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> hover() </title>

<script src="jquery-2.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">



</script>

</head>

<body>

<span >三国杀杀天下</span>

</body>

</html></span>

(2)、toggle()方法

语法结构 toggle(fn1,fn2,fn3...fnN)

toggle()方法用于模拟鼠标连续单击事件，第一次单击事件触发指定的第一个函数，第二次就触发第二个函数.... 如果有更多的函数则依次触发，直到最后一个。随后的每次单击都是对这几个函数的轮番调用。

看到这个方法第一想到的是toggleClass() 用于给元素对象切换样式。

toggle方法也是挺好理解的，以前项目中倒是没有应用过。举个例子：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> unbind() </title>

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

<script type="text/javascript">



</script>

</head>

<body>

<h1>三国杀变态武将</h1>

<div >

<ul>

</ul>

</div>

<input type="button" value="连续点击按钮可切换事件" >

</body>

</html></span>

注意：在上例中引用的jquery库不是以前常用的jquery-2.1.0.min.js了，是因为在jquery1.9版本中将toggle()的切换功能去掉了,现在toggle这个功能只能控制元素的显隐。

6、自定义事件

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> 自定义事件 </title>

<script src="jquery-2.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">



</script>

</head>

<body>

<input type="button" value="jQuery自定义事件" >

</body>

</html></span>

6、事件对象的属性

jQuery的Event对象的属性和方法

属性/方法	说明
type	获取事件的类型，如click、mouseover等，返回值为事件类型的名称。
target	发生事件的节点。一般利用该属性来获取当前被激活事件的具体对象。
relatedTarget	引用与事件的目标节点相关的节点。对于mouseover事件来说，他是鼠标指针移到某目标上时所离开的那个节点；对于mouseout来说就是离开目标时鼠标指针要进入到的那个目标
altKey	表示在声明鼠标事件的时候是否按下了【alt】键。如果返回值为true，则表示按下
ctrlKey	表示在声明鼠标事件的时候是否按下了【ctrl】键。如果返回值为true，则表示按下
shiftKey	表示在声明鼠标事件的时候是否按下了【shift】键。如果返回值为true，则表示按下
metaKey	表示在声明鼠标事件的时候是否按下了【meta】键。如果返回值为true，则表示按下
which	当在声明mousedown、mouseup时，显示鼠标键的状态值，也就是说哪个鼠标键改变了它的状态，返回值为1，表示按下左键，返回值为2，表示按下中键，返回值为3，表示按下右键
which	当在声明keydown和keypress事件时，显示触发事件的键盘键的数字编码
pageX	对于鼠标事件来说,指定鼠标指针相对于页面原点的水平坐标
pageY	对于鼠标事件来说,指定鼠标指针相对于页面原点的垂直坐标
screenX	对于鼠标事件来说,指定鼠标指针相对于屏幕原点的水平坐标
screenY	对于鼠标事件来说,指定鼠标指针相对于屏幕原点的垂直坐标
data	存储事件处理函数第二个参数所传递的额外数据
preventDefault()	取消可能引起任何语义操作的事件，如元素特定事件类型的默认操作，例如取消submit默认的表单提交操作
stopPropagation()	防止事件沿着DOM树向上传播，可以防止事件冒泡的发生

7、事件冒泡

(1)、什么是事件冒泡

假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都绑定了click事件。同事body元素也绑定了click事件。

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> 事件冒泡 </title>

<script src="jquery-2.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">



</script>

</head>

<body >

<h3>div作用范围外</h3>

<div id="" class="">

<h3>div作用范围内</h3>

<input type="button" value="div内的一个按钮" onclick="">

<h3>div作用范围内</h3>

</div>

<h3>div作用范围外</h3>

<div id="msg" class="">

</div>

</body>

</html></span>

下面几个图分别是初始页面、点击按钮、点击非按钮的div作用范围、点击div作用范围外的效果图：

之所以称为冒泡，就是因为事件像气泡一样不断向上直到顶部。

(2)、事件冒泡引发的问题：

就像上面那个例子，我们单击了div内按钮，只想触发按钮的单击事件，但是实际结果在我们的预料之外，所以我们必须限定事件的作用范围。

为了解决这个问题，有两个个办法：

A、通过事件对象(event)的stopPropagation()方法

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"> //为input元素绑定click事件

$('input').click(function(event){

var txt=$('#msg').html()+"<p>div内的按钮被点击.</p>";

$('#msg').html(txt);

event.stopPropagation();//停止事件冒泡

})</span>

改完之后单击按钮变成如图：

B、也可以在事件处理函数执行后加上return false;来防止事件冒泡。

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"> //为input元素绑定click事件

$('input').click(function(){

var txt=$('#msg').html()+"<p>div内的按钮被点击.</p>";

$('#msg').html(txt);

return false;

})</span>

8、事件委派与解除委派

live()与die()

例子：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> 事件委派与解除委派 </title>

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

<script type="text/javascript">



</script>

</head>

<body >

<input type="button" value="解除事件绑定">

<p>段落文本</p>

</body>

</html></span>

9、事件命名空间

jQuery支持事件命名空间以方便管理事件。例如，在下面示例中为div元素绑定多个事件类型，然后使用命名空间进行规范，从而方便管理。所谓事件命名空间，就是在事件类型后面以点语法附加一个别名，以便于引用事件，如，click.a ，其中a就是click当前事件的别名。

如下示例：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> jQuery命名空间 </title>

<script src="jquery-2.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">



</script>

</head>

<body >

<div id="" class="">

jQuery命名空间

</div>

</body>

</html></span>

我们为div绑定的几个事件都指定了命名空间，这样在删除事件的时候，就可以直接指定命名空间即可。例如调用下面一行代码就可以把上面绑定的事件全部删除：

$("div").unbind(".a");

同样，假如我们为click事件类型指定了不同的命名空间，那么当我们只想删一个的时候只要指定它的命名空间即可。

10、绑定多个事件

我们可以为同一元素绑定多个事件，既可以是同类型的也可以是不同类型的。

2.jQuery动画

1、最简单的动画：显隐效果

CSS支持两种方法显示和隐藏元素，即使用visibility或display样式，他们控制元素显示和隐藏的时候效果相同，但是结果却不同。

具体说明如下：

visibility 属性在隐藏元素的时候，同时会保存元素在文档流中的影响力，隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。

display 隐藏后，隐藏的元素不再占用文档的位置。

注：这块比较巧，这个样式属性正好帮了我一个忙，事情是这样的：

在这个页面中有设备类型的列表框和抓包网口的多选框，要求选择设备类型选择千兆的时候显示4个抓包网口，选择万兆的时候隐藏掉eth3和eth4两个网口。

我当时第一做法就是把eth3和eth4用span元素包裹，然后选择万兆的时候触发事件让span执行hide()方法。这样就把后两个网口隐藏了，但是有一个问题，当hide()后，页面结

构变乱了，测试部又说不能用disabled="disabled"只读属性代替，正想找个时间让美工帮调一下。晚上看会书就看到了visibility 这个样式属性，正好就用上了。

在jQuery中定义了show()和hide()两种方法进行元素的索引。其实这俩方法内部就是对元素的display样式进行操作。

show()和hide()方法还可以设置参数，第一个参数代表(隐藏)的速度,参数值越小越快(可以是具体的值，如1000代表1000ms,也可以是预定义的字符串：slow、normal、st，分

别代表600 400 和200)，第二个参数也是一个可选参数,表示在动画演示完毕要调用的回调函数。

示例：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> show和hide </title>

<script src="jquery-2.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">



</script>

</head>

<body >

<input type="button" value="隐藏元素" >

<div id="" class=""><h1>div元素</h1></div>

</body>

</html></span>

再看个不带回调函数的：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;">$(function(){

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

$(this).animate({left: "+=500px"}, 3000);

})

})</span>

(3)、多重动画

A、同时执行多个动画

上面的例子只控制了left属性的变化，这回我们在控制left属性的时候同时控制元素高度变为200px

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;">$(function(){

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

$(this).animate({left: "500px",height:"200px"}, 3000);

})

})</span>

B、顺序执行动画

上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度，那很简单，只需要把上面的animate()方法拆开写成两个即可

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;">$(function(){

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

$(this).animate({left: "500px"},3000)

.animate({height:"200px"},1000);

})

})</span>

(4)、综合动画

接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度，并将它的不透明度从50%切换到100%。然后再让它从上向下移动，同时它的宽度变大，当完成这

些效果后让它以淡出的方式隐藏掉。

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;">$(function(){

$("#panel").css("opacity",0.5);//设置不透明度

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

$(this).animate({left: "400px",height:"200px",opacity:"1"},3000)

.animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});

})

})</span>

这样就把css方法加入到动画队列中了。

5、停止动画和判断是否处于动画状态

(1)、停止元素的动画

stop([clearQueue][,gotoEnd]) 两个都是可选参数，都是boolean类型

参数说明：

clearQueue：代表是否清空未执行完的动画队列

gotoEnd ：代表是否将正在执行的动画跳到末状态

通过一个综合的示例就可以弄明白stop()方法的这两个参数了：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Panel</title>

<style type="text/css">

*{margin:0;padding:0;}

body { font-size: 13px; line-height: 130%; padding: 60px }

#panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}

.head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}

.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}

</style>

<script src="../../../scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("button:eq(0)").click(function () {

$("#panel")

.animate({height : "150" } , 2000 )

.animate({width : "300" } , 2000 )

.hide(3000)

.animate({height : "show" , width : "show" , opacity : "show" } , 2000 )

.animate({height : "500"} , 2000 );

});

$("button:eq(1)").click(function () {

$("#panel").stop();//停止当前动画，继续下一个动画

});

$("button:eq(2)").click(function () {

$("#panel").stop(true);//清除元素的所有动画

});

$("button:eq(3)").click(function () {

$("#panel").stop(false,true);//让当前动画直接到达末状态，继续下一个动画

});

$("button:eq(4)").click(function () {

$("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态

});

})

</script>

</head>

<body>

<button>开始一连串动画</button>

<button>stop()</button>

<button>stop(true)</button>

<button>stop(false,true)</button>

<button>stop(true,true)</button>

<div id="panel">

<h5 class="head">三国杀杀天下</h5>

<div class="content">

夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情

</div>

</div>

</body>

</html></span>

(2)、判断元素是否处于动画状态

当使用animate()方法的时候，要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时，就会出现动画累积。

解决办法是判断元素是否正在处于动画状态，当不处于动画状态的时候，才为元素添加新的动画。

用法：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;">if(!$(element).is(":animated")){

//添加新的动画

}</span>

6、其他动画方法

除了上面提到的动画方法，jquery中还有3个专门用于交互的动画方法

toggle(speed[,callback]) 切换元素可见状态，用来代替hide()和show()的。

slideToggle(speed[,callback])通过调整元素高度来切换可见状态，代替slideUp和slideDown的。

fadeTo(speed,opacity[,callback])将元素的不透明度渐变的调整到某一值。

3.jQuery几个经典表单应用

1、文本框获得(失去)焦点

当文本框获得输入焦点时,将该文本框高亮显示，算不得一个应用，只是一个小技巧，可以提高用户体验。

[html] view
plaincopy

2、Elastic弹性文本域

Elastic是一款功能专一的表单插件，他可以控制页面内表单域(<textarea>)标签高度自动伸缩，以适应包含的文本。应用这个插件的时候页面需要引入jquery.elastic.source.js。

插件下载地址：点击进入下载页面

[html] view
plaincopy

我们最初设置的<textarea>标签的rows属性值为2 ,随着文本内容的增多高度会自动增加，当然了，随着内容的减少也可以高度降低的。

3、Autotab自动Tab文本框

Autotab也是一款功能专一的表单插件，它提供了自动跳格的功能，当用户输入的字符数一旦超过已定义的最大长度，则会根据事先设置的目标自动跳转到相应元素上，省却了

用户按【Tab】键的麻烦。最典型的应用就是输入IP地址、软件激活码等地方了，我们做的web项目中也有很多地方可以用到这插件，对于提高用户体验还是很有帮助的。

使用时需要引入jquery.autotab.js,下载地址：点击进入下载页面

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;">$(function(){

$('#autotab').submit(function(){

return false;

});

$('#autotab :input').autotab_magic().autotab_filter('numeric');

})</span>

就是只能输入数字了。

4、passwordStrength密码强度指标

passwordStrength插件能够根据用户输入的密码,以图形化方式显示密码的强度。

[html] view
plaincopy

执行效果图：

5、formToWizard表单填充向导

这个是什么意思呢？其实我们实际见的也很多，有很多网站填写注册信息的时候是分步进行的，比方说，先填写个人信息，然后再填写工作信息...然后一起提交。这就避免了庞

大的信息量都在一个页面上进行填写。

formToWizard就是解决这个问题的一个小插件，插件下载地址:点击进入下载页面

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> New Document </title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery-2.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript" src="formToWizard.js"></script>

<script type="text/javascript">

//页面加载方法

$(function(){

$("#form1").formToWizard({ submitButton: 'SaveAccount' })

})

</script>

<style type="text/css">

#wrap { margin:1em 4em; font-size:12px; padding:1em 1em; border:solid 1px #fff; }

fieldset { border:none; width:320px; }

legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold; }

label { display:block; margin:15px 0 5px; }

input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000; }

.prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none; }

.prev:hover, .next:hover { background-color:#000; text-decoration:none; }

.prev { float:left; }

.next { float:right; }

#steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px; }

#steps li { font-size:24px; float:left; padding:10px; color:#b0b1b3; }

#steps li span { font-size:11px; display:block; }

#steps li.current { color:#000; }

#makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px; }

#makeWizard:hover { background-color:#000; }

</style>

</head>

<body>

<div id="wrap">

<form id="form1" action="">

<fieldset>

<legend>登录信息</legend>

<label for="Name">昵称</label>

<input id="Name" type="text" />

<label for="Email">Email</label>

<input id="Email" type="text" />

<label for="Password">密码</label>

<input id="Password" type="password" />

</fieldset>

<fieldset>

<legend>公司信息</legend>

<label for="CompanyName">公司名称</label>

<input id="CompanyName" type="text" />

<label for="Website">公司网址</label>

<input id="Website" type="text" />

<label for="CompanyEmail">公司邮箱</label>

<input id="CompanyEmail" type="text" />

</fieldset>

<fieldset>

<legend>个人信息</legend>

<label for="NameOnCard">真实姓名</label>

<input id="NameOnCard" type="text" />

<label for="CardNumber">身份证号</label>

<input id="CardNumber" type="text" />

<label for="CreditcardMonth">发卡日期</label>

<select id="CreditcardMonth">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

</select>

<select id="CreditcardYear">

<option value="2009">2009</option>

<option value="2010">2010</option>

<option value="2011">2011</option>

</select>

<label for="Address1">地址1</label>

<input id="Address1" type="text" />

<label for="Address2">地址2</label>

<input id="Address2" type="text" />

<label for="City">城市</label>

<input id="City" type="text" />

<label for="Country">国家</label>

<select id="Country">

<option value="CA">Canada</option>

<option value="US">United States of America</option>

<option value="GB">United Kingdom (Great Britain)</option>

<option value="AU">Australia</option>

<option value="JP">Japan</option>

</select>

</fieldset>

<div>

<input id="SaveAccount" type="button" value="提交表单" />

</div>

</div>

</form>

</body>

</html>

</span>

效果图：

6、checkbox复选框(全选反选等操作)

以前经常用，不说了。

7、下拉框的应用

这回先看个图：

大家肯定都见过类似效果的网页，怎么实现的呢,代码很简单：

[html] view
plaincopy

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

* { margin:0; padding:0; }

div.centent {

float:left;

text-align: center;

margin: 10px;

}

span {

display:block;

margin:2px 2px;

padding:4px 10px;

background:#898989;

cursor:pointer;

font-size:12px;

color:white;

}

</style>



<script src="jquery-2.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

//移到右边

$('#add').click(function() {

//获取选中的选项，删除并追加给对方

$('#select1 option:selected').appendTo('#select2');

});

//移到左边

$('#remove').click(function() {

$('#select2 option:selected').appendTo('#select1');

});

//全部移到右边

$('#add_all').click(function() {

//获取全部的选项,删除并追加给对方

$('#select1 option').appendTo('#select2');

});

//全部移到左边

$('#remove_all').click(function() {

$('#select2 option').appendTo('#select1');

});

//双击选项

$('#select1').dblclick(function(){ //绑定双击事件

//获取全部的选项,删除并追加给对方

$("option:selected",this).appendTo('#select2'); //追加给对方

});

//双击选项

$('#select2').dblclick(function(){

$("option:selected",this).appendTo('#select1');

});

});

</script>

</head>

<body>

<div class="centent">

<select multiple="multiple" id="select1" style="width:100px;height:160px;">

<option value="1">曹操</option>

<option value="2">曹昂</option>

<option value="3">曹丕</option>

<option value="4">曹彰</option>

<option value="5">曹植</option>

<option value="6">曹熊</option>

<option value="7">曹仁</option>

<option value="8">曹洪</option>

<option value="9">曹休</option>

<option value="10">曹真</option>

<option value="11">曹爽</option>

</select>

<div>

<span id="add" >选中添加到右边>></span>

<span id="add_all" >全部添加到右边>></span>

</div>

</div>

<div class="centent">

<select multiple="multiple" id="select2" style="width: 100px;height:160px;">

<option value="12">曹芳</option>

</select>

<div>

<span id="remove"><<选中删除到左边</span>

<span id="remove_all"><<全部删除到左边</span>

</div>

</div>

</body>

</html></span>

代码实现的功能：

1)、将选中的选项添加给对方

2)、将全部选项添加给对方

3)、双击某个选项将其添加给对方

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航