Dojo学习笔记（四）：NodeList扩展

69 阅读 0 评论 46 点赞

我是靠谱客的博主优雅外套，最近开发中收集的这篇文章主要介绍Dojo学习笔记（四）：NodeList扩展，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

<!DOCTYPE html>

<html>

<head lang=
"en"
>

    
<meta charset=
"UTF-8"
>

    
<title>NodeList</title>

    
<script src=
"dojo/dojo.js" 
data-dojo-config=
"async: true"
></script>

    
<script>

        
require([
"dojo/query"
,
"dojo/domReady!"
], 
function
(query){

            
query(
"li.fresh"
).on(
"click"
, 
function
(){

                
alert(
"I love fresh " 
+ 
this
.innerHTML);

            
});

        
});

    
</script>

</head>

<body>

<ul>

    
<li 
class
=
"fresh"
>Apples</li>

    
<li 
class
=
"fresh"
>Persimmons</li>

    
<li 
class
=
"fresh"
>Grapes</li>

    
<li 
class
=
"fresh"
>Fresh Figs</li>

    
<li 
class
=
"dried"
>Dates</li>

    
<li 
class
=
"dried"
>Raisins</li>

    
<li 
class
=
"dried"
>Prunes</li>

    
<li 
class
=
"fresh dried"
>Apricots</li>

    
<li 
class
=
"fresh"
>Peaches</li>

    
<li 
class
=
"fresh"
>Bananas</li>

    
<li 
class
=
"fresh"
>Cherries</li>

</ul>

</body>

</html>

等效于：

<script>

        
require([
"dojo/query"
,
"dojo/domReady!"
], 
function
(query){

            
query(
"li.fresh"
).on(
"click"
, 
function
(e){

                
alert(
"I love fresh " 
+ e.target.innerHTML);

            
});

        
});

</script>

等效于：

  
<script>

        
require([
"dojo/query"
,
"dojo/on"
,
"dojo/domReady!"
], 
function
(query,on){

            
on(query(
"li.fresh"
),
"click"
, 
function
(e){

                
alert(
"I love fresh " 
+ e.target.innerHTML);

            
});

        
});

</script>