无刷新评论(动态添加)
完整实例:
<!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>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//br 换行符
$(function () {
$('#btn').click(function () {
//注意,获取id 加#
//注意,在这里value是值,需要括号括起来但是不写,表示获取当前的值
/*子元素. appendTo(父元素) 前者加到后者中 append后者加到前者中
子元素.prependTo(父元素) 主动巴结到第一个
*/
var txtObj = $('#txt').val();
var areaObj = $('#textContent').val();
$('<tr><td>' + txtObj + '</td><td>' + areaObj + '</td></tr>').appendTo($('#tb'));
});
});
</script>
</head>
<body>
<table id='tb'>
<tr>
<td>
猫猫:
</td>
<td>
沙发
</td>
</tr>
</table>
<br />
昵称:<input type="text" name="name" value=" " id='txt' /><br />
<textarea id='textContent' rows='10' cols='15'></textarea><br />
<input type="button" name="name" value="评论" id='btn' />
</body>
</html>
清空元素
如果使用remove方法,则将dv层一起删除
实例:
$('#dv').remove();
如果使用empty,则清空该层下的内容
实例:
$('#dv').empty();
完整实例:
<!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>
<title></title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//连带id为dv的层全部删除
// $('#dv').remove();
//清空该层下内容
//写代码最好成对写,以免忘记啦
$('#dv').empty();
});
});
</script>
</head>
<body>
<input type="button" name="name" value="清空元素" id='btn' />
<div id='dv' style='width: 300px; height: 100px; border: 1px solid red;'>
<input type="text" name="name" value="文本框" />
<input type="button" name="name" value="我骄傲" />
</div>
</body>
</html>