溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關(guān)jQuery Templates插件的使用方法是什么，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
考慮到很多新學(xué)者，加上國內(nèi)這方面資料也不多，我們還是一步一步來看看jQuery Templates的使用方法。比如我們有下邊的數(shù)據(jù)集：
var users = [ { name: "Google", website: "google.com" }, { name: "jQuery學(xué)習(xí)", website: "jquery001.com" } ];我們的目的是以無序列表(ul)的形式將網(wǎng)站名稱和對應(yīng)的網(wǎng)址顯示出來，在以前我們經(jīng)常使用的方法如下：
var result = ""; for (var i = 0; i < users.length; i++) { result += "<li><a href='http://" + users[i].website + "'>" + users[i].name + "</a></li>"; } $(result).appendTo("ul");下邊這種寫法使用了jQuery Tempates，個人感覺可讀性變得更好一些，如下：
<script id="userTemplate" type="text/html"> <li><a href="http://${website}">${name}</a></li> </script>接下來，調(diào)用jQuery Templates中的方法如下：
$("#userTemplate").render(users).appendTo("ul");這樣我們就已經(jīng)實現(xiàn)了我們的目標，在我看到的資料中，作者使用的方法是tmpl()方法而不是render()方法來組織數(shù)據(jù)的，也許是我使用的jQuery Templates版本不是***的。我使用時智能提示如下：
還沒有使用過jQuery Templates嗎？趕快試試吧！據(jù)說在jQuery 1.5版本中將會把微軟開發(fā)的三個jQuery插件中添加進去，讓我們期待吧！
至于如何使用if、each簡單語法，你可以看看前一篇文章，這樣就可以根據(jù)我們的需要來展示數(shù)據(jù)了。下邊是完整的頁面代碼，希望能幫助到你！
<!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>jQuery Templates的使用方法-jQuery學(xué)習(xí)</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="http://www.jquery001.com/js/jquery.tmpl.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var users = [ { name: "Google", website: "google.com" }, { name: "jQuery學(xué)習(xí)", website: "jquery001.com" } ]; $("#userTemplate").render(users).appendTo("ul"); }); </script> </head> <body> <div> <script id="userTemplate" type="text/html"> <li><a href="http://${website}">${name}</a></li> </script> <ul></ul> </div> </body> </html>以上就是jQuery Templates插件的使用方法是什么，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