我的第一次讲座内容之二——使用jQuery实现页面无刷新效果
?
<!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=gb2312" />
<title>无刷新测试</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
?$(function(){//网页加载完之后执行的函数
? ? ?$("input[type='button']").each(function(){//遍历所有按钮
? ? //将当前按钮元素绑定一个click事件
$(this).click(function(){
? if(!confirm('您确定要删除用户'+$(this).attr("name")+'?')){
? ? ?return;
? }
? ? ? ? ? ?$("#resultMessage").html("删除成功!");
? $("#a"+$(this).attr("name")).remove();
? setTimeout("clearText()",3000);
});
});
?});
?function clearText(){//清空结果
? ?$("#resultMessage").html("");
?}
</script>
</head>
<body>
<span id="resultMessage" style="background-color:#008040; color:#FFFFFF;"></span>
<table width="500" border="1" cellspacing="0" bordercolor="#3399FF">
?<tr>
<td>编号</td>
<td>姓名</td>
<td>密码</td>
<td>注册时间</td>
<td>操作</td>
?</tr>
?<tr id="a1">
<td>1</td>
<td>王明</td>
<td>123456</td>
<td>2011-01-19</td>
<td><input name="1" type="button" id="btnDel" value="删除" /></td>
?</tr>
?<tr id="a2">
<td>2</td>
<td>王明</td>
<td>123456</td>
<td>2011-01-19</td>
<td><input name="2" type="button" id="btnDel2" value="删除" /></td>
?</tr>
?<tr id="a3">
<td>3</td>
<td>王明</td>
<td>123456</td>
<td>2011-01-19</td>
<td><input name="3" type="button" id="btnDel3" value="删除" /></td>
?</tr>
?<tr id="a4">
<td>4</td>
<td>王明</td>
<td>123456</td>
<td>2011-01-19</td>
<td><input name="4" type="button" id="btnDel4" value="删除" /></td>
?</tr>
</table>
</body>
</html>
