JavaScript實現(xiàn)LI列表數(shù)據(jù)綁定的方法
更新時間：2015年08月04日 15:01:52 作者：皮蛋
這篇文章主要介紹了JavaScript實現(xiàn)LI列表數(shù)據(jù)綁定的方法,可實現(xiàn)綁定Li列表項對應(yīng)數(shù)值項的功能,涉及javascript鼠標(biāo)onmousemove、onmouseout及onclick等事件的相關(guān)使用技巧,需要的朋友可以參考下
本文實例講述了JavaScript實現(xiàn)LI列表數(shù)據(jù)綁定的方法。分享給大家供大家參考。具體如下：
利用JavaScript進行LI列表數(shù)據(jù)綁定，獲取列表里面對應(yīng)的LI，這是一位高人寫的代碼，看了才知道，原來并不很復(fù)雜，為什么之前用的方法那么笨？
運行效果如下圖所示：
具體代碼如下：
<!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://m.fzitv.net/article/70585.htm" target="_blank">JavaScript運動減速效果實例分析</a></li>
<li><a href="http://m.fzitv.net/article/70584.htm" target="_blank">JavaScript仿靜態(tài)分頁實現(xiàn)方法</a></li>
<li><a href="http://m.fzitv.net/article/70583.htm" target="_blank">JavaScript實現(xiàn)選擇框按比例拖拉縮放的方法</a></li>
<li><a href="http://m.fzitv.net/article/70582.htm" target="_blank">Javascript實現(xiàn)可旋轉(zhuǎn)的圓圈實例代碼</a></li>
<li><a href="http://m.fzitv.net/article/70581.htm" target="_blank">JavaScript數(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è)計有所幫助。
您可能感興趣的文章:
- Javascript數(shù)據(jù)結(jié)構(gòu)與算法之列表詳解
- JS無限樹狀列表實現(xiàn)代碼
- js實現(xiàn)無限級樹形導(dǎo)航列表效果代碼
- JS實現(xiàn)左邊列表移到到右邊列表功能
- JS實現(xiàn)的合并兩個有序鏈表算法示例
- JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表和雙向循環(huán)鏈表的實現(xiàn)
- JavaScript數(shù)據(jù)結(jié)構(gòu)之單鏈表和循環(huán)鏈表
- 如何使用JavaScript實現(xiàn)棧與隊列
- JS使用數(shù)組實現(xiàn)的隊列功能示例
- JavaScript基于數(shù)組實現(xiàn)的棧與隊列操作示例
- JS中的算法與數(shù)據(jù)結(jié)構(gòu)之列表(List)實例詳解
相關(guān)文章
javascript設(shè)計模式 – 外觀模式原理與用法實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 外觀模式,結(jié)合實例形式分析了javascript外觀模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
本文主要介紹了提高數(shù)據(jù)訪問速度的方法，具有很好的參考作用，需要的朋友一起來看下吧2016-12-12
javascript add event remove event
javascript事件綁定和刪除功能代碼2008-04-04
JavaScript實現(xiàn)簡單圖片滾動，9張圖告訴你，C羅欲哭無淚，另附源碼下載，方便學(xué)習(xí)2014-06-06
UUID是一種由算法生成的二進制長度為128位的數(shù)字標(biāo)識符，格式為“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”。本文總結(jié)了五個JS生成UUID的方法，感興趣的可以了解一下2022-06-06
Node.js是一套用來編寫高性能網(wǎng)絡(luò)服務(wù)器的JavaScript工具包，一系列的變化由此開始。比較獨特的是，Node.js會假設(shè)你是在POSIX環(huán)境下運行它Linux 或 Mac OS X2012-03-03
url 里面的 #后面的部分 可以實現(xiàn)無刷新的改變url 的值。這個特點非常有用。比如視頻網(wǎng)站土豆中的豆單，你進入視頻列表以后，點擊播放某個視頻。2010-04-04
JS實現(xiàn)可縮放、拖動、關(guān)閉和最小化的浮動窗口完整實例
這篇文章主要介紹了JS實現(xiàn)可縮放、拖動、關(guān)閉和最小化的浮動窗口的方法,實例分析了javascript操作窗口層的技巧,需要的朋友可以參考下2015-03-03
js函數(shù)獲取html中className所在的內(nèi)容并去除標(biāo)簽
本文為大家介紹下如何使用js函數(shù)獲取html中className所在的內(nèi)容，具體實現(xiàn)思路如下，喜歡的朋友可以參考下2013-09-09
javascript如何計算數(shù)組中某值的出現(xiàn)次數(shù)
這篇文章主要介紹了javascript如何計算數(shù)組中某值的出現(xiàn)次數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01