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

Web基础：jQuery下篇：千变万化的事件

2013-11-27 11:05 573 查看

承接《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>

<body>
<input type="button" onClick="javascript:hello()" />
</body>

上述这种绑定，将事件绑定的处理函数交给了javascript，是一种逻辑与显示分离的开端。
当然，也可以把“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");
}

<body>
<input type="button" id="btn" value="click me" />
</body>

这样，我们为单击btn按钮的绑定事件的事件处理单独写一个函数，实现了最大程度的分离。

善用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)：

$(function(){
$('#someBtn').click(onBtnClick);
});

function onBtnClick(){
var thisElement = $(this);
thisElement.val('clicked button');
}

<input type="button" id="someBtn" value="click me" />

this对象在批量绑定时的地位无法替代，这里以一个小型实例说明。
如下代码实现的是按下<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()); //弹出显示下拉选单选项值的提醒框
}

<body>
<select id="mySelect">
<option value="C">
<option value="C++">
<option value="java">
<option value="javascript">
<option value="jQuery">
</select>
</body>

click(fn)：

当鼠标单击元素时调用，可以是任意元素。这个事件是两个事件的合成：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
});
});

<div id="myDiv"></div>

focus(fn)：

与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->keyup

keydown(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()上场了：

unbind([type], [fn])

第一个可选参数指定要撤销绑定的事件，如mouseover，mousedown。
第二个可选参数指定要撤销绑定给事件的函数，用函数指针表示。
当两个参数均不使用时，将撤出元素集合的所有事件绑定的所有函数！
针对上述例子，为了保险起见，我们只撤出指定的事件“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();
});
});

<body>
<input type="button" value="Click here"/>
<p id="myP">This is my paragraph.</p>
</body>

toggle(time,callback)：

用动画变化切换元素的可见性。

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([b]time,callback)：[/b]

元素由上至下滑动到出现，通常在元素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([b]time,callback)：[/b]

切换元素的滑动，若已经从上到下则从下到上，反之从上到下。

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参数在动画完毕时调用，可以省略。

<body>
<input type="button" value="animate"/>
<div id="myDiv" style="border:1px solid #F00">This is my div.</div>
</body>

可以指定动画后的CSS样式属性：

$(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);
});
});

<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>

当然，也可以使用相对变化。比如{left:"-100px"}等，就不具体介绍了。

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，将在以后研究。

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

标签：

相关文章推荐

新的分享

章节导航