`
wangxiao5530
  • 浏览: 136609 次
  • 性别: Icon_minigender_2
  • 来自: 大连
社区版块
存档分类
最新评论

jQuery实现动态生成Dom列表并左右移动(一)

 
阅读更多

页面效果如下:


 

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/WX_TEST/js/jquery-1.4.3.min.js"></script>
<style>
	#ulLeft {float:left;list-style:none;border:1px solid #000;padding:0;width:100px;height:120px}
	#ulRight {float:left;list-style:none;border:1px solid #000;margin-left:100px;padding:0;width:100px;height:120px}
	.selLi {background:green}
</style>
</head>
<body>
	<div id="divAll">
		<ul id="ulLeft">
		</ul>
		<ul id="ulRight">
		</ul>
	</div>
</body>

<script> 
	$(function(){
		var jsonArr = [{"id":1,"name":"Andrew"},
		               {"id":2,"name":"Bruce"},
		               {"id":3,"name":"Simpzon"},
		               {"id":4,"name":"SitePoint"}];
		
		for(var index=0;index<jsonArr.length;index++){
			
			var liObj = $("<li id="+ jsonArr[index].id +">"+ jsonArr[index].name +"</li>")
				.click(function(){
					if($(this).parent().attr("id") == "ulLeft"){
						$("#ulRight").append($(this));
					}else{
						$("#ulLeft").append($(this));
					}
				})
			$("#ulLeft").append(liObj);
		}
	});
	
</script>

</html>

 

  • 大小: 28.8 KB
分享到:
评论

相关推荐

    jquery实现动态背景效果.rar

    动态背景的一个常见实现是使用CSS3的精灵图(sprite)技术,结合jQuery的定时器功能。通过改变背景位置,可以实现无限循环的背景动画。例如,你可以创建一个包含多个状态的背景图像,然后使用jQuery每隔一定时间调整...

    jquery实现动态天气效果的demo

    【jQuery实现动态天气效果】 ...通过以上步骤,你就可以使用jQuery实现一个动态的天气效果展示,为用户带来生动有趣的交互体验。记得在实际项目中,根据需求和性能考虑选择合适的API、动画效果以及优化策略。

    Jquery实现问卷调查

    描述中的“上下移动调整次序”功能,可以通过获取问卷问题的DOM元素,然后利用jQuery的`.before()`和`.after()`方法来调整它们在DOM树中的位置。例如,如果用户希望将一个问题上移,我们可以找到该问题的DOM节点,...

    不同排序算法动态生成效果JQuery实现

    本文将详细探讨如何使用JQuery库来实现各种排序算法的动态生成效果,包括冒泡排序、堆排序、快速排序和插入排序,并在同一个界面上对比这些排序算法的效率。 首先,让我们从冒泡排序开始。冒泡排序是一种简单直观的...

    jQuery网址提交生成二维码图片

    总结来说,结合jQuery和二维码生成库,我们可以轻松实现一个动态生成二维码的Web应用,为用户提供便捷的网址分享方式。这个过程涉及到了前端开发中的表单处理、事件监听、第三方库的使用等多个知识点,是学习和实践...

    基于bootstrap和jquery的可拖拽移动div,可预览的页面生成器

    标题中的“基于bootstrap和jquery的可拖拽移动div,可预览的页面生成器”指的是一个Web开发工具,它利用Bootstrap框架和jQuery库构建,允许用户通过拖拽和放置的方式设计网页布局,并实时预览编辑效果。Bootstrap是...

    使用jQuery实现的效果

    jQuery是一个流行的JavaScript库,它简化了JavaScript的许多复杂性,使得开发者能够更轻松地实现动态网页效果。 首先,jQuery的核心在于其选择器功能。通过$.fn.extend()方法,jQuery提供了一种简洁的方式来选取DOM...

    基于jquery二维码生成插件jquery.qrcode.js在线生成二维码

    标题提到的"基于jquery二维码生成插件jquery.qrcode.js在线生成二维码",就是利用jQuery与名为`jquery.qrcode.js`的插件来实现在网页上动态生成二维码的功能。这个插件允许开发者通过简单的JavaScript调用来创建...

    jQuery用户交互动态展示信息特效.zip

    5. **DOM操作**:jQuery提供了对DOM(文档对象模型)的操作,例如`append`、`prepend`、`remove`等,可以在动画过程中添加、移除或改变元素,以实现排骨图元素的动态生成和消失。 6. **延迟和定时器**:为了控制...

    简单jQuery生成二维码

    在“简单jQuery生成二维码”的场景中,jQuery将作为我们的主要工具,帮助我们更方便地与页面元素交互。 `jquery.qrcode.js`是专门为jQuery设计的一个插件,它的主要功能就是生成二维码。这个插件接收一串数据和一些...

    使用jquery.qrcode生成二维码

    jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画效果。结合jQuery,我们可以使用像`jquery.qrcode`这样的插件来轻松地在网页上生成二维码。下面我们将深入探讨如何使用`jquery.qrcode`来生成...

    js生成二维码jquery.qrcode.js

    "js生成二维码jquery.qrcode.js" 是一个基于JavaScript和jQuery的库,用于在网页上动态生成二维码。这个功能在移动互联网应用、网站链接分享、电子票务等领域有广泛的应用。 首先,我们要理解JavaScript(简称JS)...

    jQuery联系人生成二维码代码.zip

    总的来说,使用jQuery生成联系人二维码是一种实用且创新的Web交互方式,它利用JavaScript的动态特性,结合二维码技术,为用户提供了一种快速添加联系人的方式。通过掌握这一技术,开发者可以提升网站的互动性和实用...

    【Jquery经典特效23】jQuery输入网址生成二维码代码

    在本教程中,我们将深入探讨如何使用jQuery库创建一个功能,允许用户输入网址,并自动生成对应的二维码。这个功能在很多场合都非常有用,比如在分享网页链接时,通过二维码可以快速扫描打开,尤其在移动设备上更为...

    基于jquery实现左右上下移动效果

    通过上述知识点的分析,我们可以了解到,使用jQuery来实现元素的移动效果是一个综合性的应用,它包括了对DOM元素的操作、事件监听、逻辑判断和动态内容的交互控制等多个方面。通过这些技术的组合,开发者可以创造出...

    jquery实现俄罗斯方块

    在俄罗斯方块中,游戏界面由一排排的方格组成,这些方块需要动态地添加、移动和消除。通过jQuery,我们可以轻松地选取元素,进行相应的操作,比如设置样式、更新内容等。 2. **事件处理**:游戏中的用户交互,如...

    jQuery动态创建表格生成器代码.zip

    本资源“jQuery动态创建表格生成器代码.zip”提供了一种利用jQuery实现动态创建表格的方法,这对于数据展示和交互式用户体验至关重要。下面将详细探讨jQuery动态创建表格的核心知识点及其在网页特效、CSS特效和...

    jquery动态画廊滚动效果.zip

    "jQuery动态画廊滚动效果"就是一个典型的应用,它巧妙地将JavaScript的动态特性与jQuery库相结合,实现了图片展示的新颖方式。本文将深入解析这一效果的工作原理和实现方法。 首先,jQuery动态画廊滚动效果的核心...

    动态生成jqMultiple 实例

    首先,`jqMultiple`可能是开发者自定义的一个插件或函数,用于实现左右两列列表的交互功能。在jQuery中,我们可以创建一个函数来处理这种交互,例如: ```javascript function jqMultiple(options) { // 初始化...

    基于jQuery实现的输入网址生成二维码特效源码.zip

    该压缩包文件“基于jQuery实现的输入网址生成二维码特效源码.zip”包含了使用JavaScript库jQuery创建的一个功能,即用户输入网址后,系统自动生成对应的二维码。这个功能在现代网页设计中非常常见,常用于分享链接...

Global site tag (gtag.js) - Google Analytics