JavaScript实现LI列表数据绑定的方法
更新时间：2015年08月04日 15:01:52 作者：皮蛋
这篇文章主要介绍了JavaScript实现LI列表数据绑定的方法,可实现绑定Li列表项对应数值项的功能,涉及javascript鼠标onmousemove、onmouseout及onclick等事件的相关使用技巧,需要的朋友可以参考下
本文实例讲述了JavaScript实现LI列表数据绑定的方法。分享给大家供大家参考。具体如下：
利用JavaScript进行LI列表数据绑定，获取列表里面对应的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://www.jb51.net/article/70585.htm" target="_blank">JavaScript运动减速效果实例分析</a></li>
<li><a href="https://www.jb51.net/article/70584.htm" target="_blank">JavaScript仿静态分页实现方法</a></li>
<li><a href="https://www.jb51.net/article/70583.htm" target="_blank">JavaScript实现选择框按比例拖拉缩放的方法</a></li>
<li><a href="https://www.jb51.net/article/70582.htm" target="_blank">Javascript实现可旋转的圆圈实例代码</a></li>
<li><a href="https://www.jb51.net/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程序设计有所帮助。
相关文章
JS中confirm,alert,prompt函数使用区别有哪些呢？2011-01-01
当新闻较多，并且空前有限的时候，使用滚动是一个不错的选择，本章节就通过代码实例介绍一下如何实现此效果，对无缝向上滚动实例代码感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了手机开发必备技巧：javascript及CSS功能代码分享,本文讲解了viewport(可视区域)操作、链接操作、javascript事件等内容,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了js实现无缝循环滚动的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了JS面试题大坑之隐式类型转换实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了JavaScript类的继承操作,结合实例形式总结分析了JavaScript面向对象程序设计中类的继承常见实现方式与操作技巧,需要的朋友可以参考下2018-12-12
1. 保持无侵入性，标记不想知道你的JavaScript代码；2. 严禁修改和扩展Object.prototype!；3. 对JavaScript内建对象的扩展越少越好；4. 跟随标准；5. 或着跟随主导 ；6. 保持灵活；7. 管理内存；8. 淘汰浏览器嗅探；9. 小巧更佳……2009-01-01
下面小编就为大家带来一篇自己封装的一个原生JS拖动方法(推荐)。小编觉得挺不错的，希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-11-11
本文详细讲解了JS截取字符串的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-02-02
这篇文章主要介绍了百度判断手机终端并自动跳转js代码及使用实例,需要的朋友可以参考下2014-06-06
最新评论