dojo 六 使用query dojo/query

 

 

要使用query，就要引入dojo/query包。
query可以根据Dom里节点的标签名、id名、class名来检索一个或多个节点。
--------------------------------------------------------------------------------------------

< 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 >

 

< ul id = "list2" >

     < li class = "odd" >Odd</ li >

</ ul >
--------------------------------------------------------
var uls = query("ul");//检索到两个ul节点
var list = query("#list")[0];//检索到一个id为list的节点
var odds = query(".odd");//检索到七个class为odd的节点
var oddLI = query("li.odd");//检索到四个li的class为odd的节点
var allA = query("li a");//检索到六个li子节点为a的节点
var someA = query("li > a");//检索到两个li第一个子节点为a的节点
query方法中的字符串叫选择器，其规则同CSS相同，返回值为一个数组。

forEach方法用来遍历数据元素。
query(".odd" ).forEach( function (node, index, nodelist){

             //


         });

在forEach的callBack方法里有三个参数，
node指代当前元素，
index指代当前元素在数组中的序列号，
nodelist为query(".odd")返回的数据（可选），在某些情况下可能需要，如需要获取当前元素前一个元素时
虽然通过id只会检索到一个节点，但query只以数组的形式返回，所以通过 query("#list")[0]即可直接获取。

如果需要对检索的全部元素做相同的处理，则不用通过forEach分别对每个元素进行操作，可直接对query(".odd")进行操作，如
query(".odd").addClass("red" );//对所有class名为odd的元素添加class red


query(".odd").removeClass("red").addClass("blue " );// 对所有class名为odd的元素删除class red并添加class blue


query(".even").style("color", "white").addClass("italic " );// 对所有class名为even的元素修改color样式为white，并添加class italic
query(".hookUp").on("click", function(){

             alert( "This button is hooked up!" );

         });// 对所有class名为hookUp的元素添加一个click响应事件