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 SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
vue如何限制只能输入正负数及小数
Jul 04 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
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
让您的菜单不离网站
2006/10/03 Javascript
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
js CSS操作方法集合
2008/10/31 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
详解JavaScript的this指向和绑定
2020/09/08 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python表示矩阵的方法分析
2017/05/26 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python xpath获取页面注释的方法
2019/01/14 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
python爬虫请求头设置代码
2020/07/28 Python
解决python3输入的坑——input()
2020/12/05 Python
python实现图片转字符画的完整代码
2021/02/21 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
精彩的大学生自我评价
2013/11/17 职场文书
药品采购员岗位职责
2014/02/08 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers