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实现的日期控件具体代码
Nov 18 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
js实现分割上传大文件
Mar 09 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
微信小程序 教程之模板
Oct 18 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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模板之Phpbean的目录结构
2008/01/10 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
Dom操作之兼容技巧分享
2011/09/20 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
理解Python中函数的参数
2015/04/27 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
用pycharm开发django项目示例代码
2018/10/24 Python
python是怎么被发明的
2020/06/15 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
python开发入门——set的使用
2020/09/03 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
人事档案接收函
2014/01/12 职场文书
简历中自我评价范文
2015/03/11 职场文书
四则混合运算教学反思
2016/02/23 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
Python实现socket库网络通信套接字
2021/06/04 Python