<!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>JavaScript进行LI列表数据绑定的方法_网页代码站(www.webdm.cn)</title>
</head>
<body>
<ul id="list">
<li><a href="#" target="_blank">左右切换鼠标可控的无缝图片滚动代码</a></li>
<li><a href="#" target="_blank">一款经典简洁的CSS滑动门代码</a></li>
<li><a href="#" target="_blank">竖向折叠的CSS滑动菜单</a></li>
<li><a href="#" target="_blank">QQ在线客服JS代码，自适应漂浮在网页右侧</a></li>
<li><a href="#" target="_blank">JS图片滚动代码（无缝、平滑）</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>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>
分享到：
相关推荐
利用JavaScript进行LI列表数据绑定，获取列表里面对应的LI，这是一位高人写的代码，看了才知道，原来并不很复杂，为什么之前用的方法那么笨？ 运行效果如下图所示： 具体代码如下： <!DOCTYPE ...
主要介绍了JavaScript给每一个li节点绑定点击事件的实现方法，包括js循环给li绑定参数不同的点击事件,需要的朋友可以参考下
js循环给li绑定事件实现 点击li弹出其索引值 和内容的方法
Vue+element-ui添加自定义右键菜单的方法示例 1、在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件 <template> @contextmenu.prevent.native="openMenu($event)"> ...... </template> 2、在...
下面是页面的dom结构 代码如下: ”test”> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> 下面是javascript代码 代码如下: //根据ID获取对象 function id(v) { return document.getElementById(v);...
一个便捷的javascript封装的工具包,如果你熟悉jquery的话,那么对于这里面的函数一定会让你感到很上手,因为设计思路类似于jquery,里面封装了一些非常常用dom操作、ajax等函数,例如: 去除字符串两边的空格 var result ...
为下面每个LI绑定一个click事件 <li id=goSomewhere>Go somewhere</li> <li id=doSomething>Do something</li> <li id=sayHi>Say hi</li> 一、传统写法 var item1=document.getElementById(goSomewhere); ...
在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下： <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" ...
题目本身很简单：一个ul中有一千个li，如何给这一千个li绑定一个鼠标点击事件，当鼠标点击时alert出这个li的内容和li的位置坐标xy， <li id=li1>1</li> <li id=li2>2</li> <li id=li3>3</li> ... <li id=li...
轮播图 需求： 图片循环轮播，可点击左右切换，切换状态与<li>绑定，鼠标移入图片悬停，鼠标移出图片继续循环切换。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> 原生js轮播图片...
<body> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> ...id=”score”显示最终分数———————————————- ...bind({事件名：function(){},事件名：function(){}})的方法绑定
余烬 ember-let是将变量绑定到Ember中的模板上下文的附加组件。... 请参阅以下示例： 绑定基本值{{ #let " abc " " 123 " as | first second | }} < li> {{ first }} </ li> < li> {{ second }} </ li
$("ul li:first") 每个 <ul> 的第一个 <li> 元素 $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性 $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素 三. jQuery 事件...
内容索引:脚本资源,Ajax/JavaScript,仿苹果,动感菜单 Javascript仿苹果风格图标滑出导航菜单。...所以，将鼠标事件的触发给LI是最好的办法，li内的元素仅用作动画展示，不绑定如何事件。这里用到de
Vue js图表js与Laravel一起很好地渲染图表轻松绘制单线多条多重混合图功能单个图表多个图表[多个混合图表] [替代数据集] [替代选项] [传递Json数据] [数据绑定和自动渲染] NPM软件包NPM软件包安装npm安装hchs-vue-...
这个文档包含了HTML/css的一些基础，还有JavaScript中的基础语法、DOM、BOM还有一些学习js中面向对象、和移动web开发、AJAX...答： jQuery.on()方法可以给匹配元素（可以是多个）绑定一个或多个函数, off 可以解除绑定
本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下： 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多...
checkbox进行双向绑定 3.点击新增 点击回车 获取输入的内容 增加到列表中 清空输入框 输入框为空 点击回车没效果 4.点击删除对应的待办事项 点击button 删除对应的那个事项 绑定时 传入下表 5.编辑待办事项...