程序博客网 > 哪种编程语言最简单

jQuery学习全面总结二

来源：互联网 发布：哪种编程语言最简单 编辑：程序博客网 时间：2024/05/05 06:40

1.jQuery事件


一、事件

1、加载DOM

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

2、事件绑定

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

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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> toggle() </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("input[type='button']").one("click",function(){  
  10.                 $(this).val('15210221200');  
  11.             })  
  12.         })  
  13.           
  14.   //-->  
  15.   </script>  
  16.  </head>  
  17.  <body>  
  18.     <input type="button" value="查看联系方式" onclick="">  
  19.  </body>  
  20. </html></span>  
如果希望向事件处理函数中传递更多的信息时，则可以把这些信息封装在一个对象结构中，然后把这个对象作为bind()方法的第二个参数，从而实现数据外与数据内进行数据通信。

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("p").bind("click",{a:"A",b:"B"},function(event){  
  10.                 $(this).text(event.data.a+event.data.b);  
  11.             })  
  12.         })  
  13.   //-->  
  14.   </script>  
  15.  </head>  
  16.  <body>  
  17.     <p>段落1</p>  
  18.     <p>段落2</p>  
  19.     <p>段落3</p>  
  20.  </body>  
  21. </html></span>  
我们可以将绑定事件简写成 $("p").click(function(){})

使用one()绑定事件

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> toggle() </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("input[type='button']").one("click",function(){  
  10.                 alert($(this).val());  
  11.             })  
  12.         })  
  13.           
  14.   //-->  
  15.   </script>  
  16.  </head>  
  17.  <body>  
  18.     <input type="button" value="one绑定测试" onclick="">  
  19.  </body>  
  20. </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在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> hover() </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("span").hover(  
  10.                 function(){  
  11.                     $("span").text("光标在我身上");  
  12.                 },  
  13.                 function(){  
  14.                     $("span").text("光标跑了~~")  
  15.                 }  
  16.             )  
  17.         })  
  18.   //-->  
  19.   </script>  
  20.  </head>  
  21.  <body>  
  22.     <span >三国杀杀天下</span>  
  23.  </body>  
  24. </html></span>  
(2)、toggle()方法

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

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

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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> unbind() </title>  
  5.   <script  src="jquery-1.8.3.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("input").toggle(  
  10.                 function(){$("ul").append($("<li><h2>左  慈</h2></li>"))},  
  11.                 function(){$("ul").append($("<li><h2>曹  冲</h2></li>"))},  
  12.                 function(){$("ul").append($("<li><h2>神周瑜</h2></li>"))},  
  13.                 function(){$("ul").append($("<li><h2>神曹操</h2></li>"))},  
  14.                 function(){$("ul").append($("<li><h2>孙尚香</h2></li>"))},  
  15.                 function(){$("ul").append($("<li><h2>神关羽</h2></li>"));$(this).unbind()}  
  16.             )  
  17.       
  18.         })        
  19.   //-->  
  20.   </script>  
  21.  </head>  
  22.  <body>  
  23.     <h1>三国杀变态武将</h1>  
  24.     <div >  
  25.         <ul>  
  26.               
  27.         </ul>  
  28.     </div>  
  29.   
  30.     <input type="button" value="连续点击按钮可切换事件" >  
  31.  </body>  
  32. </html></span>  
注意：在上例中引用的jquery库不是以前常用的jquery-2.1.0.min.js了，是因为在jquery1.9版本中将toggle()的切换功能去掉了,现在toggle这个功能只能控制元素的显隐。

