Dojo QuickStart快速入门教程(3) 选择器 - 面向对象网,web开发,dojo,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Dojo > 正文

Dojo QuickStart快速入门教程(3) 选择器

来源: www.bianceng.cn 阅读:

虽然到现在为止,留言中还没有一个人看好Dojo ,但是我还是准备继续写下去,不保证能写完,也许哪天不想写了,或者另有所爱了,可能就结束了,呵呵。

另外,相对于效率,我还是更喜欢组织有序的代码,mootools也是不错,好像组件库现在还不太完善。

最后,自己也是边学边写,很多地方可能有错误,希望大家发现后多多指正。

这一篇来看看选择器吧,其实都大差不差,你要原先玩过jQuery或者Mootools,应该一下就能看 明白。

准备工作

这一篇里,Dojo库直接从Google服务器上引用,这样,本机只需要一个html页面就可以运行了 ,调试信息打印用Firefox+Firebug插件。整个框架如下,后面一点一点的往里面填代码:

<html>
<head>
// dojo库直接从Google服务器上引用,您也可以使用本机库
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js"></scr ipt>

<script type="text/javascript">

//打印一个元 素的信息
function printElement(info,node){
console.debug(info);
console.debug(node.innerHTML);
console.debug("\n");
}
//打印元素 数组中每个元素的信息
function printArray(info,arr){
console.debug(info);
arr.forEach(function(node){
console.debug(node.innerHTML);})
console.debug ("\n");
}

//所有代码都从这里执行,所有函数都从这里调用
dojo.addOnLoad(function() {

//暂时留空,文中的代码都添加至此处

});

</script>

</head>

<body>
<a id="a1" href="#">a1:id=a1</a>
<a id="a2" href="#">a2:id=a2</a>

<div id="sub_1">
<a id="a3" href="#">a3:id=a3</a>
<a class="foo" href="#">a4:class=foo</a>
<a class="foo" href="#">a5:class=foo</a>
<h1>h1</h1>
<div id="sub_2">
<a  href="#">a6</a>
<a class="foo" href="#">a7:class=foo</a>
<a class="foo" href="#">a8:class=foo</a>
<h1>h2</h1>
</div>
</div>

</body>

</html>

页面在浏览器中显示如下效果

h1

h2

脚本代码里有两个自定义的函数 printElement 和 printArray ,这个您不用管他,他们只是负责打 印信息,需要留意的代码在后面。

dojo.addOnLoad() 函数是整个程序的入口,就相当于 main 函数。

静态页面里放了8个超链接元素、2个 h1 元素,用他们来做选择试验。

Tags:
相关文章列表: