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 ajaxsubmit上传图片实现代码
Nov 04 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
详解javascript replace高级用法
Feb 17 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
js实现自动锁屏功能
Jun 02 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
Python中每次处理一个字符的5种方法
2015/05/21 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python实现图像外边界跟踪操作
2020/07/13 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
用python制作个音乐下载器
2021/01/30 Python
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
读后感作文评语
2014/12/25 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
用python画城市轮播地图
2021/05/28 Python