6、自定义事件

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> 自定义事件 </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("input").bind("delay",function(event){  
  10.                 setTimeout(function(){  //延迟执行  
  11.                     alert(event.type);  
  12.                 },2000)  
  13.             });  
  14.   
  15.             $("input").click(function(){  
  16.                 $("input").trigger("delay");  
  17.             })        
  18.         })    
  19.   //-->  
  20.   </script>  
  21.  </head>  
  22.   
  23.  <body>  
  24.     <input type="button" value="jQuery自定义事件" >  
  25.  </body>  
  26. </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在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> 事件冒泡 </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             //为input元素绑定click事件  
  10.             $('input').click(function(){  
  11.                 var txt=$('#msg').html()+"<p>div内的按钮被点击.</p>";  
  12.                 $('#msg').html(txt);  
  13.             })  
  14.             //为第一个div绑定click事件  
  15.             $('div').eq(0).click(function(){  
  16.                 var txt=$('#msg').html()+"<p>div作用范围发生点击.</p>";  
  17.                 $('#msg').html(txt);  
  18.             })  
  19.             //为body元素绑定click事件  
  20.             $('body').click(function(){  
  21.                 var txt=$('#msg').html()+"<p>body元素被单击.</p>";  
  22.                 $('#msg').html(txt);  
  23.             })  
  24.         })  
  25.   //-->  
  26.   </script>  
  27.  </head>  
  28.  <body >  
  29.     <h3>div作用范围外</h3>  
  30.     <div id="" class="">  
  31.         <h3>div作用范围内</h3>  
  32.         <input type="button" value="div内的一个按钮" onclick="">  
  33.         <h3>div作用范围内</h3>  
  34.     </div>  
  35.     <h3>div作用范围外</h3>  
  36.     <div id="msg" class="">  
  37.           
  38.     </div>  
  39.  </body>  
  40. </html></span>  

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


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

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

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

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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">   //为input元素绑定click事件  
  2.     $('input').click(function(event){  
  3.         var txt=$('#msg').html()+"<p>div内的按钮被点击.</p>";  
  4.         $('#msg').html(txt);  
  5.         event.stopPropagation();//停止事件冒泡  
  6.     })</span>  
改完之后单击按钮变成如图：



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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">   //为input元素绑定click事件  
  2.     $('input').click(function(){  
  3.         var txt=$('#msg').html()+"<p>div内的按钮被点击.</p>";  
  4.         $('#msg').html(txt);  
  5.         return false;  
  6.     })</span>  
8、事件委派与解除委派

live()与die()

例子：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> 事件委派与解除委派 </title>  
  5.   <script  src="jquery-1.8.3.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("p").live("click",function(){  
  10.                 $(this).after("<p>段落文字</p>");  
  11.             })  
  12.   
  13.             $("input").click(function(){  
  14.                 $("p").die();//不带参数就是解除live事件，如果带了参数type，那会移除相应的live事件，如果同时指定了第二个参数，则只能移除指定事件的处理函数。  
  15.             })  
  16.         })  
  17.   //-->  
  18.   </script>  
  19.  </head>  
  20.   
  21.  <body >  
  22.     <input type="button" value="解除事件绑定">  
  23.     <p>段落文本</p>  
  24.  </body>  
  25. </html></span>  
9、事件命名空间

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

如下示例：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> jQuery命名空间 </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("div").bind("click.a",function(){  
  10.                 $("body").append("<p>click事件<p/>")  
  11.             });  
  12.             $("div").bind("dblclick.a",function(){  
  13.                 $("body").append("<p>dblclick事件<p/>")  
  14.             });  
  15.             $("div").bind("mouseover.a",function(){  
  16.                 $("body").append("<p>mouseover<p/>")  
  17.             });  
  18.             $("div").bind("mouseout.a",function(){  
  19.                 $("body").append("<p>mouseout<p/>")  
  20.             });  
  21.         })  
  22.   //-->  
  23.   </script>  
  24.  </head>  
  25.   
  26.  <body >  
  27.     <div id="" class="">  
  28.         jQuery命名空间  
  29.     </div>  
  30.  </body>  
  31. </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在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> show和hide </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             var t=false;  
  10.             $("input").click(function(){  
  11.                 if(t){  
  12.                     $("div").show(1000,function(){  
  13.                         $("input").val('隐藏元素');  
  14.                     })  
  15.                     t=false;  
  16.                 }  
  17.                 else{  
  18.                     $("div").hide(1000,function(){  
  19.                         $("input").val('显示元素');  
  20.                     })  
  21.                     t=true;  
  22.                 }  
  23.             })  
  24.         })  
  25.   //-->  
  26.   </script>  
  27.  </head>  
  28.  <body >  
  29.     <input type="button" value="隐藏元素" >  
  30.     <div id="" class=""><h1>div元素</h1></div>  
  31.  </body>  
  32. </html></span>  
