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 相关文章推荐
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
vue双向绑定简要分析
Mar 23 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
Javascript中window.name属性详解
Nov 19 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
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
window.location.hash 使用说明
2010/11/08 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python iter()函数用法实例分析
2018/03/17 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
蛋白质世界:Protein World
2017/11/23 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
GWT都有什么特性
2016/12/02 面试题
《鸿门宴》教学反思
2014/04/22 职场文书
个人存款证明书
2014/10/18 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
高一军训感想
2015/08/07 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
导游词之介休绵山
2019/12/31 职场文书
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python