JQuery动态生成控件 网站列表
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function () {
//========================1============================
$("input[value=click]").click(function () {
var $link = $("<a id='a1' href='http://www.baidu.com'>百度</a>");
$link.css("color", "red");
$link.click(function () {
alert("我是动态创建的。");
//阻止后续内容进行 类似href="javascript:void(0)"
return false;
});
////这样是错误的还有添加到文档中
//$("#a1").css("background-color","yellow");
$("#d1").append($link);
});
//=======================2=================================
//动态生成网站列表
$("input[value=click]").click(function () {
//判断对象是否存在，如果存在什么都不做
if ($("#tb").length > 0) {
return;
}
var sites = [{ "name": "百度", "site": "www.baidu.com" },
{ "name": "网易", "site": "www.163.com" },
{ "name": "腾讯", "site": "www.qq.com" }];
var $tb = $("<table id='tb'></table>");
$tb.css("border", "1px");
$tb.css("width", "400px");
$("#d1").append($tb);
//$的静态方法
$.each(sites, function () {
var $tr = $("<tr></tr>");
$tb.append($tr);
//获取json中的键和值
var $td = $("td><a href='" + this.site + "'>" + this.name + "</a></td>");
$tr.append($td);
//找到$td的父元素 还可以找到$td.siblings()
$td.parent().css("background-color", "green");
});
});
//===========================3==========================
//remove()是删除节点，remove()方法返回值是被删除的节点的对象，还可以使用被删除的节点
$("input[value=click]").click(function () {
$text = $("input[type=text]").remove();
$("#d3").append($text);
});
//empty()是清空节点内容，empty()方法返回值是被清空的节点的对象，还可以使用被清空的节点
$("input[value=click]").click(function () {
$text = $("input[type=text]").empty();
$("#d3").append($text);
});
});
</script>
</head>
<body>
<%--1和2--%>
<form id="form1" runat="server">
<div id="d1">
<input type="button" value="click" />
</div>
</form>
<%--3--%>
<div id="d2">
<input type="text" />
<input type="button" value="click"/>
</div>
<div id="d3"></div>
</body>
</html>
