jQuery学习12---动态添加控件，网站列表的实现

来源：互联网发布：知乎护肤品各经典产品编辑：程序博客网时间：2024/05/16 04:56
<html><head><meta http-equiv="Content-Type" content="text/html;charset=GBK"><title></title><script src="../jquery-1.8.2.js" type="text/javascript"></script><style type="text/css"></style><script type="text/javascript">$(function(){//点击按钮时动态生成控件演示$(":input[value=click]").click(function(){//在内存中创建一个jQuery对象var $alink = $("<a id='a1' href='www.baidu.com'>baidu</a>");//可以对对象设置样式，并添加事件$alink.css("color","red");$alink.click(function(){alert("hhaa");return false;});//不会alert，因为a1还没有加载，可以放在append的后面$("a1").click(function(){alert("a1");return false;});//追加到d1,div结束标签之前。$("#d1").append($alink);});//动态生成网战列表var json = [{"name":"baidu","site":"http://www.baidu.com"},{"name":"csdn","site":"http://www.csdn.net"},{"name":"sina","site":"http://www.sina.com"}];//1、动态创建表格var $tb = $("<table id='tb'></table>");$tb.attr("border","1px");$tb.attr("width","400px");//2、把表格对象添加到div中$("#sites").append($tb);$.each(json,function(){//this，指代的是一个json对象，this.name就是name的值,this.site就是site的值var $tr = $("<tr></tr>");$tb.append($tr);//在tr中有两列var $td = $("<td><a href='"+this.site+"'>"+this.name+"</a></td>");$tr.append($td);$td = $("<td>"+this.site+"</td>");$tr.append($td);});});</script></head><!--动态创建Dom节点--><body><div id="d1">aaaa<input type="text" /></div><input type="button" value="click" /><hr/><div id="sites"><div></body></html>