web前端之dojo实际应用及开发一：开始dojo（附有源码）

来源：互联网发布：沪宁杭知乎编辑：程序博客网时间：2024/05/16 09:49

web前端之dojo实际应用及开发一：开始dojo（附有源码）

现在我们开始学习一个新的框架dojo，dojo的介绍

dojo官网下载dojo-release-1.11.2.zip，解压缩后，修改文件夹名称dojoroot，放到ROOT目录下。输入下面的网址：http://localhost:8080/dojoroot/dijit/themes/themeTester.html。如果能正常打开就说明安装完成。自己进行书写页面，但是必须要通过tomcat或者其他服务器才能加载。

实现一个tab小控件：

<html>    <head>        <script type="text/javascript" src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true">        </script>        <style type="text/css">            @import "../dojoroot/dijit/themes/tundra/tundra.css";            @import "../dojoroot/dojo/resources/dojo.css";        </style>        <script type="text/javascript">            dojo.require("dojo.parser");            dojo.require("dijit.layout.ContentPane");            dojo.require("dijit.layout.TabContainer");</script>        <style>            .formContainer{                width:600px;                height:600px;            }            label{                width:150px;                float:left;            }        </style>    </head>    <body class="tundra">        <div class="formContainer" dojoType="dijit.layout.TabContainer">            <div dojoType="dijit.layout.ContentPane" title="Personal">                123             </div>            <div dojoType="dijit.layout.ContentPane" title="Address">                321            </div>            <div dojoType="dijit.layout.ContentPane" title="phone">                456            </div>        </div>    </body></html>

现在是不是感受到dojo的魅力了吧，那就让我们接下去学习吧！

创建添加元素（dojo.addOnLoad，dojo.create）：

<html><head>    <title>Exploring Dojo</title></head><body><h1>Exploring Dojo</h1><div id="message">This is a DIV element with id attribute message.</div><ul id="list">    <li>This is the first item in a list</li>    <li class="highlight">This is the second item in a list</li>    <li>This is the third item in a list</li></ul><script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script>dojo.addOnLoad(function() {//添加元素    dojo.create(//创建元素        "div",//元素类型        {            "innerHTML": "Hello, World!"//内容        },        dojo.body();//添加的地址    );});</script></body></html>

相对于[原生的js代码，这无疑简便许多

元素逐渐淡出（dojo.fadeOut）：

<html><head>    <title>dojo</title></head><body><h1>dojo</h1><div id="message">This is a DIV element with id attribute message.</div><ul id="list">    <li>This is the first item in a list</li>    <li class="highlight">This is the second item in a list</li>    <li>This is the third item in a list</li></ul><script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script>    alert(dojo.byId("message").innerHTML);//浏览器获取到id为message内部的信息    dojo.fadeOut({//可以看到对应的id元素逐渐淡出，从页面上消失了。        node: dojo.byId("message"),//node：哪一个元素        duration: 6000//duration: 这个状态要经过多少时间 时间单位：毫秒    }).play(); // dojo.fadeIn({//可以看到对应的id元素逐渐显示，从页面上呈现了，两个不能同时使用//      node: dojo.byId("message"),//      duration: 600//  }).play();</script></body></html>

获取对应的元素（dojo.query）：

dojo.query("#list li").forEach(function(item) {//dojo.query("#list li")获取到全部#list的li    console.log(item.innerHTML);//forEach对这个数组进行遍历});

修改对应元素的css属性：

<html><head>    <title>dojo</title></head><body><h1>dojo</h1><div id="message">This is a DIV element with id attribute message.</div><ul id="list">    <li>This is the first item in a list</li>    <li class="highlight">This is the second item in a list</li>    <li>This is the third item in a list</li></ul><script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script>dojo.query(".highlight").style({//获取到highlight的css属性    backgroundColor: "yellow",//改变css属性    color: "red"});</script></body></html>

jquery是如何使用的呢？

$('.highlight').css('background','#ccc');

两者差不多一样简便，那我们为什么要使用dojo呢？
dojo与jquery的区别

其他函数包括 dojo.place，它允许您将现有的或新创建的元素放在文档的任何地方。dojo.empty 只执行您所期望的 — 清空一个 DOM 元素的内容。dojo.destroy 删除一个节点以及其所有子元素。

函数遍历（dojo.forEach）：

var list = ['123','234','345','456'];dojo.forEach(list, function(item, i) {    console.log((i+1)+'. '+item);});输出：1. 1232. 2343. 3454. 456

通过命名函数来对forEach进行使用：

var list = ['123','234','345','456'];var printArray = function(item, i) {    console.log((i+1)+'. '+item);}dojo.forEach(list, printArray);

在数组中找到具体的位置（dojo.indexOf）：
dojo.indexOf(list, “234”);
找到“234”在list中的具体位置，当返回数据是“-1”时，说明找寻不到这个值。

创建一个新数组（dojo.filter）：

var filteredList = dojo.filter(list, function(item) {    return item != "123";});dojo.forEach(filteredList, "console.log(item)");

dojo.filter(list, function(item) 创建一个新数组，是为原先list的更新版。
return item != “123”;去除原先的数组中的‘123’元素。

其他的还有：dojo.map 函数允许您创建一个新数组 — 现有数组的修改版。dojo.every 用于检查是否每一项匹配指定标准。

相关学习：
web前端之dojo实际应用及开发六：页面布局（附有源码）
web前端之dojo实际应用及开发五：丰富的用户界面（附有源码）
web前端之dojo实际应用及开发四：面向对象开发[关键]（附有源码）
web前端之dojo实际应用及开发三：dojo.xhr* 增强 Ajax（附有源码）
web前端之dojo实际应用及开发二：事件处理（附有源码）
web前端之dojo实际应用及开发一：开始dojo（附有源码）
web前端之Dojo与jQuery综合比较分析
web前端之dojo(用javascript语言实现的开源DHTML工具包)

1 0