老外这么说:
dojo.query() is the swiss army knife of DOM node manipulation in
Dojo. Much like Prototype’s “$$” (bling-bling) function or JQuery’s “$”
function, dojo.query provides robust, high-performance CSS-based node
selector support with the option of scoping searches to a particular
sub-tree of a document
简单点说,就是dojo.query()是可以按样式、标签名、字符等等,来查询文档中的某个元素。
关键是怎么使用,国外的网上说的很清楚,其实你要是能耐住性子把DOJO BOOK里面的都认认真真看一边,就不用看我下面写的这点东西。
我也是惊叹dojo.query 中文资料的匮乏,才把自己看的英文资料和自己的实践做个小结,利人利己。
这个是老外的例子:
Example 1
search the entire document for elements with the class “foo”:
dojo.query(".foo");
these elements will match:
Example 2
search the entire document for elements with the classes “foo” and “bar”:
dojo.query(".foo.bar");
these elements will match:
while these will not:
Example 3
find “ elements which are descendants of paragraphs and which have a “highlighted” class:
dojo.query("p span.highlighted");
the innermost span in this fragment matches:
...
...
Example 4
set an “odd” class on all odd table rows inside of the table
#tabular_data
, using the
>
(direct child) selector to avoid affecting any nested tables:
dojo.query("#tabular_data > tbody > tr:nth-child(odd)").addClass("odd");
Example 5
remove all elements with the class “error” from the document and store them in a list:
var errors = dojo.query(".error").orphan();
Example 6
add an onclick handler to every submit button in the document which causes the form to be sent via Ajax instead:
dojo.query("input[type='submit']").onclick(function(e){
dojo.stopEvent(e); // prevent sending the form
var btn = e.target;
dojo.xhrPost({
form: btn.form,
load: function(data){
// replace the form with the response
var div = dojo.doc.createElement("div");
dojo.place(div, btn.form, "after");
div.innerHTML = data;
dojo.style(btn.form, "display", "none");
}
});
});
上面这些例子主要是为了大家能了解query,怎么用!
下面是我自己的例子:
结合JSON查询。
这个是个JSON集合,比较好的用法是你把这个代码放在一个filename.json的文件里。
我放在D:\WK50\tems114\test.json
对于这个JSON的结构有几句话:
JSON的结构,就是 键:值 (upper example: name:'Africa',...)
( 1 ) identifier中文意思:标识符;identifier: 'name' 的意思就是指定后面items里面的name键为标识符。老外说
标识符就是唯一识别元组,不会重复的那个东西。
( 2 ) label 中文意思:标签;我的理解就是一个说明吧,这个就好像是你有名字,又有身份证编号一样。这个label
就是你的名字,那个identifier就是你的身份证编号。
( 3 ) items 中文意思:元素集合 ,就表示是一个数组:jsonAarry
上面说这些,是为了说明下面这个:
如果你要获取一个元素的label 需要用store.getLabel(item) 这下问题来了:
store是什么?item是什么?
先解释一下store:
store就是数据源,dojo里面有个方法可以把json读取后存储为一个数据源,这里的
item和上面说的items是有关系的,item就是items中的元素,具体的要看下面的代码(这个也是老外的例子,指不过我略微修改和加了点注释)。
如果要运行改代码,有个必要条件就是你在引入dojo.js的时候,djConfig里面的isDebug: true
我是jsp的页面,里面引用如下:
-
<script type="text/javascript"
-
src=""
-
djConfig="parseOnLoad: true, isDebug: true,usePlainJson:true ">
-
</script>
这个例子看似复杂,明白了每句话的意思之后,才觉得,真是简单啊!
-
function test()
-
{
-
//读取json
-
var store = new dojo.data.ItemFileReadStore({url: "/test.json"/>"});
-
//下面这个是函数申明,其实就是function gotContinents (items, request);
-
//这个函数是为了处理后面query: {type: "continent"}返回的结果。具体看
-
//store.fetch({query: {type: "continent"}, onComplete: gotContinents}); 的注解。
-
-
// items 是一个数组,查询返回的结果集,request就是请求。至于这个request怎么
-
//用,我也不清楚,看了很多也没发现这个东西有什么用!
-
//里面的console.log 其实就是 console.debug() 就是向dojo调试控制台输出。很多
-
//用alert()返回是object的东西,通过这2个函数,可以输出具体值,比如本例中的
-
//console.log("item'lable:["+store.getLabel(item)+"] attributes.length="+attributes.length);
-
//你alert(attributes.length)返回值就是object
-
//你如果用console.log(attributes.length)控制台输出就是3
-
-
var gotContinents = function(items, request)
-
{
-
//Cycle over all the matches.
-
for(var i = 0; i < items.length; i++){
-
var item = items[i];
-
-
//Cycle over all the attributes.
-
var attributes = store.getAttributes(item);
-
console.log("item'lable:["+store.getLabel(item)+"] attributes.length="+attributes.length);
-
for (var j = 0; j < attributes.length; j++){
-
//Assume all attributes are multi-valued and loop over the values ...
-
var values = store.getValues(item, attributes[j]);
-
console.log("item'lable:["+store.getLabel(item)+"] values.length="+values.length);
-
for(var k = 0; k < values.length; k++){
-
var value = values[k];
-
if(store.isItem(value)){
-
// Test to see if the items data is fully loaded or
-
// needs to be demand-loaded in (the item in question is just a stub).
-
if(store.isItemLoaded(value)){
-
console.log("Located a child item with label: [" + store.getLabel(value) + "]");
-
}else{
-
//Asynchronously load in the child item using the stub data to get the real data.
-
var lazyLoadComplete =
-
function(item){
-
console.log("Lazy-Load of item complete. Located child item with label:
-
[" + store.getLabel(item) + "]");
-
}
-
store.loadItem({item: value, onItem: lazyLoadComplete});
-
}//end if(store.isItemLoaded(value))
-
}else{
-
console.log("Attribute: [" + attributes[j] + "] has value: [" + value + "]");
-
}// end if(store.isItem(value))
-
}// end for(var k = 0; k < values.length; k++)
-
}//end for(var j = 0; j < attributes.length; j++)
-
}// end for(var i = 0; i < items.length; i++)
-
} //end var gotContinents = function(items, request)
-
-
-
//Call the fetch of the toplevel continent items.
-
store.fetch({query: {type: "continent"}, onComplete: gotContinents});
-
//这个函数很神奇,有3个需要说明:
-
//query: {type: "continent"} 意思就是在test.json中获取所有type: "continent"的items 显然只有一条记录:
-
//{name:'Africa', type:'continent',children:[{_reference:'Egypt'},{_reference:'Sudan'}] }
-
//onComplete: gotContinents 这个onComplete 是fetch的一个参数,意思就是当前面这个query查询完成后调用
-
// gotContinents 函数
-
//store.fetch() 整个函数的意思简单的说,就是当你需要查询json的时候,把查询语句和一个处理函数放里面;值得说明
-
//的是,这个函数是异步调用的,也就是说,可能在一些情况下并不是每个元素都被加载完了,这也是为什么上面
-
// gotContinents函数里面会有if(store.isItemLoaded(value)){} 的原因
-
}//end function test()
运行结果:
-
item'lable:[Africa] attributes.length=3
-
item'lable:[Africa] values.length=1
-
Attribute: [name] has value: [Africa]
-
item'lable:[Africa] values.length=1
-
Attribute: [type] has value: [continent]
-
item'lable:[Africa] values.length=2
-
Located a child item with label: [Egypt]
-
Located a child item with label: [Sudan]
最后一点说明:
json文件中: children:[{_reference:'Egypt'}, {_reference:'Sudan'}]中_reference,这个东西找了很多地方,就只在DOJO的例子看见过,没在其他地方见过,在这里就是说,引用了name:'Egypt'元素。尚不清楚是不是标准JSON里面的结构,或者就是dojo自己定义的结构,清楚的人劳烦解释一下。
同时可以参见我转的DOJO BOOK上面的一个例子Nested Items and Lazy
Loading(我的翻译是:元素集合之延迟加载),不同的是我给出了运行结果,这样好理解些:
/blog/189784
和本文这个例子是同源的。我是在他的那个例子上改动了一下。
阅读(1073) | 评论(0) | 转发(0) |