<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>jquery 动态添加删除移动dom元素</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var fieldMax = 5;
$("input#add").click(function(){
if($('div.field').size() < fieldMax) {
addField(this);
}else{
alert("达到最大字段数，请先删除再添加！");
}
});
});
function addField(obj) {
$('div#fields').append(
'<div class="field">' +
'字段名称：'+
'<input type="text" name="fieldTitle" /> ' +
'<input type="button" class="up" value="上移" onclick="up(this);"/>'+
'<input type="button" class="down" value="下移" onclick="down(this);"/>'+
'<input type="button" class="delete" value="delete" />'+
'</div>')
.find("input.delete").click(function(){
$(this).parent().remove();
});
}
function up(obj){
$(obj).parent().prev().before($(obj).parent());
}
function down(obj){
$(obj).parent().next().after($(obj).parent());
}
</script>
</head>
<body>
<div id="fields">
<div class="field">
字段名称：
<input type="text" name="fieldTitle">
<input type="button" class="up" value="上移" onclick="up(this);"/>
<input type="button" class="down" value="下移" onclick="down(this);"/>
<input type="button" class="delete" value="delete"/>
</div>
</div>
<input type="button" value="添加字段" id="add">
</body>
</html>
分享到：
相关推荐
内容概要：本文档详细介绍了基于 JQuery 的 DOM 元素操作，涵盖了各种常见的网页元素操作技巧。具体如专业下拉列表赋值、文本框赋值、单选按钮设置默认选中项、遍历数组展示到页面、更改表格行的背景色以及跳转、...
2. **链式操作**：jQuery对象返回的是一个包含零个或多个DOM元素的集合，这个集合支持链式调用，使得多步操作可以紧凑地写在一起，如 `$("#myDiv").html("Hello").css("color", "red")`。 3. **DOM遍历**：jQuery...
**jQuery 实例教程** ...通过这个jQuery实例教程，你将能够熟练地运用jQuery进行网页开发，无论是简单的交互还是复杂的动态效果，都能轻松应对。实践是检验理解的最好方式，所以不妨现在就动手尝试一下吧！
jQuery是一个广泛应用于Web开发的JavaScript库，其核心特性在于它的轻量级设计和强大的DOM操作能力，特别是其高效的选择器引擎，使得开发者能更便捷地选取和操作页面元素。 一、jQuery的选择器 jQuery的选择器是其...
这个库提供了丰富的选择器来选取DOM元素，以及一系列的方法来操作这些元素，如添加、删除、修改HTML内容，改变样式，响应用户事件，以及创建复杂的动画效果。 ### 文件上传 文件上传是jQuery的一个常见应用，通常...
这个“50个经典jQuery实例”压缩包显然包含了一系列精心挑选的示例，旨在帮助初学者快速掌握jQuery的核心功能和常用技巧。下面，我们将详细探讨这些实例可能涵盖的知识点，并解释它们在实际开发中的应用。 1. **...
jQuery对象和DOM元素之间的转换是关键概念，`$(domElement)`将DOM元素转化为jQuery对象，而`.get(0)`或`.[0]`可将jQuery对象转化为DOM元素。另外，jQuery提供了丰富的插件机制，通过`$.fn.extend()`可以扩展jQuery的...
《jQuery实例大全》 在网页开发中，jQuery是一款极为重要的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本资源集合，"jQuery实例大全"，正是针对这一强大工具的实践应用展示，...
### jQuery 实现 DOM 元素拖拽交换位置的原理和技术点 在网页中实现 DOM 元素的拖拽功能能够让用户通过直观的方式进行元素的排序、移动等操作，从而提升网站的交互性和用户体验。本文介绍利用 jQuery 库来实现 DOM ...
jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的 DOM 操作、事件处理和动画设计。这个"jQuery 实例 经典呀"的压缩包很可能是包含了一系列经典的 jQuery 使用示例，帮助开发者更好地理解和应用...
1. **选择器**：jQuery的选择器是其强大之处，它允许我们以简洁的方式选取DOM元素。例如，`$("#id")`用于选取ID为特定值的元素，`$(".class")`选取所有类名为指定类的元素，而`$("tag")`则选取所有特定类型的元素。...
这可能包括DOM操作（如元素选择、添加、删除）、事件绑定、以及各种动态效果，如淡入淡出、滑动、动画等。通过这些静态页面，学习者可以直观地理解jQuery语法和API，并在没有后端支持的情况下进行实践。 接着，标签...
《jQuery实例集合——深入浅出jQuery编程》 jQuery，这个小巧而强大的JavaScript库，自2006年发布以来，已经成为了Web开发中不可或缺的一部分。它以其简洁的API、丰富的功能以及良好的浏览器兼容性，极大地简化了...
实践中可能涵盖了如何使用jQuery进行DOM操作，如添加、删除和查找元素；如何处理用户事件，如点击、提交等；以及如何实现复杂的动画效果。通过这些实践，开发者可以学习到如何更高效地编写代码，提高页面性能。 **...
jQuery操作DOM节点、数组和字符串 jQuery表单验证 jQuery事件处理 jQuery页面导航（这部分内容较少，增加了几个纯CSS实现） jQuery视觉特效（这部分内容最丰富）。 每个实例都有简洁的注释，基本上原书的精髓都汇聚...
《jQuery实例+锋利的jQuery+API》是一套全面的学习资源，旨在帮助开发者深入理解和熟练运用jQuery库。jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等任务，使得...
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将深入探讨jQuery在表格操作方面的应用实例，这对于前端开发人员来说是极其重要的技能。 首先...
本资源"35个经典Jquery实例方法"为我们提供了一个实用的工具集，包含了开发者在日常工作中可能会用到的jQuery核心功能。下面，我们将详细探讨这些实例方法，帮助你更好地理解和运用jQuery。 1. **选择器（Selectors...
本资源包含一系列的jQuery实例，旨在帮助开发者从初识到精通jQuery，提升开发效率并解决实际开发中遇到的问题。 一、jQuery基础 jQuery的核心理念是“Write Less, Do More”，其通过简化的API接口，让JavaScript...