前言:
前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置。
dojo的所有js都是符合AMD规范进行异步加载的:http://blog.csdn.net/eguid_1/article/details/52083016
并且详细阐述了dojo的config设置:http://blog.csdn.net/eguid_1/article/details/52092016
缀述:
这章开始真正讲解dojo的所有基本操作,包含dom、query、event(鼠标/键盘事件)、request(请求)、动画、反射(dojo实现JS的aop)等等操作。
本章内容简介
本章主要讲解dojo的dom操作、query操作和domConstruct元素位置操作
基于dojo的DOM操作
dojo的dom操作分为query操作和dom操作和domConstruct元素位置操作三种
1、dom操作
注:前面已经讲过了dojo是基于AMD规范的,所有引入JS的操作都是通过require异步加载来完成。
(1)引入dom模块
需要require一下dojo的dom模块,dojo的这个dom就是一个符合AMD规范的JS直接对象
var dom = require("dojo/dom");
(2)dom操作
注:引入dojo的domReady!模块可以让该方法在页面加载完成后再运行。
require(["dojo/domReady!"], function() { //设置标签内容 function setText(node, text) { node = dom.byId(node); node.innerHTML = text; } //找到id是one的标签 var one = dom.byId("one"); setText(one, "One has been set"); setText("two", "Two has been set as well"); });
(3)页面
<head> <title>domTest</title> <meta charset="utf-8"> <script src="dojo/dojo.js"> </script> <script src="js/view/domTest.js"></script> </head> <body> <ul id="list"> <li id="one">One</li> <li id="two">Two</li> <li id="three">Three</li> <li id="four">Four</li> <li id="five">Five</li> </ul></body>
2、query操作
query模块可以通过标签的名字或者id或者class进行查找,与jquery中的的$()用法比较像
再使用query之前需要先引入query模块
(1)引入query模块
dojo的query与jquery中的$()的用法类似,可以作为参考
var query = require("dojo/query");
(2)query操作
注:引入的array模块是为了方便操作数组(比如这里使用array模块的forEach循环)
dom-class模块是操作页面标签class属性的模块,当然我们一般用不到这个模块,因为通过query获取到的dojo对象也是可以直接进行addClass()的class增加删除操作的。
//domReady!用来延后在页面加载完成后加载该块 require(["dojo/_base/array", "dojo/domReady!"], function(arrayUtil) { // 检索 ID是 "list"的标签 var list = query("#list");//通过id查找 console.info(list); //检索class是italic的标签 list = query(".italic");//通过class查找 console.info(list); //检索li标签中class是even的element list = query("li.even");//通过标签+class查找 console.info(list); //检索list元素下所有class是odd的标签 query(".odd", dom.byId("list")); //检索li标签下的全部a标签 var allA = query("li a"); //item为遍历对象,index为索引 arrayUtil.forEach(list, function(item, index) { console.info(item + "," + index); }); console.info("end"); }); //使用domClass修改标签的class require(["dojo/_base/array", "dojo/dom-class", "dojo/domReady!"], function(arrayUtil, domClass) { arrayUtil.forEach(); var node = query(".odd"); domClass.add(node, "red"); });当然还可以使用query获取到的dojo对象直接操作dom的class增加和删除
require("dojo/domReady!"], function(query) { // 给class是bold的标签添加一个名为red的新class,并移除原本的class query(".bold").addClass("red").removeClass("bold"); query(".even").addClass("blue").removeClass("even"); });除了上述的dom操作,query获取的dojo对象还有插入新元素的操作:
query(".red") // 检索查class是blod的标签 .clone() // 拷贝一个相同的标签 .prepend('<span class="emoticon happy">happy!dojo!</span>') // 在这个标签内部插入新的元素 .appendTo(".blue"); //把生成的新标签插入到class是bulue标签的内部
(3)页面
<head> <title>query操作测试</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/queryTest.css"> <script src="dojo/dojo.js"></script> <script src="js/view/queryTest.js"></script> </head> <body> <ul id="list"> <li class="odd"> <div class="bold"> <a class="odd">Odd</a> </div> </li> <li class="even"> <div class="italic"> <a class="even">Even</a> </div> </li> <li class="odd"> <a class="odd">Odd</a> </li> <li class="even"> <div class="bold"> <a class="even">Even</a> </div> </li> <li class="odd"> <div class="italic"> <a class="odd">Odd</a> </div> </li> <li class="even"> <a class="even">Even</a> </li> </ul>
3、domConstruct元素位置操作
(1)引入domConstruct
var domConstruct=require("dojo/dom-construct")
(2)domConstruct位置操作
domConstruct.place(操作的元素, 父元素, "位置");位置:first,before,after
例如:把id为three的标签放到list的第一个位置
var list = dom.byId("list"), three = dom.byId("three"); domConstruct.place(three, list, "first");
把three放到two之前
var two = dom.byId("two"), three = dom.byId("three"); domConstruct.place(three, two, "before");把three放到four之后
var four = dom.byId("four"), three = dom.byId("three"); domConstruct.place(three, four, "after");
(3)domConstruct父元素删除 子元素
function destroyFirst() {
var list = dom.byId("list"),
items = list.getElementsByTagName("li");
if (items.length) {
//清除某个元素
domConstruct.destroy(items[0]);
}
}
function destroyAll() {
//清空父类下的子元素
domConstruct.empty("list");
}
该页面与query示例页面相同,不在重复贴出
下一章将详述dojo的事件绑定