dojo 六使用query dojo/query

爱被打了一巴掌 2021-11-10 07:00 337阅读 0赞

要使用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响应事件`

转载于:https://www.cnblogs.com/tiandi/p/3415899.html