承接《Web基础：jQuery中篇：操纵DOM》，有了各种对DOM的操纵途径，下一步我们还需要对事件进行处理。
jQuery事件：
所谓jQuery事件，其实就是jQuery对javascript的事件处理进行的封装，指的是在某种时机下，比如点击某个按钮，或者最大化窗口时所要发生的事情。相比于javascript的事件，其调用和绑定更加方便和灵活。由于有了强大的选择器的帮助，HTML代码里就不需要javascript的逻辑处理了，可以动态绑定。
函数绑定：
细说事件之前，先来说说函数绑定，这是一个很重要的概念，在操纵javascript时经常使用。它指的是当发生特定的事件时，比如鼠标点击，页面载入等，将要发生的事情。而这个绑定的函数，就是对这件事的处理过程。先来看这样一段代码，实现的是对按钮元素点击事件的绑定：<input type="button" id="btn" value="click me" onClick="alert('Hello World');" />上述这种，是直接将伪javascript代码嵌在HTML文档里的，只能实现极其简单的功能。再来看这种：<head> <script> function hello(){ alert("Hello World"); } </script> </head>上述这种绑定，将事件绑定的处理函数交给了javascript，是一种逻辑与显示分离的开端。<body> <input type="button" onClick="javascript:hello()" /> </body>当然，也可以把“javascript:”省去，因为HTML页面默认从javascript里面寻找hello()函数。显然，这仍然不是我们想要的，于是我们就有了下面这种基于jQuery的绑定。$(function(){ //jQuery的载入事件，下文将介绍，在页面载入之前被调用 //选择器选中元素btn，给其绑定一个单击事件，在单机按钮btn时发生事件 $("#btn").click(function(){ //事件的处理函数是一个匿名的内部函数，所有的处理行为都写在这个函数里 alert("hello"); }); });这样基本就做到了页面和逻辑的分离，但是一旦需要绑定的事件多起来，载入事件里的代码将会变得臃肿，于是采取函数绑定的方案来进一步分离逻辑处理中的代码：<body> <input type="button" id="btn" value="click me" /> </body>$(function(){ $("#btn").click(doAlert); //发生单击按钮btn的事件时，调用doAlert()函数 //不能写doAlert(),而应写函数名，作为一个指针参数。 //参数作为一个类似于C/C++中的函数指针被传入绑定事件处理函数 }); function doAlert(){ alert("hello"); }这样，我们为单击btn按钮的绑定事件的事件处理单独写一个函数，实现了最大程度的分离。<body> <input type="button" id="btn" value="click me" /> </body>善用this：
可别忘记了这个隐藏的对象，没有了它，我们根本就无法知道是哪个元素发生了事件。this对象指的是发生事件的对象或对象集合，如某一个按钮，或某一批checkbox。在jQuery中，我们需要将其封装成jQuery对象才能使用jQuery的函数：var thisjQueryElement = $(this);我们可以在事件函数内取得该元素的属性，或对其进行操纵：$('#someBtn').click(function(){ $(this).val('clicked button'); });<input type="button" id="someBtn" value="click me" />注意，即便是使用了函数绑定的事件，仍然可以在函数中使用$(this)：this对象在批量绑定时的地位无法替代，这里以一个小型实例说明。$(function(){ $('#someBtn').click(onBtnClick); });function onBtnClick(){ var thisElement = $(this); thisElement.val('clicked button'); }<input type="button" id="someBtn" value="click me" />如下代码实现的是按下<tr>中的按钮，则移除当前那个按钮所在的<tr>：$(function){ loadTable(); } function loadTable(){ var tbl = $('#someTbl'); var newTR; var newTD; var newBtn; //为清晰起见，每个函数都分开写了，实际上是可以连续调用函数的。 for(var i=0;i<5;i++){ //动态生成<tr> newTR = $('<tr>'); //设置tr id newTR.attr('id','tr_'+i); //动态生成<td> newTD = $('<td>'); //动态生成按钮，并设置其id newBtn = $('<input>'); newBtn.attr({'type':'button','id':'btn_'+i}); newBtn.val('remove this tr'); //点击事件处理函数 newBtn.click(function(){ //获取其id var btnId = $(this).attr('id'); //获取其id中的数字(以'_'分隔的后半段) var id = btnId.split('_')[1]; //移除对应id的<tr> $('#tr_'+id).remove(); }); newTD.appendTo(newTR); newTR.appendTo(tbl); } }<table id="someTbl" border="1"></table>
基本事件：
ready(fn)：
页面载入事件，当DOM载入就绪时发生的事件，作为javascript的window.onload()=function(){...}的有效替代。这是jQuery事件中最重要的一个，它提供了一个时机，一个绑定其他所有事件的时机，其他所有需要绑定的事件在这个事件的处理函数中进行绑定。完整的写法：$(document).ready(function(){ ... });<pre code_snippet_id="84060" snippet_file_name="blog_20131127_8_4151732">
当然，也可以用jQuery对象：
jQuery(function(){ ... });
还可以简写成“$”，不过需要注意的是，当与其他框架（如extJS）同时使用时，“$”可能会引发冲突。$(function(){ ... });
再结合刚才提到的函数绑定，于是有了下面这个当页面载入时就弹出提醒框的jQuery代码：$(doAlert); function doAlert(){ alert("dom loaded!"); }
blur(fn)：
当元素失去焦点时调用，通常是当鼠标点击其他元素（让其他元素获得焦点），或是按tab键移开。$(function(){ $("#myDiv").blur(doAlert); //鼠标移开myDiv时触发doAlert()函数 }); function doAlert(){ alert("focus lost!"); }<body> <div id="myDiv">This is my div</div> </body>当参数为空时（blur()），会手动让其失去焦点，而不是绑定事件等待触发。
change(fn)：
当元素的内容被改变时调用，可以是输入框、下拉选单、圆形单选按钮、方形勾选框等等。
$(function(){ $("#mySelect").change(onSelectChange); //每当下拉选单mySelect的选项改变时触发 }); function onSelectChange(){ alert($("#mySelect").val()); //弹出显示下拉选单选项值的提醒框 }click(fn)：<body> <select id="mySelect"> <option value="C"> <option value="C++"> <option value="java"> <option value="javascript"> <option value="jQuery"> </select> </body>当鼠标单击元素时调用，可以是任意元素。这个事件是两个事件的合成：mousedown及mouseup，分别表示鼠标按下以及鼠标弹起的事件。
$(function(){ $("#myDiv").click(function(){ $(this).text("You clicked this div!"); //单击myDiv时，改变其中的文字 //在匿名函数内，$(this)表示jQuery封装的当前DOM对象，这里是myDiv }); });<div id="myDiv"></div>
mousedown(fn)，mouseup(fn)：
分别表示鼠标在某元素上按下以及弹起的事件。
mouseover(fn)，mouseout(fn)：
分别表示鼠标移入及鼠标移出某个元素的事件。
$(function(){ $("#myDiv").mouseover(function(){ $(this).text("mouse moved in!"); }) .mouseout(function(){ $(this).text("mouse moved out!"); }); //可以同时为元素绑定多个事件，格式为元素集合.事件名1(处理函数).事件名2(处理函数)... //如$("#myDiv").mouseover(fn1).mouseout(fn2); });<body> <div id="myDiv">This is my Div</div> </body>mousemove(function(event))：
鼠标在元素内移动时触发，每次移动都会触发，并能通过传入的参数event对象获取两个属性：clientX及clientY，表示鼠标的坐标。
$(function(){ $("#myDiv").mousemove(function(event){ $(this).text("x="+event.clientX+",y="+event.clientY); }); });<body> <div id="myDiv" width="400px" height="400px">Hi there</div> </body>dblclick(fn)：
$(function(){ $("#myDiv").dbclick(function(){ $(this).text("You double-clicked this div!"); //双击myDiv时，改变其中的文字 //在匿名函数内，$(this)表示jQuery封装的当前DOM对象，这里是myDiv }); });focus(fn)：<div id="myDiv"></div>与blur(fn)相对应，当元素获得焦点时调用。可以是鼠标点击进入，或者是按tab切换进入。
$(function(){ $("#myInput").focus(function(){ $(this).blur(); //当输入框myInput刚获得焦点时就手动让其失去焦点，使这个输入框无法使用 //在匿名函数内，$(this)表示jQuery封装的当前DOM对象，这里是myInput }); });<input type="text" id="myInput" />当参数为空时（focus()），会手动让其获得焦点，而不是绑定事件等待触发。
focusin(fn)：
父节点的任意子节点获得焦点时，父节点触发。
$(function(){ $("#myDiv").focusin(function(){ //当myDiv的子节点：in1，in2，in3中的任意一个获得焦点时调用 alert("some children element has been focused!"); }); });<div id="myDiv"> <input type="text" id="in1" /> <input type="text" id="in2" /> <input type="text" id="in3" /> </div>focusout(fn)：
父节点的任意子节点失去焦点时，父节点触发。
$(function(){ $("#myDiv").focusout(function(){ //当myDiv的子节点：in1，in2，in3中的任意一个失去焦点时调用 alert("some children element has lost its focus!"); }); });<div id="myDiv"> <input type="text" id="in1" /> <input type="text" id="in2" /> <input type="text" id="in3" /> </div>
键盘事件：当键盘按下某个键时调用，将会依次触发如下三个事件：keydown->keypress->keyupkeydown(function(event){...}); keypress(function(event){...}); keyup(function(event){...});使用event.keyCode获取键值，每个浏览器的keyCode不统一。$(function(){ $(window).keydown(function(event){ //$(window)表示当前页面这个jQuery封装的DOM对象 alert("keyCode = "+event.keyCode); }); });
resize(fn)：
窗口大小改变时触发，一般绑定在$(window)对象的事件上。
$(function(){ $(window).resize(function(){ alert("window resized!"); }); });<body></body>
scroll(fn)：
滚动条每次滚动时调用。
i=0; //不加var关键字时声明为全局变量 $(window).scroll(function(){ $("#showDiv").text("scrolled "+ ++i+"times"); });<body> <div width="1000px" height="1000px"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <div id="showDiv"></div> </body>
select(fn)：
选择文本框中的文本时触发，如<input type="text" />，<textarea></textarea>等。
$(function(){ $(":password").select(function(){ alert("can't select from a password!"); }); });<body> <input type="password" /> </body>submit(fn)：
按下表单提交按钮后、提交表单前调用，通常绑定对表单项的检查处理函数。只能绑定在表单元素<form>上。
$(function(){ $("form").submit(checkInputs); //绑定表单提交事件 }); function checkInputs(){ var inputs = $("input"); for(var i=0;i < inputs.length;i++) if(!inputs.eq(i).val().length) //如果表单控件元素的值为空，则返回false return false; //返回false将不提交，停留在当前页面 return true; //返回true将提交 }<body> <form action="someServlet" method="post"> <input type="text" id="userName" /> <input type="password" id="userPwd" /> <input type="text" id="userBirthday" /> <input type="text" id="userPhone" /> <input type="text" id="userEmail" /> </form> </body>unload(fn)：
页面卸载时调用。
$(function(){ $(window).unload(function(){ alert("Bye!"); }); });
切换事件：
hover(fn1,fn2)：
获取鼠标悬停事件，介于mouseover、mousemove、mouseout之间，更加准确地模拟悬停。
$(function(){ $("td").hover( function () { $(this).addClass("hover"); //移入并悬停时，追加样式 }, function () { $(this).removeClass("hover"); //移出时，取消样式 } ); });<head> <style> .hover{ background-color:gray; } </style> </head> <body> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body>
toggle(fn1,fn2...)：
切换鼠标点击事件，点击次数与内部第几个函数对应，依次触发。
事件绑定：
不知道你有没有发现，上述所有例子中，均没有给事件绑定的函数传递参数。然而在许多情况下，我们是需要给处理函数传递参数的。这时，我们需要用到事件绑定函数bind()及unbind()。先看下面这段代码：$(function(){ $(document).mousemove(onMouseMove); }); function onMouseMove(){ $('#statusDiv').empty().html('mouse moving...'); $(document).mousedown(function(){ $('#statusDiv').empty().html('halted'); }); }这段jQuery代码允许鼠标在页面上移动时显示状态，移动时显示mouse moving，点下鼠标左键时显示halted。这种函数绑定十分简单，我们需要传递一些参数进去。让我们来看看bind()的函数原型：第一个参数传递的是事件类型。bind(type, [data], fn)第二个可选参数传递的就是我们需要的参数。第三个参数传递的是要绑定给事件的处理函数。由基本的事件绑定改造成bind函数绑定其实很简单，原事件函数绑定代码：改为：$(document).mousemove(onMouseMove);即可。$(document).bind('mousemove', onMouseMove);事实上，所有的基本事件都是用这种方式绑定函数的。那么，我们传递参数的需求又改如何满足呢？让我把上面那个例子进行改造来说明：$(function(){ //要绑定的事件：鼠标在页面中移动 //参数格式为{参数名:值,参数名:值...} //传递的参数名：msg，值：'mouse moving' //绑定的函数：onMouseMove $(document).bind('mousemove',{msg:'mouse moving'},onMouseMove); }); function onMouseMove(evt){ //传递进来参数的是一个jQuery event对象 //利用bind()函数手动传递的参数包含在event对象的data属性中 var message = evt.data.msg; //event对象的data属性中还有很多参数 //比如鼠标的坐标 var x = evt.clientX; var y = evt.clientY; //显示 $('#statusDiv').empty().html(message+' clientX='+x+' clientY='+y); }这样就能即时显示我们传递进去的参数以及鼠标的坐标了。那么如何撤出这种绑定？轮到unbind()上场了：第一个可选参数指定要撤销绑定的事件，如mouseover，mousedown。unbind([type], [fn])第二个可选参数指定要撤销绑定给事件的函数，用函数指针表示。当两个参数均不使用时，将撤出元素集合的所有事件绑定的所有函数！针对上述例子，为了保险起见，我们只撤出指定的事件“mousemove”及指定的函数onMouseMove，在鼠标点击左键时触发：$(function(){ $(document).bind('mousemove',{msg:'mouse moving'},onMouseMove); $(document).mousedown(function(){ $(document).unbind('mousemove',onMouseMove); }); }); function onMouseMove(evt){ var message = evt.data.msg; var x = evt.clientX; var y = evt.clientY; $('#statusDiv').empty().html(message+' clientX='+x+' clientY='+y); }
动画效果：
说完了事件，再来提一提动画。jQuery的动画效果灵活有趣，在没有使用插件的情况下已经相当好玩了，使用各种神奇的插件的话更加逆天。这里简要介绍一下几个基本的动画。
基本：
hide()：
瞬间隐藏元素集合中的所有元素，相当于css("display","none");。
$(function(){ $("input").click(function(){ $("#myP").hide(); }); });<body> <input type="button" value="Click here"/> <p id="myP">This is my paragraph.</p> </body>
hide(time,callback)：
用动画变化隐藏元素集合中的所有元素，并在隐藏完毕时调用其第二个参数的回调函数。
time参数可以用毫秒数表示，也可以用“slow”，“normal”，“fast”指定，表示动画所需的时间。
callback参数在动画完毕时调用，可以省略。
$(function(){ $("input").click(function(){ $("#myP").hide("slow",function(){ alert("myP hidden!") }); }); });<body> <input type="button" value="Click here"/> <p id="myP">This is my paragraph.</p> </body>
show()：
瞬间显示元素集合中的所有元素，相当于css("display","block");。
$(function(){ $("#myP").hide(); //先隐藏起来 $("input").click(function(){ $("#myP").show(); }); });<body> <input type="button" value="Click here"/> <p id="myP">This is my paragraph.</p> </body>show(time,callback)：
用动画变化显示元素集合中的所有元素，并在显示完毕时调用其第二个参数的回调函数。
time参数可以用毫秒数表示，也可以用“slow”，“normal”，“fast”指定，表示动画所需的时间。
callback参数在动画完毕时调用，可以省略。
$(function(){ $("#myP").hide(); //先隐藏起来 $("input").click(function(){ $("#myP").show("fast",function(){ alert("myP shown!") }); }); });<body> <input type="button" value="Click here"/> <p id="myP">This is my paragraph.</p> </body>toggle()：
瞬间切换元素的可见性，已经显示则隐藏，已经隐藏则显示。
$(function(){ $("#myP").hide(); $("input").click(function(){ $("#myP").toggle(); }); });toggle(time,callback)：<body> <input type="button" value="Click here"/> <p id="myP">This is my paragraph.</p> </body>用动画变化切换元素的可见性。
time参数可以用毫秒数表示，也可以用“slow”，“normal”，“fast”指定，表示动画所需的时间。
callback参数在动画完毕时调用，可以省略。
$(function(){ $("#myP").hide(); $("input").click(function(){ $("#myP").toggle(1000,function(){ alert("myP visiblity toggled!"); }); }); });淡入淡出：
fadeIn(time,callback)：
元素在指定的时间内淡入。
time参数可以用毫秒数表示，也可以用“slow”，“normal”，“fast”指定，表示动画所需的时间。
callback参数在动画完毕时调用，可以省略。
$(function(){ $(":button").eq(0).click(function(){ $("#myP").hide(); }); $("#btn1").click(function(){ $("#myP").fadeIn(1000,function(){ alert("myP faded in in 1000ms!"); }); }); $("#btn2").click(function(){ $("#myP").fadeIn("slow",function(){ alert("myP faded in slowly!"); }); }); });<body> <input type="button" value="hide myP"/> <input id="btn1" type="button" value="fade out in 1000ms" /> <input id="btn2" type="button" value="fade out slowly" /> <p id="myP">This is my paragraph.</p> </body>fadeOut(time,callback)：
元素在指定的时间内淡出。
time参数可以用毫秒数表示，也可以用“slow”，“normal”，“fast”指定，表示动画所需的时间。
callback参数在动画完毕时调用，可以省略。
$(function(){ $(":button").eq(0).click(function(){ $("#myP").show(); }); $("#btn1").click(function(){ $("#myP").fadeOut(1000,function(){ alert("myP faded out in 1000ms!"); }); }); $("#btn2").click(function(){ $("#myP").fadeOut("slow",function(){ alert("myP faded out slowly!"); }); }); });<body> <input type="button" value="show myP"/> <input id="btn1" type="button" value="fade out in 1000ms" /> <input id="btn2" type="button" value="fade out slowly" /> <p id="myP">This is my paragraph.</p> </body>fadeTo(time,opacity,callback)：
元素的透明度渐变至指定值。
time参数可以用毫秒数表示，也可以用“slow”，“normal”，“fast”指定，表示动画所需的时间。
opcacity表示透明度，数值为[0-1]，当值为0时等同于fadeOut，为1时等同于fadeIn。
callback参数在动画完毕时调用，可以省略。
$(function(){ $("#myP").hide(); $("input").click(function(){ $("#myP").fadeTo(1000,0.5,function(){ alert("myP faded to half transparent in 1000ms!"); }); }); });<body> <input type="button" value="Click here"/> <p id="myP">This is my paragraph.</p> </body>滑动：
slideUp(time,callback)：
元素由下向上滑动到消失 。
time参数可以用毫秒数表示，也可以用“slow”，“normal”，“fast”指定，表示动画所需的时间。
callback参数在动画完毕时调用，可以省略。
$(function(){ $("input").click(function(){ $("#myP").slideUp(1000,function(){ alert("myP slided up in 1000ms!"); }); }); });<body> <input type="button" value="Click here"/> <p id="myP">This is my paragraph.</p> </body>slideDown(time,callback)：
元素由上至下滑动到出现，通常在元素slideUp后使用。
time参数可以用毫秒数表示，也可以用“slow”，“normal”，“fast”指定，表示动画所需的时间。
callback参数在动画完毕时调用，可以省略。
$(function(){ $("#btn1").click(function(){ $("#myP").slideUp(1000,function(){ alert("myP slided up in 1000ms!"); }); }); $("#btn2").click(function(){ $("#myP").slideDown(1000,function(){ alert("myP slided down in 1000ms!"); }); }); });<body> <input id="btn1" type="button" value="slide up"/> <input id="btn2" type="button" value="slide down" /> <p id="myP">This is my paragraph.</p> </body>slideToggle(time,callback)：
切换元素的滑动，若已经从上到下则从下到上，反之从上到下。
time参数可以用毫秒数表示，也可以用“slow”，“normal”，“fast”指定，表示动画所需的时间。
callback参数在动画完毕时调用，可以省略。
$(function(){ $("input").click(function(){ $("#myP").slideToggle(1000,function(){ alert("myP slide toggled in 1000ms!"); }); }); });<body> <input type="button" value="slide toggle"/> <p id="myP">This is my paragraph.</p> </body>自定义动画：
animate({params},time,easing,callback)：
自定义动画，不仅可以渐变元素的透明度，也可以渐变元素的高度、宽度等CSS样式。
{params}参数为若干动画属性或样式属性与其值组成的参数对，格式为属性名:"值"，每一对属性对以逗号","分隔。
time参数可以用毫秒数表示，也可以用“slow”，“normal”，“fast”指定，表示动画所需的时间，可以省略。
easing参数需要插件支持，表示动画擦除效果，可以省略，这里就不介绍了。
callback参数在动画完毕时调用，可以省略。
可以指定动画后的CSS样式属性：<body> <input type="button" value="animate"/> <div id="myDiv" style="border:1px solid #F00">This is my div.</div> </body>还有透明度：$(function(){ $("input").click(function(){ $("#myDiv").animate({width:"80%",height:"80%",fontSize:"8em"},1000,function(){ alert("animation completed in 1000ms!"); }); }); });$(function(){ $("input").click(function(){ $("#myDiv").animate ({width:"80%",height:"80%",fontSize:"8em",opacity:'0.5'},1000,function(){ alert("animation completed in 1000ms!"); }); }); });下面是一个实例，这个页面有四个按钮，可以控制一个div上下左右移动：
x = 400; //全局变量，记录myDiv的left y = 400; //全局变量，记录myDiv的top $(function(){ $("#myDiv").css({left:"400px",top:"400px"}); $("#up").click(function(){ x -= 10; $("#myDiv").animate({top:x+'px'},50); }); $("#down").click(function(){ x += 10; $("#myDiv").animate({top:x+'px'},50); }); $("#left").click(function(){ y -= 10; $("#myDiv").animate({left:y+'px'},50); }); $("#right").click(function(){ y += 10; $("#myDiv").animate({left:y+'px'},50); }); });当然，也可以使用相对变化。比如{left:"-100px"}等，就不具体介绍了。<body> <input id="up" type="button" value="go up"/> <input id="down" type="button" value="go down"/> <input id="left" type="button" value="go left"/> <input id="right" type="button" value="go right"/> <div id="myDiv" style="width:20px;height:10px; border:'1px solid#F00'; background-color:red; position:absolute;left:400px;top:400px"> </div> </body>stop()：
立即停止指定元素的当前动画。
$(function(){ $("input").eq(0).click(function(){ $("#myP").slideToggle(5000,function(){ alert("myP slide toggled in 5000ms!"); }); }); $("#stopBtn").click(function(){ $("*").stop(); }); });<body> <input type="button" value="slide toggle"/> <input id="stopBtn" type="button" value="stop!" /> <p id="myP">This is my paragraph.</p> </body>delay(time)：
延迟动画，一般放在动画发生前。
$(function(){ $("input").eq(0).click(function(){ $("#myP").delay(800).slideToggle(1000,function(){ alert("myP slide toggled in 1000ms after a delay of 800ms!"); }); }); });<body> <input type="button" value="delayed slide toggle"/> <p id="myP">This is my paragraph.</p> </body>
综合实例：
下面是一个添加表格项的综合性jquery应用实例。
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("input[name='add']").eq(0).click(function(){
if(checkInputs())
addRow();
}
);
$("input[name='rem']").eq(0).click(function(){
if(confirm("确认全部删除?"))
$("table tr[id='tblHeader']").siblings().remove();
}
);
})
function checkInputs(){
if($(":text").eq(0).val().length == 0){
alert("姓名不能为空");
return false;
}else if($(":text").eq(1).val().length == 0){
alert("年龄不能为空");
return false;
}else if($(":text").eq(2).val().length == 0){
alert("邮箱不能为空");
return false;
}else if(checkEmail($(":text").eq(2).val())==false){
alert("邮箱格式错误");
return false;
}else if($("textarea").eq(0).val().length > 20){
alert("字数不能超过20");
return false;
}
return true;
}
function addRow(){
var newTD = $("<td>").append($(":text").eq(0).val());
var newTR = $("<tr>").append(newTD);
newTD = $("<td>").append($(":text").eq(1).val());
newTR.append(newTD);
newTD = $("<td>").append($(":text").eq(2).val());
newTR.append(newTD);
var sex = $(":radio[checked]").eq(0).val();
newTD = $("<td>").append(sex);
newTR.append(newTD);
var desc = $("textarea").eq(0).val();
newTD = $("<td>").append(desc);
newTR.append(newTD);
imgUpdt = $("<img id='updt' width='29px' height='23px' src='image/updt.jpg'/>");
imgDelt = $("<img id='delt' src='image/delt.jpg'/>");
addDeltEvent(imgDelt);
newTD = $("<td>").append(imgUpdt);
newTD.append(imgDelt);
newTR.append(newTD);
addRowEvent(newTR);
$("table").eq(1).append(newTR);
}
function addRowEvent(row){
row.hover(
function () {
row.css("background-color","lightgreen");
},
function () {
row.css("background-color","white");
}
);
}
function addDeltEvent(delt){
delt.click(function(){
var opt=confirm("确认删除?");
if(opt)
delt.parent().parent().remove();
});
}
function checkEmail(email){
var emailFormat = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return emailFormat.test(email);
}
</script>
</head><body>
<form method="get/post" >
<table width="90%" border="1">
<tr>
<td width="80%"><table width="100%" border="1">
<tr id="tblHeader">
<td align="center"><h4>姓名</h4></td>
<td align="center"><h4>年龄</h4></td>
<td align="center"><h4>性别</h4></td>
<td align="center"><h4>邮箱</h4></td>
<td align="center"><h4>描述</h4></td>
<td align="center"><h4>操作</h4></td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
<td width="250"><p>姓名:
<input id="name" name="text2" type="text" />
</p>
<p>年龄:
<input name="text3" type="text" />
</p>
<p>性别：
<input type="radio" name="sex" value="男" checked="checked"/>
男
<input type="radio" name="sex" value="女" />
女</p>
<p>邮箱:
<input name="email" type="text" />
</p>
<p>个人描述：</p>
<p>
<textarea name="textarea" cols="30" rows="5"></textarea>
</p>
<p align="center">
<input id="addBtn" type="button" name="add" value="添加" />
<input id="remAll" type="button" name="rem" value="清空" />
</p></td>
</tr>
</table>
</form>
</body>其他内容：
jQuery是一个轻量级的框架，它的内容远不是一篇手册、几篇文章能介绍得完的。更好玩的内容，比如jQuery Mobile，将在以后研究。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
