Chinaunix首页 | 论坛 | 博客
  • 博客访问: 656543
  • 博文数量: 171
  • 博客积分: 2246
  • 博客等级: 大尉
  • 技术积分: 1574
  • 用 户 组: 普通用户
  • 注册时间: 2012-05-31 11:45
文章分类

全部博文(171)

文章存档

2018年(3)

2017年(4)

2015年(1)

2014年(20)

2013年(57)

2012年(86)

分类: Web开发

2013-12-06 11:20:48

老外这么说:
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代码: 

  1. {
  2.   identifier: 'name',
  3.   label: 'name',
  4.   items: [
  5.           { name:'Africa',type:'continent',children:[{_reference:'Egypt'},{_reference:'Sudan'}]},
  6.           { name:'Egypt', type:'country' },
  7.           { name:'Kenya', type:'country' },
  8.           { name:'Sudan', type:'country' }
  9.          ]
  10. }

对于这个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的页面,里面引用如下:

Js代码  

  1. <script type="text/javascript"
  2.        src=""
  3.        djConfig="parseOnLoad: true, isDebug: true,usePlainJson:true ">
  4. </script>
这个例子看似复杂,明白了每句话的意思之后,才觉得,真是简单啊!
Js代码  

  1. function test()
  2. {
  3.  //读取json
  4.   var store = new dojo.data.ItemFileReadStore({url: "/test.json"/>"});
  5.   //下面这个是函数申明,其实就是function gotContinents (items, request);
  6.   //这个函数是为了处理后面query: {type: "continent"}返回的结果。具体看
  7.   //store.fetch({query: {type: "continent"}, onComplete: gotContinents}); 的注解。 
  8.    
  9.   // items 是一个数组,查询返回的结果集,request就是请求。至于这个request怎么
  10.   //用,我也不清楚,看了很多也没发现这个东西有什么用!
  11.   //里面的console.log 其实就是 console.debug() 就是向dojo调试控制台输出。很多
  12.   //用alert()返回是object的东西,通过这2个函数,可以输出具体值,比如本例中的
  13.   //console.log("item'lable:["+store.getLabel(item)+"] attributes.length="+attributes.length);
  14.   //你alert(attributes.length)返回值就是object
  15.   //你如果用console.log(attributes.length)控制台输出就是3
  16.  
  17.   var gotContinents = function(items, request)
  18.   {
  19.         //Cycle over all the matches.
  20.     for(var i = 0; i < items.length; i++){
  21.       var item = items[i];
  22.                             
  23.       //Cycle over all the attributes.
  24.       var attributes = store.getAttributes(item);
  25.       console.log("item'lable:["+store.getLabel(item)+"] attributes.length="+attributes.length);
  26.       for (var j = 0; j < attributes.length; j++){
  27.         //Assume all attributes are multi-valued and loop over the values ...
  28.         var values = store.getValues(item, attributes[j]);
  29.         console.log("item'lable:["+store.getLabel(item)+"] values.length="+values.length);
  30.         for(var k = 0; k < values.length; k++){
  31.           var value = values[k];        
  32.           if(store.isItem(value)){
  33.             // Test to see if the items data is fully loaded or
  34.             // needs to be demand-loaded in (the item in question is just a stub).
  35.             if(store.isItemLoaded(value)){
  36.                console.log("Located a child item with label: [" + store.getLabel(value) + "]");
  37.             }else{
  38.               //Asynchronously load in the child item using the stub data to get the real data.
  39.               var lazyLoadComplete =
  40.                   function(item){
  41.                       console.log("Lazy-Load of item complete. Located child item with label:
  42.                                [" + store.getLabel(item) + "]");
  43.                                 }
  44.               store.loadItem({item: value, onItem: lazyLoadComplete});
  45.            }//end if(store.isItemLoaded(value))
  46.           }else{
  47.                console.log("Attribute: [" + attributes[j] + "] has value: [" + value + "]");
  48.           }// end if(store.isItem(value))
  49.         }// end for(var k = 0; k < values.length; k++)
  50.      }//end for(var j = 0; j < attributes.length; j++)
  51.    }// end for(var i = 0; i < items.length; i++)
  52.  } //end var gotContinents = function(items, request)

  53.                             
  54. //Call the fetch of the toplevel continent items.
  55. store.fetch({query: {type: "continent"}, onComplete: gotContinents});
  56. //这个函数很神奇,有3个需要说明:
  57. //query: {type: "continent"} 意思就是在test.json中获取所有type: "continent"的items 显然只有一条记录:
  58. //{name:'Africa', type:'continent',children:[{_reference:'Egypt'},{_reference:'Sudan'}] }
  59. //onComplete: gotContinents 这个onComplete 是fetch的一个参数,意思就是当前面这个query查询完成后调用
  60. // gotContinents 函数
  61. //store.fetch() 整个函数的意思简单的说,就是当你需要查询json的时候,把查询语句和一个处理函数放里面;值得说明
  62. //的是,这个函数是异步调用的,也就是说,可能在一些情况下并不是每个元素都被加载完了,这也是为什么上面
  63. // gotContinents函数里面会有if(store.isItemLoaded(value)){} 的原因
  64. }//end function test()

运行结果:
Js代码 
  1. item'lable:[Africa] attributes.length=3
  2. item'lable:[Africa] values.length=1
  3. Attribute: [name] has value: [Africa]
  4. item'lable:[Africa] values.length=1
  5. Attribute: [type] has value: [continent]
  6. item'lable:[Africa] values.length=2
  7. Located a child item with label: [Egypt]
  8. 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) |
给主人留下些什么吧!~~