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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
javascript调试说明
Jun 07 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 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开发中的中文编码问题
2013/08/08 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
js option删除代码集合
2008/11/12 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
对layui中表单元素的使用详解
2018/08/15 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
Python回调函数用法实例详解
2015/07/02 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Django实现学生管理系统
2019/02/26 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python如何实现的二分查找算法
2020/05/27 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
《石榴》教学反思
2014/03/02 职场文书
硕士生找工作求职信
2014/07/05 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python