js简单实现交换Li的值


Posted in Javascript onMay 22, 2014

交接li的值.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>交换Li的值</title> 
<script type="text/javascript"> 
window.onload= function() { 
var lis = document.getElementById("ulList").childNodes; for (var i = 0; i < lis.length; i++) { 
var myli = lis[i]; 
//判断是否是标签 
if (myli.nodeType == 1) { 
//和下面的一个li交换位置 
myli.onclick = function() { 
if (this.nextElementSibling) { 
var nextli = this.nextElementSibling;//这里只能用this,不能用myli 
document.getElementById("ulList").insertBefore(nextli, this); 
} 
}; 
} 
} 
} 
</script> 
</head> 
<body> 
<ul id="ulList"> 
<li>北京</li> 
<li>山西</li> 
<li>上海</li> 
<li>天津</li> 
<li>河南</li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
javascript this用法小结
Dec 19 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
js操作iframe父子窗体示例
May 22 #Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 #Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 #Javascript
jQuery异步验证用户名是否存在示例代码
May 21 #Javascript
jQuery取id有.的值的方法
May 21 #Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 #Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 #Javascript
You might like
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP安全配置详细说明
2011/09/26 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
求得div 下 img的src地址的js代码
2007/02/28 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python的Django框架中的Context使用
2015/07/15 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python ubplot使用方法解析
2020/01/10 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
项目副经理岗位职责
2013/12/30 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
英语教研活动总结
2014/07/02 职场文书
个人安全生产责任书
2014/07/28 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
院系推荐意见
2015/06/05 职场文书
运动会广播稿50字
2015/08/19 职场文书
党性修养心得体会2016
2016/01/21 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书