JavaScript實(shí)現(xiàn)LI列表數(shù)據(jù)綁定的方法
本文實(shí)例講述了JavaScript實(shí)現(xiàn)LI列表數(shù)據(jù)綁定的方法。分享給大家供大家參考。具體如下:
利用JavaScript進(jìn)行LI列表數(shù)據(jù)綁定,獲取列表里面對(duì)應(yīng)的LI,這是一位高人寫(xiě)的代碼,看了才知道,原來(lái)并不很復(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)分頁(yè)實(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ù)組各種常見(jiàn)用法實(shí)例分析</a></li> </ul> <script type="text/javascript"> var list_obj = document.getElementById("list").getElementsByTagName("li"); //獲取list所有l(wèi)i對(duì)象數(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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- Javascript數(shù)據(jù)結(jié)構(gòu)與算法之列表詳解
- JS無(wú)限樹(shù)狀列表實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)無(wú)限級(jí)樹(shù)形導(dǎo)航列表效果代碼
- JS實(shí)現(xiàn)左邊列表移到到右邊列表功能
- JS實(shí)現(xiàn)的合并兩個(gè)有序鏈表算法示例
- JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表和雙向循環(huán)鏈表的實(shí)現(xiàn)
- JavaScript數(shù)據(jù)結(jié)構(gòu)之單鏈表和循環(huán)鏈表
- 如何使用JavaScript實(shí)現(xiàn)棧與隊(duì)列
- JS使用數(shù)組實(shí)現(xiàn)的隊(duì)列功能示例
- JavaScript基于數(shù)組實(shí)現(xiàn)的棧與隊(duì)列操作示例
- JS中的算法與數(shù)據(jù)結(jié)構(gòu)之列表(List)實(shí)例詳解
相關(guān)文章
JS中confirm,alert,prompt函數(shù)區(qū)別分析
JS中confirm,alert,prompt函數(shù)使用區(qū)別有哪些呢?2011-01-01基于JS實(shí)現(xiàn)新聞列表無(wú)縫向上滾動(dòng)實(shí)例代碼
當(dāng)新聞?shì)^多,并且空前有限的時(shí)候,使用滾動(dòng)是一個(gè)不錯(cuò)的選擇,本章節(jié)就通過(guò)代碼實(shí)例介紹一下如何實(shí)現(xiàn)此效果,對(duì)無(wú)縫向上滾動(dòng)實(shí)例代碼感興趣的朋友一起學(xué)習(xí)吧2016-01-01手機(jī)開(kāi)發(fā)必備技巧:javascript及CSS功能代碼分享
這篇文章主要介紹了手機(jī)開(kāi)發(fā)必備技巧:javascript及CSS功能代碼分享,本文講解了viewport(可視區(qū)域)操作、鏈接操作、javascript事件等內(nèi)容,需要的朋友可以參考下2015-05-05js實(shí)現(xiàn)無(wú)縫循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無(wú)縫循環(huán)滾動(dòng)的具體代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08JS面試題大坑之隱式類(lèi)型轉(zhuǎn)換實(shí)例代碼
這篇文章主要介紹了JS面試題大坑之隱式類(lèi)型轉(zhuǎn)換實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10JavaScript類(lèi)的繼承操作實(shí)例總結(jié)
這篇文章主要介紹了JavaScript類(lèi)的繼承操作,結(jié)合實(shí)例形式總結(jié)分析了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中類(lèi)的繼承常見(jiàn)實(shí)現(xiàn)方式與操作技巧,需要的朋友可以參考下2018-12-12JavaScript庫(kù) 開(kāi)發(fā)規(guī)則
1. 保持無(wú)侵入性,標(biāo)記不想知道你的JavaScript代碼;2. 嚴(yán)禁修改和擴(kuò)展Object.prototype!;3. 對(duì)JavaScript內(nèi)建對(duì)象的擴(kuò)展越少越好;4. 跟隨標(biāo)準(zhǔn);5. 或著跟隨主導(dǎo) ;6. 保持靈活;7. 管理內(nèi)存;8. 淘汰瀏覽器嗅探;9. 小巧更佳……2009-01-01百度判斷手機(jī)終端并自動(dòng)跳轉(zhuǎn)js代碼及使用實(shí)例
這篇文章主要介紹了百度判斷手機(jī)終端并自動(dòng)跳轉(zhuǎn)js代碼及使用實(shí)例,需要的朋友可以參考下2014-06-06