Jquery文档处理的几种效果
<html>
<head>
<title>File</title>
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
<script language="javascript">
$(document).ready(function(){
/***在元素内部插入内容***/
$("#SH").click(function(){
$("#shp").append("<b>Hello</b>");
});
/***将内容添加到元素内部***/
$("#atd").click(function(){
$("#shp").appendTo("#atdDiv");
});
/***在元素的最前面插入内容***/
$("#atp").click(function(){
$("#prvDiv").prepend($("#preP"));
});
/***将内容插入在元素的最前面***/
$("#atpt").click(function(){
$("#preP").prependTo($("#prvDiv"));
});
/***将内容插入在元素之后***/
$("#aft").click(function(){
$("#aftDiv").after($("#aftP"));
});
/***将内容插入在元素之前***/
$("#bef").click(function(){
$("#aftDiv").before($("#aftP"));
});
/***将内容包裹在元素内部***/
$("#wb").click(function(){
$("#wp").wrap($("#wDiv"));
});
/***替换***/
$("#replace").click(function(){
$("#waitDiv").replaceWith($("#replaceDiv"));
});
/***清空***/
$("#empty").click(function(){
$("#emptyDiv").empty();
});
/***删除***/
$("#remove").click(function(){
$("#emptyDiv").remove();
});
/***复制***/
$("#clone").click(function(){
$("#cloneDiv").clone().insertAfter($("#cloneDiv"));
});
});
</script>
<body>
<p id="shp">I would like to say: </p>
<input type="button" value="Say Hello" id="SH" />
<br><br><br>
<div style="border:1px red solid" id="atdDiv">Is Nothing</div>
<input type="button" value="add to div" id="atd" />
<br><br><br>
<div style="border:1px blue solid" id="prvDiv">Is Previous Div</div>
<p id="preP">Is Previous P</p>
<input type="button" value="add to previous" id="atp" />
<input type="button" value="add to previous 2" id="atpt" />
<br><br><br>
<div style="border:1px green solid" id="aftDiv">Is A Div
<p id="aftP">Is A P</p></div>
<input type="button" value="add after" id="aft" />
<input type="button" value="add before" id="bef" />
<br><br><br>
<div style="border:1px pink solid;height:10px" id="wDiv"></div>
<p id="wp">Is A P</p>
<input type="button" value="wrap" id="wb" />
<br><br><br>
<div style="border:1px black solid;height:10px" id="waitDiv">Waiting For Replace</div>
<div style="border:1px red solid;height:10px" id="replaceDiv">Replaced</div>
<input type="button" value="replace" id="replace" />
<br><br><br>
<div style="border:1px red solid;height:10px" id="emptyDiv">Waiting For Delete</div>
<input type="button" value="empty" id="empty" />
<input type="button" value="remove" id="remove" />
<br><br><br>
<div style="border:1px red solid;height:10px;margin-bottom:10px" id="cloneDiv">Waiting For Clone</div>
<input type="button" value="clone" id="clone" />
<br><br><br>
</body>
</html>
分享到：
相关推荐
几种实用的JQuery图表插件 JQuery图表插件 Flot Highcharts jquerychart jqPlot包下载，以及中文帮助文档
由于项目需求，要使用富客户端，选择了EasyUI，之前并没有接触过，上网搜索一番，没有找到完整的中文文档，项目组又没有英语达人，无奈之下，我硬着头皮，把官方提供的英文文档啃了，一边啃顺便用中文记录下来。...
4.2.2 ready()方法的几种相同写法/86 4.3 绑定事件/86 4.4 切换事件/90 4.4.1 hover()方法/90 4.4.2 toggle()方法/93 4.5 移除事件/94 4.6 其他事件/96 4.6.1 方法one() /97 4.6.2 方法trigger () /98 4.7...
jQuery.sub() jQuery 1.5提供了一种创建和修改jQuery副本的方式。可以用来添加不向外部公开的方法，或者对jQuery的某些方法进行重新定义以提供新功能，或者提供更好的封装、避免名称空间冲突。当然，也可以用来开发...
jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中： 实例 ...
包括CSS2.0中文手册 DHTML手册 javaScript使用手册 jQuery-1.6-API
关于在c# .net 框架下详细讲述了几种采用jQuery ajax的数据传输方法并配有案例，有文档教程以及可运行的源码
3.10.3 功能实现 3.10.4 代码分析 3.11 本章小结 第4章 jquery中的事件与应用 4.1 事件机制 4.2 页面载入事件 4.2.1 ready（）方法的工作原理 4.2.2 ready（）方法的几种相同写法 4.3 绑定事件 ...
汇总ajax 的几种框架的帮助文档包括dwr,jquery,ext mootools,prototype,scriptaclous
iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，这里收集一些基本操作，需要的朋友可以参考下
关于jQuery()方法的第二个参数，有下面这几种用法： 1.jQuery(selector, [context]) 这种用法，相当于 $(context).find(selector) 或者 context.find(selector) 2.jQuery(html, [ownerDocument]) 文档对...
jQuery选择器使得获得页面元素变得更加容易、更加灵活，从而大大减轻了开发人员的压力。如同盖楼一样，没有砖瓦，就盖不起楼房，得不到元素谈何其他各种操作呢？可见,jQuery选择器的重要性。 jquery选择器大方向可以...
访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在。 event对象包含了一个重要属性：target(W3C)/srcElement(IE)，这...
context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。 示例 找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。 HTML 代码: <p>one</p> <div><p>two</p></div> <p>three...
iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，这里收集一些基本操作 DOM方法：父窗口操作IFRAME：window.frames[“iframeSon”].documentIFRAME操作父窗口: window.parent.document jquery...
Java程序员必备几种API帮助文档，包含Spring、Hibernate、JQuery、DHTML ActionScript3.0中文版帮助文档
由于JS同源策略的影响，因此js只能访问同域名下的文档。因此要实现跨域，一般有以下几个方法： 一、处理跨域的方式： 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不...
1:将所有的请求就几种到 DispatcherServlet web.xml配置 2:查询Spring.xml 并注册相应的对象 web.xml 3:将相应的请求绑定到相应的控制器 4:根据控制器解析数据并返回相应的视图模型 5:根据spring配置解析...
ready 方法是 jQuery 实现的在 html 页面在 DOM(Document Object Model, 文档对象模型) 树完全加载完成后触发的一个方法....在 jQuery 3.0 之前, 典型的匿名...在 jQuery 3.0 发布之前, 有以下几种 ready 方法的使用方式: