Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 358 lines (250 sloc) 13.622 kb
fcc4fff8 » phiggins42
2011-11-20 monster commit from moinconverter, which is always done prior to the …
1 .. _dojo/query:
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
2
36ee29d2 » phiggins42
2011-11-24 fx touchups
3 ==========
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
4 dojo.query
5 ==========
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
6
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
7 .. contents::
8 :depth: 2
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
9
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
10 **dojo.query()** returns a list of DOM nodes based on a CSS selector.
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
11
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
12 **dojo/query** is the AMD module containing the query function in 1.7.
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
13
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
14 Introduction
15 ============
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
16
c9772fd7 » wkeese
2011-11-24 more link fixes
17 XHR is half of the AJAX story. Once you make a request for data and receive it via :ref:`dojo.xhr <dojo/xhr>`, you must change the page - display the new data in a panel, turn an indicator from red to green, or whatever. Changing HTML is, in turn, dependent on locating nodes.
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
18
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
19 A bad solution: using the DOM API
20 ---------------------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
21
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
22 To select HTML elements in JavaScript, you can use the browser's native DOM API, but they're verbose and hard to work with...not to mention slow. For example, retrieving all nodes with the class "progressIndicator" uses this code:
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
23
c49c87d5 » phiggins42
2011-11-21 normalization
24 .. js ::
ffa767cf » phiggins42
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
25
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
26 <script type="text/javascript">
27 // list every node with the class "progressIndicator":
28 var list = [];
29 var nodes = document.getElementsByTagName("*");
30 // iterate over every node in the document....SLOOOW
31 for(var x = 0; x < nodes.length; x++){
32 // only nodes with the class "progressIndicator":
33 if(nodes[x].className == "progressIndicator"){
34 // add to array:
35 list.push(nodes[x]);
36 }
37 }
38 console.dir(list);
39 </script>
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
40
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
41 Oy! That's a lot of code for what should be very simple. It's also very slow.
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
42
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
43 Better and faster: dojo.query
44 -----------------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
45
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
46 **dojo.query** gives us a more compact way to do it, and it's often faster, particularly as we ask for more sophisticated kinds of relationships. The following is exactly equivalent to our first example:
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
47
48
c49c87d5 » phiggins42
2011-11-21 normalization
49 .. js ::
ffa767cf » phiggins42
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
50
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
51 <script type="text/javascript">
52 // list every node with the class "progressIndicator":
53 console.dir( dojo.query(".progressIndicator") );
54 </script>
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
55
56
36ee29d2 » phiggins42
2011-11-24 fx touchups
57
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
58 Usage
59 =====
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
60
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
61 Users of other libraries will find the syntax very familiar:
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
62
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
63 Dojo 1.7 (AMD)
64 --------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
65
c49c87d5 » phiggins42
2011-11-21 normalization
66 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
67
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
68 require("dojo/query", function(query){ // Note, query or any other variable name can be used
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
69
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
70 // find and dump contents of every element in the page with the class "blueButton" assigned
71 query(".blueButton").forEach(function(node, index, arr){
72 console.debug(node.innerHTML);
73 });
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
74
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
75 });
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
76
77
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
78 Dojo < 1.7
79 ----------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
80
c49c87d5 » phiggins42
2011-11-21 normalization
81 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
82
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
83 dojo.ready(function(){
84 // every element in the page with the class "blueButton" assigned
85 dojo.query(".blueButton").forEach(function(node, index, arr){
86 console.debug(node.innerHTML);
87 });
88 });
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
89
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
90 The returned object of a **dojo.query()** call is an instance of :ref:`dojo.NodeList <dojo/NodeList>`, a subclass of Array with many convenience methods added for making DOM manipulation and event handling easier. Custom extensions of the **dojo.NodeList** class are supported and encouraged.
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
91
92
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
93 Examples
94 ========
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
95
96
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
97 Simple Queries
98 ---------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
99
c49c87d5 » phiggins42
2011-11-21 normalization
100 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
101
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
102 // all <h3> elements
103 dojo.query('h3')
104 // all <h3> elements which are first-child of their parent node
105 dojo.query('h3:first-child')
106 // a node with id="main"
107 dojo.query('#main')
108 // all <h3> elements within a node with id="main"
109 dojo.query('#main h3')
110 // a <div> with an id="main"
111 dojo.query('div#main')
112 // all <h3> elements within a div with id="main"
113 dojo.query('div#main h3')
114 // all <h3> elements that are immediate children of a <div>, within node with id="main"
115 dojo.query('#main div > h3')
116 // all nodes with class="foo"
117 dojo.query('.foo')
118 // all nodes with classes "foo" and "bar"
119 dojo.query('.foo.bar')
120 // all <h3> elements that are immediate children of a node with id="main"
121 dojo.query('#main > h3')
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
122
123
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
124 Immediate Child Elements
125 ------------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
126
c49c87d5 » phiggins42
2011-11-21 normalization
127 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
128
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
129 dojo.query('#main > *')
130 dojo.query('#main >')
131 dojo.query('.foo >')
132 dojo.query('.foo > *')
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
133
134
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
135 Queries rooted at a given element
136 ----------------------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
137
c49c87d5 » phiggins42
2011-11-21 normalization
138 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
139
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
140 dojo.query('> *', dojo.byId('container'))
141 dojo.query('> h3', 'main')
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
142
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
143 Compound queries
144 ---------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
145
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
146 Combining 2 or more selectors to produce one resultset
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
147
c49c87d5 » phiggins42
2011-11-21 normalization
148 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
149
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
150 dojo.query('.foo, .bar')
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
151
152
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
153 Multiple class attribute values
154 ---------------------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
155
c49c87d5 » phiggins42
2011-11-21 normalization
156 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
157
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
158 dojo.query('.foo.bar')
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
159
160
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
161 Using attribute selectors
162 -------------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
163
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
164 Picking out elements with particular attributes/values
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
165
c49c87d5 » phiggins42
2011-11-21 normalization
166 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
167
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
168 dojo.query('[foo]')
169 dojo.query('[foo$=\"thud\"]')
170 dojo.query('[foo$=thud]')
171 dojo.query('[foo$=\"thudish\"]')
172 dojo.query('#main [foo$=thud]')
173 dojo.query('#main [ title $= thud ]')
174 dojo.query('#main span[ title $= thud ]')
175 dojo.query('[foo|=\"bar\"]')
176 dojo.query('[foo|=\"bar-baz\"]')
177 dojo.query('[foo|=\"baz\"]')
178 dojo.query('.foo:nth-child(2)')
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
179
180
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
181 Descendant selectors
182 ------------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
183
c49c87d5 » phiggins42
2011-11-21 normalization
184 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
185
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
186 dojo.query('>', 'container')
187 dojo.query('> *', 'container')
188 dojo.query('> [qux]', 'container')
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
189
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
190 Sibling selectors
191 --------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
192
c49c87d5 » phiggins42
2011-11-21 normalization
193 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
194
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
195 dojo.query('.foo + span')
196 dojo.query('.foo ~ span')
197 dojo.query('#foo ~ *')
198 dojo.query('#foo ~')
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
199
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
200 Sub-selectors, using not()
201 -------------------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
202
c49c87d5 » phiggins42
2011-11-21 normalization
203 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
204
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
205 dojo.query('#main span.foo:not(span:first-child)')
206 dojo.query('#main span.foo:not(:first-child)')
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
207
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
208 Nth-child
209 ----------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
210
c49c87d5 » phiggins42
2011-11-21 normalization
211 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
212
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
213 dojo.query('#main > h3:nth-child(odd)')
214 dojo.query('#main h3:nth-child(odd)')
215 dojo.query('#main h3:nth-child(2n+1)')
216 dojo.query('#main h3:nth-child(even)')
217 dojo.query('#main h3:nth-child(2n)')
218 dojo.query('#main h3:nth-child(2n+3)')
219 dojo.query('#main > *:nth-child(2n-5)')
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
220
221
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
222 Using pseudo-selectors
223 -----------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
224
c49c87d5 » phiggins42
2011-11-21 normalization
225 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
226
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
227 dojo.query('#main2 > :checked')
228 dojo.query('#main2 > input[type=checkbox]:checked')
229 dojo.query('#main2 > input[type=radio]:checked')
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
230
231
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
232 Count of checked checkboxes in a form with id myForm
233 ----------------------------------------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
234
c49c87d5 » phiggins42
2011-11-21 normalization
235 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
236
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
237 dojo.query('input:checked', 'myForm').length
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
238
239
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
240 Standard CSS3 Selectors
241 =======================
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
242
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
243 Because dojo.query adopts the CSS3 standard for selecting nodes, you can use any CSS reference guide for help on choosing the right queries. Eric Meyer's CSS: The Definitive Guide is a good resource. For convenience, here's a chart of the standard CSS3 selectors, taken from the current working draft RFC.
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
244
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
245 ====================== ==========
3171d1e2 » wkeese
2011-11-28 fix tables
246 Pattern Meaning
247 ====================== ==========
248 \* any element
249 E an element of type E
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
250 E[foo] an E element with a "foo" attribute
251 E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar"
252 E[foo~="bar"] an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "bar"
253 E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"
254 E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar"
255 E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar"
256 E[hreflang|="en"] an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en"
257 E:root an E element, root of the document
258 E:nth-child(n) an E element, the n-th child of its parent
259 E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
260 E:nth-of-type(n) an E element, the n-th sibling of its type
261 E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
262 E:first-child an E element, first child of its parent
263 E:last-child an E element, last child of its parent
264 E:first-of-type an E element, first sibling of its type
265 E:last-of-type an E element, last sibling of its type
266 E:only-child an E element, only child of its parent
267 E:only-of-type an E element, only sibling of its type
268 E:empty an E element that has no children (including text nodes)
269 E:link
3171d1e2 » wkeese
2011-11-28 fix tables
270 E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
271 E:active
272 E:hover
273 E:focus an E element during certain user actions
3171d1e2 » wkeese
2011-11-28 fix tables
274 E:target an E element being the target of the referring URI
275 E:lang(fr) an element of type E in language "fr" (the document language specifies how language is determined)
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
276 E:enabled
3171d1e2 » wkeese
2011-11-28 fix tables
277 E:disabled a user interface element E which is enabled or disabled
278 E:checked a user interface element E which is checked (for instance a radio-button or checkbox)
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
279 E::first-line the first formatted line of an E element
280 E::first-letter the first formatted letter of an E element
281 E::selection the portion of an E element that is currently selected/highlighted by the user
3171d1e2 » wkeese
2011-11-28 fix tables
282 E::before generated content before an E element
283 E::after generated content after an E element
284 E.warning an E element whose class is "warning" (the document language specifies how class is determined).
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
285 E#myid an E element with ID equal to "myid".
3171d1e2 » wkeese
2011-11-28 fix tables
286 E:not(s) an E element that does not match simple selector s
287 E F an F element descendant of an E element
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
288 E > F an F element child of an E element
289 E + F an F element immediately preceded by an E element
290 E ~ F an F element preceded by an E element
291 ====================== ==========
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
292
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
293 dojo/query (1.7 only)
294 =====================
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
295
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
296 In Dojo 1.7, a dojo/query module is also available to reference to the query functionality and choose alternate selector engines and needed levels of compliance. The basic usage of the dojo/query module is to simply use the module's value as the query function:
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
297
c49c87d5 » phiggins42
2011-11-21 normalization
298 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
299
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
300 define(["dojo/query"], function(query){
301 var nodeList = query(".foo.bar");
302 });
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
303
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
304 We can also specify alternate selector engines and compliance levels. By default, Dojo base will use the acme selector engine, which supports a large set of CSS3 selectors. However, not all applications need all of these selectors, and most queries can be performed with the native selector engines or with a simpler engine. Dojo 1.7 includes a new lite selector engine for situations where simpler queries are sufficient. The acme selector engine is about 14KB (minified, not gzipped), whereas the lite selector engine is about 2KB, which can be a big advantage for mobile applications. There are several different levels of CSS compliance that can be selected:
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
305
36ee29d2 » phiggins42
2011-11-24 fx touchups
306
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
307 Select Engine Levels
36ee29d2 » phiggins42
2011-11-24 fx touchups
308 --------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
309
aa84a727 » wkeese
2011-11-23 dojo/ spelling
310 * css2 (or lite) - This will always use the lite engine, which delegates to the native selector engine if available for anything but very simple queries (like id lookups). When a native selector engine is not available (IE7 and below), this supports simple, basic CSS2 level queries, consisting of elemental selectors: .class, #id, tag, and star, attribute selectors, and child (>), descendant (space), and union (,) combinators. With a native selector engine, the lite engine does not support pseudo classes.
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
311 * css2.1 - This will always use the lite engine when a native selector engine is available. When a native selector engine is not available (IE7 and below), this will load acme.
312 * css3 - This will always use the lite engine when a native selector engine with significant CSS3 support is available. When a CSS3 capable (supporting most features) native selector engine is not available (IE8 and below), this will load acme.
aa84a727 » wkeese
2011-11-23 dojo/ spelling
313 * acme - The acme selector engine with full CSS3 features will be used. This supports certain features that are not available in any native engine (albeit rarely used).
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
314
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
315 When you are not using Dojo base (running async without a dependency on base module "dojo"), the default selector engine level is "css3". Again, if you are using Dojo base, the default is "acme".
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
316
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
317 Specifying Selector Level
36ee29d2 » phiggins42
2011-11-24 fx touchups
318 -------------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
319
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
320 There are a couple of ways to set the selector engine. First, we can define the selector engine as part of the dojo configuration for the whole page:
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
321
c49c87d5 » phiggins42
2011-11-21 normalization
322 .. html ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
323
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
324 <script data-dojo-config="selectorEngine='css2.1'" src="dojo/dojo.js">
325 </script>
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
326
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
327 You can also specify the selector engine level you are dependent on for each of your module. This is done by indicating the CSS selector engine level after ! in the dojo/query module id. For example, if your module needed to do a CSS3 level query, you could write:
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
328
c49c87d5 » phiggins42
2011-11-21 normalization
329 .. js ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
330
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
331 define(["dojo/query!css3"], function(query){
332 query(".someClass:last-child").style("color", "red");
333 });
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
334
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
335 If Dojo had started with the lite engine, this will ensure that CSS3 support is available, and will load Acme on older browsers. It is recommended that you using this syntax for modules that make more complex queries. If your module is using a simpler query, than using "dojo/query" or "dojo/query!css2.1" should be used.
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
336
36ee29d2 » phiggins42
2011-11-24 fx touchups
337
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
338 Alternate Selector Engines
36ee29d2 » phiggins42
2011-11-24 fx touchups
339 --------------------------
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
340
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
341 We can also use other selector engine levels. Both Sizzle and Slick are excellent selector engines that work with dojo/query. AMD/Dojo compatible versions (just wrapped with AMD) are available here:
342 https://github.com/kriszyp/sizzle and https://github.com/kriszyp/slick
343 Once installed, you can use the selector engine module id as specified selector engine level. We could set Sizzle as the query engine for our page:
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
344
c49c87d5 » phiggins42
2011-11-21 normalization
345 .. html ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
346
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
347 <script data-dojo-config="selectorEngine='sizzle/sizzle'" src="dojo/dojo.js">
348 </script>
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
349
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
350 or set Slick as the engine for a particular module:
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
351
c49c87d5 » phiggins42
2011-11-21 normalization
352 .. html ::
d608cc59 » phiggins42
2011-11-20 \r\n -> \n conversion.
353
9dd52dc6 » phiggins42
2011-11-20 mondo whitespace change
354 define(["dojo/query!slick/Source/slick"], function(query){
355 query(".someClass:custom-pseudo").style("color", "red");
356 });
36ee29d2 » phiggins42
2011-11-24 fx touchups
357
358 .. api-inline :: dojo.query
359
Something went wrong with that request. Please try again.