`
wangxiao5530
  • 浏览: 133917 次
  • 性别: 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代码段

    1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 ...

    ixedit:IxEdit是用于Web的基于JavaScript的交互设计和Javascript(jQuery)代码生成工具

    使用IxEdit,设计人员可以练习DOM脚本,而无需编写代码来动态更改,添加,移动或转换网页上的元素。 尤其是,在Web应用程序的原型设计阶段中,IxEdit必须非常有用,以便快速尝试各种交互。 对于研究jQuery和jQuery...

    网页版2048游戏.rar

    它完美复现了经典的2048游戏玩法,并在界面设计和用户体验上进行了优化,使玩家能够在浏览器中轻松享受这一数字合成游戏的乐趣。 技术栈说明: HTML:构建游戏的基本框架,包括游戏界面、数字方块等元素。 CSS:...

    JavaScript基础教程第8版

    书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨...

    domJSON:尽快将DOM树转换为紧凑的JSON对象,反之亦然

    第一个演示简单地复制了DOM树的给定分支,这可能对最终用户的错误日志记录,状态跟踪等有用。第二个演示对大量DOM节点进行了批量更新,但是性能要比“传统” jQuery选择&gt; .each()&gt;更新模式。 概括地说,该项目的...

    tetris.js:通过重新构建俄罗斯方块来学习 Javascript 和 JQuery

    俄罗斯方块.js 通过重新构建俄罗斯方块来学习 Javascript 和 JQuery 在准备作为编程新手的 Hack Reactor 入学...左右移动形状 定义 Tetromino 旋转你的形状 修复两个错误 添加重力 生成新形状 修复更多错误 空整行

    史上最好传智播客就业班.net培训教程60G 不下会后悔

    Dom是实现网页动态效果的技术,在网站越来越个性化年代,招聘企业对应聘者的Dom水平要求非常高;JQuery是近几年异军突起的JavaScript框架库,几乎成了Web前端开发事实上的标准,大部分企业都是使用JQuery进行Web前端...

    PHP100视频教程全集112集BT种子【PHP经典】

    ... ... ... ...PHP100视频教程15:PHP生成HTML文件原理 ...PHP100视频教程110:Jquery案例 之 双下拉框内容移动 PHP100视频教程111:Jquery案例 之 复选框与隔行换色 PHP100视频教程112:Jquery案例 之 双击编辑异步更新

    littlefoot:没有足迹的脚注

    这是从分叉由,并不需要jQuery的。 只需在您的页面上包含代码,脚注将被自动检测并通过以下方式进行改进: 脚注的链接将替换为可单击/可点按的按钮,从而使它们的点击变得更容易。 单击/轻击脚注按钮时,脚注...

    酷炫的爆栈网源码.zip

    搜索了很久,没有找到一个符合我要求的“较为全面”地表述Web前端技术大系的图表。所以我们自行设计了这个Web前端技术栈。 这个图表里的分类未必准确,相关技术也难免会有遗漏,欢迎大家指点以便不断改进。 Web...

    Java学习笔记-个人整理的

    {4.4}散列表与HashMap}{83}{section.4.4} {4.4.1}java.util.HashMap}{83}{subsection.4.4.1} {4.5}\ttfamily java.util.HashSet}{84}{section.4.5} {4.6}泛型}{84}{section.4.6} {4.7}集合的迭代(Iterator)}{...

Global site tag (gtag.js) - Google Analytics