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的几种使用方法，帮助你更好地理解和运用这一强大的工具来提升网页设计的效率和用户体验。 1. **DOM操作**：jQuery的核心功能之一就是对HTML文档对象模型（DOM）进行操作。通过选择器，如`...
jQuery手风琴效果是一种常见的网页交互设计，它利用JavaScript库jQuery实现了一种可折叠和展开的面板效果，常用于导航菜单、信息展示等场景。在网页中，这种效果可以让用户在一个有限的空间内查看和访问大量内容，...
**RIA（Rich Internet Application）应用开发实验指导书：实验二 jQuery文档处理** 在RIA应用开发中，jQuery是一个非常重要的库，它简化了JavaScript的操作，尤其是处理DOM（Document Object Model）和事件绑定。本...
通过这个文档，开发者可以快速查找和学习jQuery的核心功能，了解如何利用这些功能来实现页面的动态效果和数据交互。 其次，`jquery-nightly.js`是jQuery的夜间构建版本。"Nightly"通常指的是软件开发中每天更新的...
在创建jQuery页面加载效果时，通常会涉及到以下几个关键知识点： 1. **DOM Ready**：在执行任何操作之前，必须确保DOM（文档对象模型）已经完全加载。jQuery的$(document).ready()函数用于确保这一点，只有当页面...
在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画以及Ajax交互等任务。"jQuery widget"是jQuery UI框架的一部分，它提供了一种封装复杂交互和视图组件的方法，使得开发者...
总的来说，实现"jquery案例图片轮换展示效果"需要深入理解和灵活运用jQuery的DOM操作、事件处理和动画功能。通过精心设计和优化代码，我们可以创建出既美观又实用的图片轮换展示效果，提升网页的互动性和吸引力。这...
在IT行业中，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本文将详细探讨如何利用jQuery实现图片展示页面，并结合CSS进行美化，以达到类似QQ相册的效果。 首先，...
在这个名为"jQuery流行广告效果"的资源包中，我们可以看到几个关键组成部分，包括HTML文件、CSS样式表、图片以及JavaScript脚本，这些都是创建动态广告效果的基础。 首先，`index.htm`是主页面文件，它通常包含网页...
jQuery相册图片滤镜效果，就是一种能够为网站增添视觉吸引力和互动性的技术，尤其适用于企业网站和电商商城。本文将深入探讨如何利用jQuery实现这种酷炫的图片滤镜效果，并结合提供的文件进行详细解析。 首先，我们...
标题滑动框效果是网页设计中一种常见的动态展示方式，主要用来吸引用户的注意力，提高页面的交互性。在本案例中，我们使用了JavaScript库jQuery来实现这一效果。jQuery因其简洁易用的API和丰富的插件，成为了网页...
1. **jQuery**：这是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画以及Ajax交互，是Web开发中的常用工具。 2. **EasyUI**：基于jQuery的UI框架，它封装了一系列的UI组件，使得开发者可以通过简单...
jQuery图片自动滑动门效果是一种常见的网页动态展示技术，它利用jQuery库的高效特性实现图片的无缝切换，为用户带来流畅的视觉体验。在网页设计中，这种效果常用于制作图片展示、产品轮播或者幻灯片等组件，能够吸引...
在实现jQuery首页轮播效果时，主要涉及以下几个关键知识点： 1. **jQuery库**: jQuery是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画制作和Ajax交互。它提供了一系列方便的API，使得开发者能更...
总结一下，实现一个可用的jQuery文档树效果需要几个关键步骤： 1. 使用HTML构建出树形结构，并使用合适的标签来表示节点和层级关系。 2. 利用CSS定义文档树的样式，包括节点的形状、颜色、布局等，同时确保嵌套列表...
3. **事件处理**：jQuery提供了一种统一的方式来绑定和触发事件。比如，`click()`函数用于监听点击事件，`on()`和`off()`用于动态绑定和解除事件监听。 4. **动画效果**：jQuery的动画功能强大，包括`fadeIn()`, `...
在“jQuery CHM 格式帮助文档”中，你可以找到关于jQuery库的详尽信息，包括但不限于以下几个关键知识点： 1. **jQuery选择器**：jQuery的选择器基于CSS，允许开发者高效地选取DOM元素。例如，`$("#id")`选取ID为...
"jQuery双击图片放大缩小效果"是一种创新的交互设计，能够提升用户浏览图片时的视觉体验。这个特效通过使用JavaScript库jQuery实现，允许用户双击图片后，图片会独立出来显示，并且其他页面元素变暗，创造出一种聚焦...