JavaScript实现LI列表数据绑定的方法


Posted in Javascript onAugust 04, 2015

本文实例讲述了JavaScript实现LI列表数据绑定的方法。分享给大家供大家参考。具体如下:

利用JavaScript进行LI列表数据绑定,获取列表里面对应的LI,这是一位高人写的代码,看了才知道,原来并不很复杂,为什么之前用的方法那么笨?

运行效果如下图所示:

JavaScript实现LI列表数据绑定的方法

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS数据绑定</title>
</head>
<body>
<ul id="list">
<li><a href="https://3water.com/article/70585.htm" target="_blank">JavaScript运动减速效果实例分析</a></li>
<li><a href="https://3water.com/article/70584.htm" target="_blank">JavaScript仿静态分页实现方法</a></li>
<li><a href="https://3water.com/article/70583.htm" target="_blank">JavaScript实现选择框按比例拖拉缩放的方法</a></li>
<li><a href="https://3water.com/article/70582.htm" target="_blank">Javascript实现可旋转的圆圈实例代码</a></li>
<li><a href="https://3water.com/article/70581.htm" target="_blank">JavaScript数组各种常见用法实例分析</a></li>
</ul>
<script type="text/javascript">
  var list_obj = document.getElementById("list").getElementsByTagName("li");
  //获取list所有li对象数组
  for (var i = 0; i <= list_obj.length; i++) {
    list_obj[i].onmousemove = function() {
      this.style.backgroundColor = "#cdcdcd";
    }
    list_obj[i].onmouseout = function() {
      this.style.backgroundColor = "#FFFFFF";
    }
    list_obj[i].onclick = new function(n) {
      return function(){alert("这是第" +(n+1)+"条");}
    }(i);
  }
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
canvas知识总结
Jan 25 Javascript
js中创建对象的几种方式
Feb 05 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
用js编写的简单的计算器代码程序
Aug 04 #Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 #Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 #Javascript
JavaScript运动减速效果实例分析
Aug 04 #Javascript
JavaScript仿静态分页实现方法
Aug 04 #Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 #Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 #Javascript
You might like
DSP接收机前端设想
2021/03/02 无线电
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
js注意img图片的onerror事件的分析
2011/01/01 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
python修改注册表终止360进程实例
2014/10/13 Python
python抽象基类用法实例分析
2015/06/04 Python
Python检测网站链接是否已存在
2016/04/07 Python
浅谈python之新式类
2018/08/12 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
收银员的岗位职责范本
2014/02/04 职场文书
总经理岗位职责描述
2014/02/08 职场文书
生物学专业求职信
2014/07/23 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
2014年质检工作总结
2014/11/26 职场文书
公务员年终个人总结
2015/02/12 职场文书
2015年工程部工作总结
2015/04/30 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
生活小常识广播稿
2015/08/19 职场文书