jQuery游戏节点的动态新增和删除的实现
第一步:页面的结构剖析
<!-- 页面结构,最外层的是一个div.盒子容器; 3个单独的dl,带有项目和描述的描述列表 dl的结构:包括一个dt(标题)若干个dd描述; 两个目标: 第一个:删除功能;删除游戏本身; 第二个:新增游戏;新增的是一个dl节点,包含了若干的html代码。 --> <div id=‘listbox‘> <dl> <dt><img src="images/p1.jpg" /></dt> <dd>街机三国</dd> <dd><a class=‘del‘ href=‘javascript:void(0);‘>删除</a></dd> </dl> <dl> <dt><img src="images/p2.jpg" /></dt> <dd>霸域</dd> <dd><a class=‘del‘ href=‘javascript:void(0);‘>删除</a></dd> </dl> <dl> <dt><img src="images/p3.jpg" /></dt> <dd>王者农药</dd> <dd><a class=‘del‘ href=‘javascript:void(0);‘>删除</a></dd> </dl> <div class=‘clear‘></div> <input type="button" value=‘新增游戏‘ class=‘add‘/> </div>
二.CSS 样式设置
*{ margin:0px; padding:0px; font-size:12px; } #listbox{ margin:10px; padding:15px; border:1px solid #CCCCCC; color:#0066FF;overflow: auto; } dl{ display:block; float:left; margin:15px; } dd{ font-size:14px; color:#663300; } dd a{ text-decoration:none; font-size:14px; color:#FF3300; } dd a:hover{ text-decoration:underline; } .clear{ clear:both; height:0px; }
三.JQuery代码的实现
//游戏待完善代码 //Author:写上你的名字; $(function(){ //加载事件; //任务1:先找删除选择器a标签 // $(".del").click(function(){ // //要明白删除的是哪个选择器对象;删除按钮和要删除对象的关系 // //要掌握当前节点和待删除节点的关系; // $(this).parent().parent().remove(); // }); //动态删除新增节点 $(document).on(‘click‘, ‘.del‘, function () { $(this).parent().parent().remove(); }); //删除代码结束,其他代码开始 $(".add").click(function(){ //定义了一个node对象,让它赋值为待增加的html元素; let node="<dl>" +"<dt><img src=‘images/p4.jpg‘ /></dt>" +"<dd>王者农药</dd>" +"<dd><a class=‘del‘ href=‘javascript:void(0);‘>删除</a></dd>" +"</dl>"; //当前节点插入到某个节点之前insertBefore(后面节点); $(node).insertBefore($(".clear")); //$("#listbox").append(node); }); })