高级 jQuery：让好的应用程序变成强大的应用程序

核心提示： 用 jQuery 设置小部件以上的一小段 HTML 直接引入了这部分内容，本小节关注如何在 jQuery 中设置小部件，高级 jQuery：让好的应用程序变成强大的应用程序(10)，以及所需的所有代码，要将事件附加到页面元素或在特定情况下需要添加类时， 让我们遵循我曾用 jQuery 设置小部件

用 jQuery 设置小部件

以上的一小段 HTML 直接引入了这部分内容，本小节关注如何在 jQuery 中设置小部件，以及所需的所有代码。要将事件附加到页面元素或在特定情况下需要添加类时，通常需要这样做。有时候还需要更进一步。这些小部件的所有设置代码都是 jQuery 代码。我可以提供关于角色分离的理论，让 HTML 设计师和 JavaScript 程序员各自完成自己的工作，但是您们可能已经多次听到这种陈词。在这里我仅添加另一样东西，即 “类修饰”，这是很多插件创作者都使用的。看看清单 8 中的 HTML 代码，仅通过将一个 percentSort 类添加到表，您就可以显著改变表的功能和外观。这是小部件设计的目标，让添加和删除小部件就像向小部件添加类一样简单。

让我们遵循我曾用 jQuery 设置小部件的几个步骤。通过查看这些步骤，您可以看到清单 9 中的设计模式是如何出现的。

清单 9. jQuery 小部件代码

$(document).ready(function()　{　
　
　//　the　first　step　is　to　find　all　the　tables　on　the　page　with　
　//　a　class　of　percentSort.　These　are　all　the　tables　we　want　to　
　//　convert　into　our　widget.　
　//　After　we　find　them,　we　need　to　loop　through　them　and　take　some　
　//　actions　on　them　
　//　At　the　conclusion　of　this　block　of　code,　each　table　that's　going　to　
　//　be　a　percentSort　widget　will　have　been　transformed　
　
　$("table.percentSort").each(function(i){　
　
　　　//　each　table　needs　a　unique　ID,　for　namespace　issues　(discussed　later)　
　　　//　we　can　simply　create　a　uniqueID　from　the　loop　counter　
　
　　　$(this).attr("id",　"percentSort-"+i);　
　
　　　//　within　each　table,　let's　highlight　every　other　row　in　the　table,　to　
　　　//　give　it　that　"zebra"　look　
　
　　　$(this).find("tbody　>　tr").filter(":odd").addClass("highlight");　
　
　　　//　because　each　table　needs　to　show　the　"Total"　to　the　user,　let's　create　a　new　
　　　//　section　of　the　table　in　the　footer.　We'll　add　a　row　in　the　table　footer　
　　　//　to　display　the　words　"Total"　and　a　span　for　the　updated　count.　
　
　　　$("#"+$(this).attr("id")　+　"　tfoot")　
　　　　　.append("<tr><td>Total</td><td>　
　　　　　<span></span>　%</td></tr>");　
　
　　　//　finally,　let's　add　the　CLASS　of　"percentTotal"　to　the　span　we　just　
　　　//　created　above.　We'll　use　this　information　later　to　display　
　　　//　the　updated　totals　
　
　　　$("#"+$(this).attr("id")　+　"　tfoot　span").addClass("percentTotal");　
　});　
　
　//　now　the　second　step,　after　we've　completed　setting　up　the　tables　themselves　
　//　is　to　set　up　the　individual　table　rows.　
　//　We　can　similarly　sort　through　each　of　them,　taking　the　appropriate　actions　
　//　on　each　of　them　in　turn.　
　//　Upon　completion　of　this　block　of　code,　each　row　in　each　table　will　be　
　//　transformed　for　our　widget　
　
　$("table.percentSort　tbody　>　tr").each(function(i){　
　
　　　//　get　the　namespace　(to　be　discussed　in　the　next　section)　
　
　　　var　NAMESPACE　=　$(this).parents("table.percentSort").attr("id");　
　
　　　//　attach　a　unique　ID　to　this　row.　We　can　use　the　loop　counter　
　　　//　to　ensure　the　ID　is　unique　on　the　page　(which　is　a　must　on　every　page)　
　
　　　$(this).attr("id",　"row"+i);　
　
　　　//　now,　within　this　row　of　the　table,　we　need　to　find　the　text　input,　because　
　　　//　we　need　to　attach　a　class　to　them.　We　utilize　the　namespace,　and　also　
　　　//　find　the　:text　within　the　table　row,　and　then　attach　the　correct　class　
　
　　　$("#"+$(this).attr("id")　+　"　:text").addClass("percent");　
　
　　　//　Finally,　we　attach　a　unique　ID　to　each　of　the　text　inputs,　and　we　do　this　by　
　　　//　making　it　a　combination　of　the　table　name　and　the　row　name.　
　
　　　$("#"+$(this).attr("id")　+　"　.percent").　
　　　　　　　　attr("id",　NAMESPACE　+　"-"　+　$(this).attr("id"));　
　});　
　
　
　//　Finally,　because　we　know　we　only　want　numerical　inputs,　we　restrict　the　text　entry　
　//　to　just　numbers.　We　must　do　this　now,　because　up　until　this　point,　the　page　
　//　contained　no　elements　with　the　CLASS　"percent"　
　$(".percent").numeric();