学习Ajax框架之dojo：第二节---Dojo的基本函数及使用实例（附源代码）
2008-08-28 15:40
761 查看
从网上搜集Dojo的相关材料，dojo的相关介绍总是让人望而生畏。第一个hello world就搞了一大堆东西，比如widget组件，自定义的script标签等，加上要引入什么css文件，djConfig、dojo.require等等，让人很迷惑。我根据网络中给出的实例，由于涉及的dojo包太多，加上我是初学者，最终也没有配置好，给我的感觉是一个字：“太乱”。这么复杂，到底dojo该怎么使用呢？
我把问题细化了一下，那么，只需要把dojo当作一个普通的js类库，仅仅引入dojo.js，就像prototype那样，可以使用吗？OK！
闲话少说，来看看如何使用dojo.js中的几个基本函数。
1. dojo.js的引入方法
说明：dojo的发行包分为两个版本：Ajax和widget版本。在这里我下载的是dojo-0.3.1-ajax版本
[
要下载完整的Dojo框架，请点击这里下载：http://download.dojotoolkit.org/release-0.3.1/dojo-0.3.1-ajax.zip。
]
下载下来的dojo.js是压缩(remove comments and space)后的代码, 要阅读的话,建议阅读dojo.js.uncompressed.js, dojo.js大概有127K, 而未压缩前有211K, ok, 为什么会这么大呢, 原来其已经把部分常用的模块整合进dojo.js里, 因此显得大了一点, build.txt里就说明了默认的dojo.js包含了哪些模块。
接下来，就是引入的文件是名叫"dojo"的子目录里的dojo.js。
实例：<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"></script>
注：djConfig属性。第一个isDebug指是否打开FireBug的Console，第二个bindEncoding指xmlhttp使用的编码，这个在以后会用到。
2. dojo.connect()的用法
说明：监听普通的dom事件
实例1：页面加载时，输出“Hello World！”
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'">
</script>
<script type="text/javascript">
function init(){
alert("Hello World!");
}
dojo.connect(dojo, "loaded", "init");
</script>
</head>
<body>
<input id="hello" value="hello" type="button"/>
</body>
</html>
实例2：页面加载时，输出“Hello Karl”
<script type="text/javascript">
var name = "Mark"
function sayHello()
{
alert("Hello " + this.name);
}
var obj = {
name: "Karl"
}
dojo.addOnLoad(function(){
var btn = dojo.byId('hello');
dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数
});
</script>
3. dojo.event.connect的用法(结合package机制理解)
说明：在引入event包之后，如何监听dom事件呢？强大的dojo.event.connect出场。
实例：页面加载时，直接弹出“Hello World!”
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"> </script>
<script type="text/javascript">
dojo.require("dojo.event.*");
function init(){
alert("Hello World!");
}
dojo.event.connect(dojo, "loaded", "init");
</script>
</head>
<body>
</body>
</html>
4. dojo.addOnLoad()的用法
说明：页面自动加载功能
实例：鼠标点击按钮时，弹出对话框。即，button的onclick事件
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'">
</script>
<script type="text/javascript">
dojo.require("dojo.event.*");
function helloworld(){
var myfirst = document.getElementById("hello").value;
alert(myfirst);
}
dojo.addOnLoad(function(){
alert("Hello, welcome !");
var first = document.getElementById("hello");
dojo.event.connect(first, "onclick", helloworld);
})
</script>
</head>
<body>
<input id="hello" value="This is my first page!" type="button"/>
</body>
</html>
5. dojo.byId的用法
说明：dojo.byId就等同于常用的document.getElement 。
实例：加载页面时将文本框的内容清空
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojo/dojo.js.uncompressed.js" djConfig="isDebug:true,bindEncoding:'UTF-8'">
</script>
<script type="text/javascript">
dojo.require("dojo.event.*");
function helloworld(){
var myfirst = document.getElementById("hello").value;
alert(myfirst);
var buttonContent = dojo.byId("dropContent");
buttonContent.value = myfirst;
}
dojo.addOnLoad(function init(){
dojo.byId("dropContent").value = "";
alert("Hello, welcome !");
var first = document.getElementById("hello");
dojo.event.connect(first, "onclick", helloworld);
})
</script>
</head>
<body>
<input id="hello" value="This is my first page!" type="button"/><input id="dropContent" value="" type="text"/>
</body>
</html>
我把问题细化了一下，那么，只需要把dojo当作一个普通的js类库，仅仅引入dojo.js，就像prototype那样，可以使用吗？OK！
闲话少说，来看看如何使用dojo.js中的几个基本函数。
1. dojo.js的引入方法
说明：dojo的发行包分为两个版本：Ajax和widget版本。在这里我下载的是dojo-0.3.1-ajax版本
[
要下载完整的Dojo框架，请点击这里下载：http://download.dojotoolkit.org/release-0.3.1/dojo-0.3.1-ajax.zip。
]
下载下来的dojo.js是压缩(remove comments and space)后的代码, 要阅读的话,建议阅读dojo.js.uncompressed.js, dojo.js大概有127K, 而未压缩前有211K, ok, 为什么会这么大呢, 原来其已经把部分常用的模块整合进dojo.js里, 因此显得大了一点, build.txt里就说明了默认的dojo.js包含了哪些模块。
接下来，就是引入的文件是名叫"dojo"的子目录里的dojo.js。
实例：<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"></script>
注：djConfig属性。第一个isDebug指是否打开FireBug的Console，第二个bindEncoding指xmlhttp使用的编码，这个在以后会用到。
2. dojo.connect()的用法
说明：监听普通的dom事件
实例1：页面加载时，输出“Hello World！”
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'">
</script>
<script type="text/javascript">
function init(){
alert("Hello World!");
}
dojo.connect(dojo, "loaded", "init");
</script>
</head>
<body>
<input id="hello" value="hello" type="button"/>
</body>
</html>
实例2：页面加载时，输出“Hello Karl”
<script type="text/javascript">
var name = "Mark"
function sayHello()
{
alert("Hello " + this.name);
}
var obj = {
name: "Karl"
}
dojo.addOnLoad(function(){
var btn = dojo.byId('hello');
dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数
});
</script>
3. dojo.event.connect的用法(结合package机制理解)
说明：在引入event包之后，如何监听dom事件呢？强大的dojo.event.connect出场。
实例：页面加载时，直接弹出“Hello World!”
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"> </script>
<script type="text/javascript">
dojo.require("dojo.event.*");
function init(){
alert("Hello World!");
}
dojo.event.connect(dojo, "loaded", "init");
</script>
</head>
<body>
</body>
</html>
4. dojo.addOnLoad()的用法
说明：页面自动加载功能
实例：鼠标点击按钮时，弹出对话框。即，button的onclick事件
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'">
</script>
<script type="text/javascript">
dojo.require("dojo.event.*");
function helloworld(){
var myfirst = document.getElementById("hello").value;
alert(myfirst);
}
dojo.addOnLoad(function(){
alert("Hello, welcome !");
var first = document.getElementById("hello");
dojo.event.connect(first, "onclick", helloworld);
})
</script>
</head>
<body>
<input id="hello" value="This is my first page!" type="button"/>
</body>
</html>
5. dojo.byId的用法
说明：dojo.byId就等同于常用的document.getElement 。
实例：加载页面时将文本框的内容清空
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojo/dojo.js.uncompressed.js" djConfig="isDebug:true,bindEncoding:'UTF-8'">
</script>
<script type="text/javascript">
dojo.require("dojo.event.*");
function helloworld(){
var myfirst = document.getElementById("hello").value;
alert(myfirst);
var buttonContent = dojo.byId("dropContent");
buttonContent.value = myfirst;
}
dojo.addOnLoad(function init(){
dojo.byId("dropContent").value = "";
alert("Hello, welcome !");
var first = document.getElementById("hello");
dojo.event.connect(first, "onclick", helloworld);
})
</script>
</head>
<body>
<input id="hello" value="This is my first page!" type="button"/><input id="dropContent" value="" type="text"/>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 学习Ajax框架之dojo：第二节---Dojo的基本函数及使用实例（附源代码）
- JXCELL实例学习与研究（六） 之 sheet的分页功能的实现，以及基本EXCEL公式的使用 以及补充函数说明
- php explode（） 函数的基本语法及使用实例
- 学习Ajax框架之dojo：第三节——dojo中xmlHttp的用法（附源代码）
- 学习Ajax框架之dojo：第九节——详谈FloatingPane widget （附源代码）
- 学习Ajax框架之dojo：第四节——Dojo拖拽效果的实现（附源代码）
- 学习Ajax框架之dojo：第十节——Dojo的 Form Widget （附源代码）
- 学习Ajax框架之dojo：第七节——初识Dojo widget（附源代码）
- Swift学习记录 -- 11.函数的基本使用
- 学习Ajax框架之dojo：第三节——dojo中xmlHttp的用法（附源代码）
- python字典（dictionary）使用：基本函数code实例，字典的合并、排序、copy，函数中*args 和**kwargs做形参和实参
- 学习Ajax框架之dojo：第一节---ATF配置和Dojo实例资源（转）
- 学习Ajax框架之dojo：第五节——dojo拖拽事件小结（附源代码）
- 学习Ajax框架之dojo：第十一节——Dojo 的General Widget（上）（附源代码）
- 学习Ajax框架之dojo：第十二节——Dojo的General Widget（下）（附源代码）
- 学习Ajax框架之dojo：第六节——dojo类的声明和继承（附源代码）
- 学习Ajax框架之dojo：第四节——Dojo拖拽效果的实现（附源代码）
- python字典（dictionary）使用：基本函数code实例，字典的合并、排序、copy，函数中*args 和**kwargs做形参和实参
- 学习Ajax框架之dojo：第六节——dojo类的声明和继承（附源代码）
- C++中函数使用的基本知识学习教程