再看个不带回调函数的：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Panel</title>  
  6. <style type="text/css">  
  7. *{margin:0;padding:0;}    
  8. body { font-size: 13px; line-height: 130%; padding: 60px }  
  9. #panel { width: 300px; border: 1px solid #0050D0 }  
  10. .head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }  
  11. .content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }  
  12. </style>  
  13. <script src="../../scripts/jquery.js" type="text/javascript"></script>  
  14. <script type="text/javascript">  
  15. $(function(){  
  16.     $("#panel h5.head").toggle(function(){  
  17.          $(this).next().hide(600);  
  18.     },function(){  
  19.          $(this).next().show(600);  
  20.     })  
  21. })  
  22. </script>  
  23. </head>  
  24. <body>  
  25. <div id="panel">  
  26.     <h5 class="head">三国杀杀天下</h5>  
  27.     <div class="content">  
  28.         夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情  
  29.     </div>  
  30. </div>  
  31. </body>  
  32. </html></span>  
2、淡入淡出

fadeIn()和fadeOut()方法，这两个方法是在一定时间内改变元素的不透明度，直到元素完全消失(或者出现)，语法与show()和hide()相同。

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Panel</title>  
  6. <style type="text/css">  
  7. *{margin:0;padding:0;}    
  8. body { font-size: 13px; line-height: 130%; padding: 60px }  
  9. #panel { width: 300px; border: 1px solid #0050D0 }  
  10. .head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }  
  11. .content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }  
  12. </style>  
  13. <script src="../../scripts/jquery.js" type="text/javascript"></script>  
  14. <script type="text/javascript">  
  15. $(function(){  
  16.     $("#panel h5.head").toggle(function(){  
  17.          $(this).next().fadeOut(1000,function(){  
  18.             alert('回调函数')  
  19.          });  
  20.     },function(){  
  21.          $(this).next().fadeIn(1000);  
  22.     })  
  23. })  
  24. </script>  
  25. </head>  
  26. <body>  
  27. <div id="panel">  
  28.     <h5 class="head">三国杀杀天下</h5>  
  29.     <div class="content">  
  30.         夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情  
  31.     </div>  
  32. </div>  
  33. </body>  
  34. </html></span>  
3、伸缩

slideUp()和slideDown()方法  用法与上两组函数相同

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Panel</title>  
  6. <style type="text/css">  
  7. *{margin:0;padding:0;}    
  8. body { font-size: 13px; line-height: 130%; padding: 60px }  
  9. #panel { width: 300px; border: 1px solid #0050D0 }  
  10. .head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }  
  11. .content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }  
  12. </style>  
  13. <script src="../../scripts/jquery.js" type="text/javascript"></script>  
  14. <script type="text/javascript">  
  15. $(function(){  
  16.     $("#panel h5.head").toggle(function(){  
  17.          $(this).next().slideUp(1000,function(){  
  18.             alert('回调函数');  
  19.          });  
  20.     },function(){  
  21.          $(this).next().slideDown();  
  22.     })  
  23. })  
  24. </script>  
  25. </head>  
  26. <body>  
  27. <div id="panel">  
  28.     <h5 class="head">三国杀杀天下</h5>  
  29.     <div class="content">  
  30.         夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情  
  31.     </div>  
  32. </div>  
  33. </body>  
  34. </html></span>  
4、自定义动画方法

animate(params,speed,callback)

参数说明：

params：一个包含样式属性及值的映射

sleep：速度参数，可选

callback：在动画完成时执行的函数

