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 相关文章推荐
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
js获取url传值的方法
Dec 18 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
Vue.use源码学习小结
Jun 20 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
浅析Jquery操作select
2016/12/13 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python中bisect的用法
2014/09/23 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python类的继承和多态代码详解
2017/12/27 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python能否java成为主流语言吗
2020/06/22 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
博士生入学考试推荐信
2013/11/17 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
优秀毕业生求职信
2014/06/05 职场文书
甘南现象心得体会
2014/09/11 职场文书
党支部三会一课计划
2014/09/24 职场文书
工程承包协议书
2014/10/20 职场文书
故宫的导游词
2015/01/31 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书