首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

dojo1.7通译 搜索节点功能(Using dojo/query)

2012-07-15 
dojo1.7翻译搜索节点功能(Using dojo/query)原文地址:http://dojotoolkit.org/documentation/tutorials/1.

dojo1.7翻译 搜索节点功能(Using dojo/query)

原文地址:http://dojotoolkit.org/documentation/tutorials/1.7/using_query/

?

在本教程中,我们将学习dojo/query模块的搜索功能。

?

开始

在操作DOM对象中,一项重要的功能就是对节点的快速有效的检索。我们可以使用dom.byId来搜索一个指定ID的节点。但对于多个节点的操作这种做法显的有点繁琐,因为你要为每个你想要操作的节点都给定唯一的ID值。幸好,有另一种解决方案,使用dojo/query,这个模块使用类似于CSS搜索方式来搜索节点的列表。

?

搜索

为了展示如果使用搜索的,我们来使用一个经常能遇到的HTML页面内容。

?

?

?每个方法都是返回NodeList

?

?

?在dojo/NodeList-dom中还有一些别的方法 style,toggleClass,replaceClass,place,empty每个方法也是都返回NodeList

?

?

?运行示例

?

事件

NodeList还有一个便利的方法,叫on,它用于链接DOM和事件。这样就不用使用大量的代码来连接事件和节点了。事件将在后续的教程学习

?

<button class="hookUp demoBtn">Click Me!</button><button class="hookUp demoBtn">Click Me!</button><button class="hookUp demoBtn">Click Me!</button><button class="hookUp demoBtn">Click Me!</button><script>    // Wait for the DOM to be ready before working with it    require(["dojo/query", "dojo/domReady!"], function(query) {        query(".hookUp").on("click", function(){            alert("This button is hooked up!");        });    });</script>

?运行示例

?

热点排行