(1)、一个最简单的自定义动画

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Panel</title>  
  6. <style type="text/css">  
  7. *{margin:0;padding:0;}    
  8. body { padding: 60px }  
  9. #panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}  
  10. </style>  
  11. <script src="../../scripts/jquery.js" type="text/javascript"></script>  
  12. <script type="text/javascript">  
  13. $(function(){  
  14.     $("#panel").click(function(){  
  15.        $(this).animate({left: "500px"}, 3000);  
  16.     })  
  17. })  
  18. </script>  
  19. </head>  
  20. <body>  
  21. <div id="panel"></div>  
  22. </body>  
  23. </html></span>  
注意：为了使这个元素动起来，要更改元素的left属性。需要注意的是要使用animate()方法之前，为了能影响元素的'left' 'right' 'top'  'bottom'样式属性，必须先把元素的position

属性设置成'relative'或者'sbsolude'。

(2)、累加累减动画

上个例子当中,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的，只需要将left:"500px"改成left:"+=500px"或者left:"-=500px"即可。

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $("#panel").click(function(){  
  3.        $(this).animate({left: "+=500px"}, 3000);  
  4.     })  
  5. })</span>  
(3)、多重动画

A、同时执行多个动画

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $("#panel").click(function(){  
  3.        $(this).animate({left: "500px",height:"200px"}, 3000);  
  4.     })  
  5. })</span>  
B、顺序执行动画

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $("#panel").click(function(){  
  3.        $(this).animate({left: "500px"},3000)  
  4.               .animate({height:"200px"},1000);  
  5.     })  
  6. })</span>  
(4)、综合动画

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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $("#panel").css("opacity",0.5);//设置不透明度  
  3.     $("#panel").click(function(){  
  4.        $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)  
  5.               .animate({top:"200px",width:"200px"},3000)  
  6.               .fadeOut(1000);  
  7.     })  
  8. })</span>  
(5)、动画回调函数

在上例中，如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $("#panel").css("opacity",0.5);//设置不透明度  
  3.     $("#panel").click(function(){  
  4.        $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)  
  5.               .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});  
  6.                 
  7.     })  
  8. })</span>  
这样就把css方法加入到动画队列中了。

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

(1)、停止元素的动画

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

参数说明：

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

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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Panel</title>  
  6. <style type="text/css">  
  7. *{margin:0;padding:0;}    
  8. body { font-size: 13px; line-height: 130%; padding: 60px }  
  9. #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}  
  10. .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}  
  11. .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}  
  12. </style>  
  13. <script src="../../../scripts/jquery.js" type="text/javascript"></script>  
  14. <script type="text/javascript">  
  15. $(function(){  
  16.       $("button:eq(0)").click(function () {  
  17.           $("#panel")  
  18.             .animate({height : "150" } , 2000 )  
  19.             .animate({width : "300" } , 2000 )  
  20.             .hide(3000)  
  21.             .animate({height : "show" , width : "show" , opacity : "show" } , 2000 )  
  22.             .animate({height : "500"} , 2000 );  
  23.       });  
  24.       $("button:eq(1)").click(function () {  
  25.           $("#panel").stop();//停止当前动画，继续下一个动画  
  26.       });  
  27.       $("button:eq(2)").click(function () {  
  28.           $("#panel").stop(true);//清除元素的所有动画  
  29.       });  
  30.       $("button:eq(3)").click(function () {  
  31.           $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画  
  32.       });  
  33.       $("button:eq(4)").click(function () {  
  34.           $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态   
  35.       });  
  36.   
  37. })  
  38. </script>  
  39. </head>  
  40. <body>  
  41.  <button>开始一连串动画</button>  
  42.  <button>stop()</button>  
  43.  <button>stop(true)</button>  
  44.  <button>stop(false,true)</button>  
  45.  <button>stop(true,true)</button>  
  46. <div id="panel">  
  47.     <h5 class="head">三国杀杀天下</h5>  
  48.     <div class="content">  
  49.         夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情  
  50.     </div>  
  51. </div>  
  52. </body>  
  53. </html></span>  
