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操作select下拉列表框的代码
Jun 04 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 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一些公用函数的集合
2008/03/27 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
PHP 透明水印生成代码
2012/08/27 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
js实现简单扫雷
2020/11/27 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
护士进修自我鉴定
2014/02/07 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
nginx实现动静分离的方法示例
2021/11/07 Servers