ZPT-JS reference - Query expressions

Syntax

query_expression ::= 'query:' expresssion
                

Description

Query expressions evaluate arbitrary query expressions using CSS selectors.

ZPT-JS first evaluates the expression and them invokes window.document.querySelectorAll to get the results.

Differences with ZPT

Query expressions does not exist in ZPT.

Examples

Let's define some HTML elements and assign them some IDs:

<div>
    <div>value1 = <span id="value1" class="values">10</span></div>
    <div>value2 = <span id="value2" class="values">20</span></div>
    <div>value3 = <span id="value3" class="values">30</span></div>
</div>
                

An example using ID selector:

<div>query:'#value1' = 10 = <span id="t1" data-content="query:'#value1'">must be 10</span></div>
                

Some examples using class selector:

<div>query:'.values' = 10,20,30 = <span id="t2" data-content="query:'.values'">must be 10,20,30</span></div>
<div>+: query:'.values' = 60 = <span id="t3" data-content="+: query:'.values'">must be 10 + 20 + 30</span></div>
<div>+: 100 query:'.values' = 160 = <span id="t4" data-content="+: 100 query:'.values'">must be 100 + 10 + 20 + 30</span></div>
                

Some examples using ID and class selectors, combining them with vars:

<div>query:myVar = 20 = <span id="t5" data-define="myVar '#value2'" data-content="query:myVar">must be 20</span></div>
<div>+: 200 query:myVar = 260 = <span id="t6" data-define="myVar '.values'"data-content="+: 200 query:myVar">must be 200 + 10 + 20 + 30</span></div>