(2)、判断元素是否处于动画状态

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

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

用法：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">if(!$(element).is(":animated")){  
  2.     //添加新的动画  
  3. }</span>  
6、其他动画方法

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

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

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

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



3.jQuery几个经典表单应用


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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title></title>  
  6. <style type="text/css">  
  7. body{  
  8.     font:normal 12px/17px Arial;  
  9. }  
  10. div{  
  11.     padding:2px;  
  12. }   
  13. input, textarea {   
  14.      width: 12em;   
  15.      border: 1px solid #888;  
  16. }  
  17. .focus {   
  18.      border: 1px solid #f00;  
  19.      background: #fcc;  
  20. }   
  21. </style>  
  22. <!--   引入jQuery -->  
  23. <script src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  24. <script type="text/javascript">  
  25.     $(function(){  
  26.         $(":input").focus(function(){  
  27.               $(this).addClass("focus");  
  28.               if($(this).val() ==this.defaultValue){    
  29.                   $(this).val("");             
  30.               }   
  31.         }).blur(function(){  
  32.              $(this).removeClass("focus");  
  33.              if ($(this).val() == '') {  
  34.                 $(this).val(this.defaultValue);  
  35.              }  
  36.         });  
  37.     })  
  38.     </script>  
  39. </head>  
  40. <body>  
  41.     <form action="" method="post" id="regForm">  
  42.         <fieldset>  
  43.             <legend>个人基本信息</legend>  
  44.                 <div>  
  45.                     <label  for="username">名称:</label>  
  46.                     <input id="username" type="text" value="名称" />  
  47.                 </div>  
  48.                 <div>  
  49.                     <label for="pass">密码:</label>  
  50.                     <input id="pass" type="password" value="密码" />  
  51.                 </div>  
  52.                 <div>  
  53.                     <label for="msg">详细信息:</label>  
  54.                     <textarea id="msg" rows="2" cols="20">详细信息</textarea>  
  55.                 </div>  
  56.         </fieldset>  
  57.     </form>  
  58. </body>  
  59. </html></span>  

效果图：


2、Elastic弹性文本域

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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  7.   <script src="jquery.elastic.source.js" type="text/javascript" ></script>  
  8.   <script type="text/javascript">  
  9.     //页面加载方法  
  10.     $(function(){  
  11.         $("textarea").elastic();//应用弹性文本框  
  12.     })  
  13.   </script>  
  14.  </head>  
  15.   
  16.  <body>  
  17.     <textarea name="" rows="2" cols="43">  
  18.     沁园春·雪  
  19. 北国风光，千里冰封，万里雪飘。  
  20.   
  21. 望长城内外，惟余莽莽；大河上下，顿失滔滔。  
  22.   
  23. 山舞银蛇，原驱蜡象，欲与天公试比高。  
  24.   
  25. 须晴日，看红装素裹，分外妖娆。  
  26.   
  27. 江山如此多娇，引无数英雄竞折腰。  
  28.   
  29. 惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。  
  30.   
  31. 一代天骄，成吉思汗，只识弯弓射大雕。  
  32.   
  33. 俱往矣，数风流人物，还看今朝。  
  34.     </textarea>  
  35.  </body>  
  36. </html></span>  

效果图：


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

3、Autotab自动Tab文本框

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

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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  7.   <script  src="jquery.autotab.js" type="text/javascript"></script>  
  8.   <script type="text/javascript">  
  9.     //页面加载方法  
  10.     $(function(){  
  11.         $('#autotab').submit(function(){  
  12.             return false;  
  13.         })  
  14.         $('#autotab :input').autotab_magic();//为页面文本框绑定autotab插件  
  15.     })  
  16.   </script>  
  17.  </head>  
  18.   
  19.  <body>  
  20.     <h1>jQuery整理笔记七</h1>  
  21.     <h2>Autotab自动Tab文本框</h2>  
  22.     <form method="post" action=""  id="autotab">  
  23.         <label>请输入验证码：  
  24.         <input type="text" name="num1" id="num1" maxlength="3"  size="3">  
  25.         <input type="text" name="num2" id="num2" maxlength="3"  size="3">  
  26.         <input type="text" name="num3" id="num3" maxlength="3"  size="3">  
  27.         <input type="text" name="num4" id="num4" maxlength="3"  size="3">  
  28.         <input type="text" name="num5" id="num5" maxlength="3"  size="3">  
  29.         <input type="text" name="num6" id="num6" maxlength="3"  size="3">  
  30.     </form>  
  31.  </body>  
  32. </html></span>  

