Dojo学习笔记(四):NodeList扩展

前端之家收集整理的这篇文章主要介绍了Dojo学习笔记(四):NodeList扩展前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

dojo/query返回的是匹配查询结果的所有节点构成的数组;这个数组实际上是一个特殊的数组对象称为dojo/NodeList, 该数组对象内建了一系列可以方便操作其中节点的方法

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <Meta charset="UTF-8">
  5. <title>NodeList</title>
  6. <script src="dojo/dojo.js" data-dojo-config="async: true"></script>
  7. <script>
  8. require(["dojo/query","dojo/domReady!"],function(query){
  9. query("li.fresh").on("click",function(){
  10. alert("I love fresh " + this.innerHTML);
  11. });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <ul>
  17. <li class="fresh">Apples</li>
  18. <li class="fresh">Persimmons</li>
  19. <li class="fresh">Grapes</li>
  20. <li class="fresh">Fresh Figs</li>
  21. <li class="dried">Dates</li>
  22. <li class="dried">Raisins</li>
  23. <li class="dried">Prunes</li>
  24. <li class="fresh dried">Apricots</li>
  25. <li class="fresh">Peaches</li>
  26. <li class="fresh">Bananas</li>
  27. <li class="fresh">Cherries</li>
  28. </ul>
  29. </body>
  30. </html>

等效于:

  1. <script>
  2. require(["dojo/query",function(e){
  3. alert("I love fresh " + e.target.innerHTML);
  4. });
  5. });
  6. </script>

等效于:

  1. <script>
  2. require(["dojo/query","dojo/on",function(query,on){
  3. on(query("li.fresh"),"click",function(e){
  4. alert("I love fresh " + e.target.innerHTML);
  5. });
  6. });
  7. </script>

备注:dojo/NodeList对象与DOM NodeList对象是不相同的。

猜你在找的Dojo相关文章