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

jQuery18(小广告效果,动态创建表格)

2016-02-07 00:09 627 查看

小广告效果

知识点:bottom是末端的意思.另外,因为直接在这里写html,所以,小心一些在html和js中不同的写法.

完整实例:

<!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">
$(function () {
$('#btn').click(function () {
//parent 父元素
//注意的是这里是直接写html,所以background-color这种写法
//这里注意bottom 低端 末端 不是down 汗
//使用parent 删除父元素
//float:rigth将X定至右上角
var dvOvj = $('<div style="width:300px;height:200px;background-color:green;position:absolute;right:0;bottom:0"></div>').appendTo($('body'));
$('<span style="float:right; cursor:pointer;">X</span>').click(function () {
$(this).parent().remove();
}).appendTo(dvOvj);

});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示广告" id='btn' />
</body>
</html>

4000

动态创建表格

知识点:键值对的key值不能相同

完整实例:

<!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">
$(function () {
//在这边需要注意的是键值对 key的值不能相同,相同时,不会报错,但是只会显示一个
var dic = { '百度': 'http://www.baidu.com', '百度1': 'http://www.baidu.com', '百度2': 'http://www.baidu.com', '百度3': 'http://www.baidu.com', '百度4': 'http://www.baidu.com' };
$('#btn').click(function () {
var tb = $('<table border=1></table>').appendTo($('body'));
for (var key in dic) {
$('<tr><td>' + key + '</td><td><a href=' + dic[key] + '>' + key + '</a></td></tr>').appendTo(tb);
}
});
});
</script>
</head>
<body>
<input type="button" name="name" value="创建表格" id='btn' />
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航