除了可以限定输入长度外，还可以通过autotab_filter()方法限定输入的字符类型，这个方法还能过滤大写、小写、空格、字母等，具体的用到了现查吧。

如果将上面的js改成：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $('#autotab').submit(function(){  
  3.         return false;  
  4.     });  
  5.     $('#autotab :input').autotab_magic().autotab_filter('numeric');  
  6. })</span>  
就是只能输入数字了。

4、passwordStrength密码强度指标

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>passwordStrength</title>  
  6. <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />  
  7. <script type="text/javascript" src="jquery-2.1.0.min.js"></script>  
  8. <script type="text/javascript" src="passwordStrength.js"></script>  
  9. <script type="text/javascript">  
  10. $(function(){  
  11.     $('input[name="password"]').passwordStrength();  
  12. })  
  13. </script>  
  14. <style type="text/css">  
  15. .is0{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;margin:10px 0 0 104px;}  
  16. .is10{background-position:0 -7px;}  
  17. .is20{background-position:0 -14px;}  
  18. .is30{background-position:0 -21px;}  
  19. .is40{background-position:0 -28px;}  
  20. .is50{background-position:0 -35px;}  
  21. .is60{background-position:0 -42px;}  
  22. .is70{background-position:0 -49px;}  
  23. .is80{background-position:0 -56px;}  
  24. .is90{background-position:0 -63px;}  
  25. .is100{background-position:0 -70px;}  
  26.    
  27. #autotab input { width:138px; }  
  28. </style>  
  29. </head>  
  30. <body>  
  31. <h1>jQuery整理笔记七</h1>  
  32. <h2>表单开发（Forms）</h2>  
  33. <hr />  
  34. <h3>passwordStrength密码强度指标</h3>  
  35. <form action="" method="post" id="autotab" class="p1">  
  36.     <label>请输入密码：  
  37.         <input type="password" name="password" />  
  38.         <div id="passwordStrengthDiv" class="is0"></div>  
  39.     </label>  
  40. </form>  
  41. </body>  
  42. </html></span>  
上例用到一个图片：

执行效果图：

