這篇文章主要介紹了JavaScript實(shí)現(xiàn)LI列表數(shù)據(jù)綁定的方法,可實(shí)現(xiàn)綁定Li列表項(xiàng)對應(yīng)數(shù)值項(xiàng)的功能,涉及javascript鼠標(biāo)onmousemove、onmouseout及onclick等事件的相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)LI列表數(shù)據(jù)綁定的方法。分享給大家供大家參考。具體如下：

利用JavaScript進(jìn)行LI列表數(shù)據(jù)綁定，獲取列表里面對應(yīng)的LI，這是一位高人寫的代碼，看了才知道，原來并不很復(fù)雜，為什么之前用的方法那么笨？

運(yùn)行效果如下圖所示：

具體代碼如下：

<!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數(shù)據(jù)綁定</title>
</head>
<body>
<ul id="list">
<li><a href="http://www.dbjr.com.cn/article/70585.htm" target="_blank">JavaScript運(yùn)動(dòng)減速效果實(shí)例分析</a></li>
<li><a href="http://www.dbjr.com.cn/article/70584.htm" target="_blank">JavaScript仿靜態(tài)分頁實(shí)現(xiàn)方法</a></li>
<li><a href="http://www.dbjr.com.cn/article/70583.htm" target="_blank">JavaScript實(shí)現(xiàn)選擇框按比例拖拉縮放的方法</a></li>
<li><a href="http://www.dbjr.com.cn/article/70582.htm" target="_blank">Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼</a></li>
<li><a href="http://www.dbjr.com.cn/article/70581.htm" target="_blank">JavaScript數(shù)組各種常見用法實(shí)例分析</a></li>
</ul>
<script type="text/javascript">
  var list_obj = document.getElementById("list").getElementsByTagName("li");
  //獲取list所有l(wèi)i對象數(shù)組
  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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: