Today, we are pleased to release ZK 5.0.2 which introduces a new feature jQuery selector to make working with ZK seamless.


For an interactive demo please click here.

ZK’s jQuery selector example

As demonstrated, we use the @ sign to locate widgets with a matching name and use the $ sign to seek the widget with matching IDs, for example:

  1. jq(‘@window > $abc’) will return the two div(id=abc) elements.
  2. jq(‘@window[class~=”abc”] @div’) will only return the div where is inside the window with “abc” CSS class name.
  3. jq(‘div$win1 > $abc’) will return the div element where is inside the win1 window.
  4. jq(‘$abc’) will return all the elements that match from the given id.
  5. jq(‘@div’) will return all the elements that match from the given tag name.
  6. jq(‘@window:first’) will return id=”win1″
  7. jq(‘@window[border=”normal]”‘) will return id=”win1″.

Note that you can use CSS and ZK selectors together. For example, jq(“@window > div”) will return the Div element which is under the window widget.


The ZK selector is excellent for optimizing applications at the client. The concept of ZK selector was introduced to enable automatic testing without needed a UUID as we can use ZK selectors to identify ZK components. This was implemented by our testing technology ZTL. Most applications change their code in the future, but they don’t want to re-code test each time the software changes. That is why we enhanced the selector to work with ZK, because the selector is more relative than UUID in testing code.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

4 Responses to “ZK 5.0.2 – ZK’s jQuery selectors”

  1. twiegand says:

    Would you mind posting the source code for the interactive demo link please? It would sure help me understand how to use your examples correctly.

    Thank you!

  2. cjs says:

    Very Cool!

  3. PiotrB says:

    I would also like to see the source code

Leave a Reply