5、formToWizard表单填充向导

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

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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html>  
  3.  <head>  
  4.       <title> New Document </title>  
  5.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.       <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  7.       <script type="text/javascript" src="formToWizard.js"></script>  
  8.       <script type="text/javascript">  
  9.         //页面加载方法  
  10.         $(function(){  
  11.             $("#form1").formToWizard({ submitButton: 'SaveAccount' })  
  12.         })  
  13.       </script>  
  14.       <style type="text/css">  
  15.         #wrap { margin:1em 4em; font-size:12px; padding:1em 1em; border:solid 1px #fff; }  
  16.         fieldset { border:none; width:320px; }  
  17.         legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold; }  
  18.         label { display:block; margin:15px 0 5px; }  
  19.         input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000; }  
  20.         .prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none; }  
  21.         .prev:hover, .next:hover { background-color:#000; text-decoration:none; }  
  22.         .prev { float:left; }  
  23.         .next { float:right; }  
  24.         #steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px; }  
  25.         #steps li { font-size:24px; float:left; padding:10px; color:#b0b1b3; }  
  26.         #steps li span { font-size:11px; display:block; }  
  27.         #steps li.current { color:#000; }  
  28.         #makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px; }  
  29.         #makeWizard:hover { background-color:#000; }  
  30.       </style>  
  31.  </head>  
  32.   
  33.  <body>  
  34.  <div id="wrap">  
  35.       <form id="form1" action="">  
  36.         <fieldset>  
  37.             <legend>登录信息</legend>  
  38.             <label for="Name">昵称</label>  
  39.             <input id="Name" type="text" />  
  40.             <label for="Email">Email</label>  
  41.             <input id="Email" type="text" />  
  42.             <label for="Password">密码</label>  
  43.             <input id="Password" type="password" />  
  44.         </fieldset>  
  45.         <fieldset>  
  46.             <legend>公司信息</legend>  
  47.             <label for="CompanyName">公司名称</label>  
  48.             <input id="CompanyName" type="text" />  
  49.             <label for="Website">公司网址</label>  
  50.             <input id="Website" type="text" />  
  51.             <label for="CompanyEmail">公司邮箱</label>  
  52.             <input id="CompanyEmail" type="text" />  
  53.         </fieldset>  
  54.         <fieldset>  
  55.             <legend>个人信息</legend>  
  56.             <label for="NameOnCard">真实姓名</label>  
  57.             <input id="NameOnCard" type="text" />  
  58.             <label for="CardNumber">身份证号</label>  
  59.             <input id="CardNumber" type="text" />  
  60.             <label for="CreditcardMonth">发卡日期</label>  
  61.             <select id="CreditcardMonth">  
  62.                 <option value="1">1</option>  
  63.                 <option value="2">2</option>  
  64.                 <option value="3">3</option>  
  65.                 <option value="4">4</option>  
  66.                 <option value="5">5</option>  
  67.                 <option value="6">6</option>  
  68.                 <option value="7">7</option>  
  69.                 <option value="8">8</option>  
  70.                 <option value="9">9</option>  
  71.                 <option value="10">10</option>  
  72.                 <option value="11">11</option>  
  73.                 <option value="12">12</option>  
  74.             </select>  
  75.             <select id="CreditcardYear">  
  76.                 <option value="2009">2009</option>  
  77.                 <option value="2010">2010</option>  
  78.                 <option value="2011">2011</option>  
  79.             </select>  
  80.             <label for="Address1">地址1</label>  
  81.             <input id="Address1" type="text" />  
  82.             <label for="Address2">地址2</label>  
  83.             <input id="Address2" type="text" />  
  84.             <label for="City">城市</label>  
  85.             <input id="City" type="text" />  
  86.             <label for="Country">国家</label>  
  87.             <select id="Country">  
  88.                 <option value="CA">Canada</option>  
  89.                 <option value="US">United States of America</option>  
  90.                 <option value="GB">United Kingdom (Great Britain)</option>  
  91.                 <option value="AU">Australia</option>  
  92.                 <option value="JP">Japan</option>  
  93.             </select>  
  94.         </fieldset>  
  95.         <div>  
  96.             <input id="SaveAccount" type="button" value="提交表单" />  
  97.         </div>  
  98.         </div>  
  99.     </form>  
  100.  </body>  
  101. </html>  
  102. </span>  

效果图：

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

以前经常用，不说了。

7、下拉框的应用

这回先看个图：

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <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">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title></title>  
  6. <style type="text/css">  
  7. * { margin:0; padding:0; }  
  8. div.centent {  
  9.    float:left;  
  10.    text-align: center;  
  11.    margin: 10px;  
  12. }  
  13. span {   
  14.     display:block;   
  15.     margin:2px 2px;  
  16.     padding:4px 10px;   
  17.     background:#898989;  
  18.     cursor:pointer;  
  19.     font-size:12px;  
  20.     color:white;  
  21. }  
  22. </style>  
  23. <!--   引入jQuery -->  
  24. <script src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  25. <script type="text/javascript">  
  26. $(function(){  
  27.     //移到右边  
  28.     $('#add').click(function() {  
  29.     //获取选中的选项，删除并追加给对方  
  30.         $('#select1 option:selected').appendTo('#select2');  
  31.     });  
  32.     //移到左边  
  33.     $('#remove').click(function() {  
  34.         $('#select2 option:selected').appendTo('#select1');  
  35.     });  
  36.     //全部移到右边  
  37.     $('#add_all').click(function() {  
  38.         //获取全部的选项,删除并追加给对方  
  39.         $('#select1 option').appendTo('#select2');  
  40.     });  
  41.     //全部移到左边  
  42.     $('#remove_all').click(function() {  
  43.         $('#select2 option').appendTo('#select1');  
  44.     });  
  45.     //双击选项  
  46.     $('#select1').dblclick(function(){ //绑定双击事件  
  47.         //获取全部的选项,删除并追加给对方  
  48.         $("option:selected",this).appendTo('#select2'); //追加给对方  
  49.     });  
  50.     //双击选项  
  51.     $('#select2').dblclick(function(){  
  52.        $("option:selected",this).appendTo('#select1');  
  53.     });  
  54. });  
  55. </script>  
  56.   
  57. </head>  
  58. <body>  
  59.     <div class="centent">  
  60.         <select multiple="multiple" id="select1" style="width:100px;height:160px;">  
  61.             <option value="1">曹操</option>  
  62.             <option value="2">曹昂</option>  
  63.             <option value="3">曹丕</option>  
  64.             <option value="4">曹彰</option>  
  65.             <option value="5">曹植</option>  
  66.             <option value="6">曹熊</option>  
  67.             <option value="7">曹仁</option>  
  68.             <option value="8">曹洪</option>  
  69.             <option value="9">曹休</option>  
  70.             <option value="10">曹真</option>  
  71.             <option value="11">曹爽</option>  
  72.         </select>  
  73.         <div>  
  74.             <span id="add" >选中添加到右边>></span>  
  75.             <span id="add_all" >全部添加到右边>></span>  
  76.         </div>  
  77.     </div>  
  78.     <div class="centent">  
  79.         <select multiple="multiple" id="select2" style="width: 100px;height:160px;">  
  80.             <option value="12">曹芳</option>  
  81.         </select>  
  82.         <div>  
  83.             <span id="remove"><<选中删除到左边</span>  
  84.             <span id="remove_all"><<全部删除到左边</span>  
  85.         </div>  
  86.     </div>  
  87. </body>  
  88. </html></span>  

代码实现的功能：

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

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

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



0 0
哪种编程语言最简单 哪种编程语言最简单
原创粉丝点击
热门IT博客
专业代理淘宝商城入驻专业代理淘宝商城入驻
电子文档管理系统 php电子文档管理系统 php
mac怎么切换大写字母
傲剑决进阶升级数据
安卓机顶盒修改mac
itunes备份管理器 mac
js数字正则表达式
移动通信网络结构图
linux查看ssh端口
进游戏公司的美工
拓维软件外包
mousewheel.min.js
淘宝怎么做才有生意
软件人才培训中心
不惑 知天命
简单电子相册制作软件
golang 定时器
学校开展网络安全教育
json格式转换python
macbook air 必备软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 双城记读后感 镜双城在线阅读 镜双城全文阅读 双城故事明前雨后 2019年镜双城男主 匪我思存双城全本 双城匪我思存全文阅读 双城二手拖拉机 狄更斯双城记 双城招聘信息港 双城邮编是多少 昆明经典双城 双城by龙马甲 广州双城国际公寓 珠江新城双城国际公寓 哈尔滨双城楼盘 广州 双城国际公寓 成都双城价格 天河区双城国际公寓 珠江新城双城国际 珠海双城国际公寓 昆明 经典双城 双城油米厂卫生所 哈尔滨双城市 黑龙江双城职业学院 双城哪里有手工活 双城国际写字楼 长春双城杀猪菜馆 哈尔滨双城酒厂 单恋双城粤语 双城快捷宾馆 武汉航天双城写字楼 双城生活在线阅读 经典双城租房子 广州 双城国际 经典双城户型 双城房屋买卖 单恋双城粤语版 黑龙江省双城市 哈尔滨到双城客车 杭州双城国际

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里