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创建div 实现代码
Apr 27 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 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 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
js href的用法
2010/05/13 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
运动会开幕式邀请函
2014/02/03 职场文书
离婚协议书标准格式
2014/10/04 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
业务员岗位职责范本
2015/04/03 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
导游词之上海豫园
2019/10/24 职场文书
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
python计算列表元素与乘积详情
2022/08/05 Python