jquery之div添加取消及内容替换demo.rar资源-CSDN文库

共2个文件

js：1个

html：1个

jquery

添加取消

内容替换

Demo

5星 · 超过95%的资源需积分: 10 49 浏览量 2010-08-12 14:59:11 上传评论收藏 20KB RAR 举报

在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本示例“jquery之div添加取消及内容替换demo.rar”旨在为初学者提供一个关于如何使用jQuery操作div元素的教程，包括添加、移除div以及替换其内容的方法。 `jquery.js`是jQuery库的核心文件，它是实现这些功能的基础。要使用jQuery，我们需要在HTML文档中引入这个文件，通常放在`<head>`标签内： ```html <script src="jquery.js"></script> ``` 接下来，我们关注`jquery之div添加取消及内容替换demo.html`。在这个文件中，可以看到HTML结构和jQuery的JavaScript代码。HTML可能包含一些初始的div元素，用于演示操作： ```html <div id="container"> <div class="content" id="content1">这是内容1</div> <div class="content" id="content2">这是内容2</div> </div> ``` jQuery允许我们通过选择器来选取特定的元素。例如，我们可以使用`$("#content1")`来选取ID为`content1`的div。以下是一些基本操作的示例： 1. **添加div**：如果你希望在某个元素后添加新的div，可以使用`append()`方法。例如，向ID为`container`的div添加一个新的div： ```javascript $("#container").append("<div class='newContent'>这是新内容</div>"); ``` 2. **移除div**：如果要删除一个div，可以使用`remove()`方法。例如，移除ID为`content2`的div： ```javascript $("#content2").remove(); ``` 3. **替换div内容**：使用`html()`方法可以改变div内的文本或HTML结构。假设我们要将`content1`的文本更改为新的内容： ```javascript $("#content1").html("这是更新后的内容1"); ``` 以上就是在jQuery中对div进行添加、移除和内容替换的基本操作。这些例子展示了jQuery如何简化JavaScript中的DOM操作，使得开发者能够更加高效地实现页面动态交互。对于初学者来说，理解并熟练掌握这些基础功能是进一步学习jQuery其他高级特性的关键步骤。通过实践和不断探索，你将能更好地利用jQuery提升网页开发的效率和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

jquery之div添加取消及内容替换demo.rar （2个子文件）

jquery之div添加取消及内容替换demo.html 3KB

jquery.js 56KB

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery之div添加取消及内容替换demo</title> <script type="text/javascript" src="./jquery.js" ></script> <script language="javascript"> $(document).ready( function(){ $("#Objall").hide(); $("#school").removeAttr("checked");//取消选中 }); function show(){ if($("#school").attr("checked")==true){ $("#Objall").show(); }else{ $("#Objall").hide(); } } var i =1; function addshow(){ i = i+1; var aa=$("#Objtable").html(); aa = "<div id= Objtable"+i+" >" + aa + "</div>"; aa=aa.replace('1',i); $("#divObj").append(aa); } function cancel(){ if(i == 1){ $("#Objall").hide(); $("#school").removeAttr("checked");//取消选中 }else{ $("#Objtable"+i+"").remove(); i = i-1; } } </script> </head> <body> <h3>增加培训机构</h3> <form action="#" method="get"> <table> <tr> <td align="right">培训机构名：</td> <td><input type="text" name="school_name" /></td> </tr> <tr> <td align="right">培训科目:</td> <td><input type="text" name="school_subject" /></td> </tr> <tr> <td align="right">培训对象:</td> <td><input type="text" name="school_trainee" /></td> </tr> <tr> <td align="right">地区：</td> <td><input type="text" name="area" /></td> </tr> <tr> <td align="right">地址：</td> <td><input type="text" name="address" /></td> </tr> <tr> <td align="right">交通情况：</td> <td><input type="text" name="traffic" /></td> </tr> <tr> <td align="right">联系人：</td> <td><input type="text" name="linkman" /></td> </tr> <tr> <td align="right">联系方式：</td> <td><input type="text" name="contact" /></td> </tr> <tr> <td align="right">营业执照：</td> <td><input type="file" name="license" /></td> </tr> <tr> <td align="right">校区介绍：</td> <td><input type="textarea" cols=16 rows=6 name="school_describ" /></td> </tr> </table> <br/> <input type="checkbox" id="school" onclick="show()"/>如果你有分支机构，请填写。 <div id="Objall"> <div id="divObj"> <div id="Objtable"> <table> <tr> <td>分支机构1名：</td> <td><input type="text" name="department_name[]" /></td> </tr> <tr> <td>地区：</td> <td><input type="text" name="department_area[]" /></td> </tr> <tr> <td>地址：</td> <td><input type="text" name="department_address[]" /></td> </tr> <tr> <td>联系人：</td> <td><input type="text" name="department_linkman[]" /></td> </tr> <tr> <td>联系方式：</td> <td><input type="text" name="department_contact[]" /></td> </tr> <tr> <td colspan="2"><hr color="gray"></td> </tr> </table> </div> </div> <a href="#" onclick="addshow()">再添加一个分支机构</a> <a href="#" onclick="cancel()">取消添加</a> </div > <br/> <input type="submit" value="确认"/><input type="button" value="取消" onclick="history.go(-1);"/> </form> </body> </html>

评论收藏

内容反馈