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 相关文章推荐
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
详解javascript中的Error对象
Apr 25 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
vue 自定义组件添加原生事件
Apr 21 Vue.js
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
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
JavaScript知识点整理
2015/12/09 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
python3处理含有中文的url方法
2018/05/10 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
解决方案设计综合面试题
2015/08/31 面试题
初一地理教学反思
2014/01/16 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
《燕子》教学反思
2014/02/18 职场文书
新春文艺演出主持词
2014/03/27 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL