Re: Selectors in jQuery

Daniel Glazman wrote:
> 
> I took a quick look at the list of selectors allowed by jQuery [1].
> Mostly based on CSS 3 Selectors, it lacks a few of them while adding
> others:
> 
> additions
> ---------
> :even           even elements, zero-indexed
> :odd            odd elements, zero-indexed
> :gt(n)          elements w/ index greater than n
> :lt(n)          elements w/ index lower than n
> :header         matches h1 to h6
> :animated       elements that are currently animated
> :contains(text) elements that contains the given text
> :has(selector)  matches elements that contain at least one
>                   element matching selector
> :parent         matches elements that are parents

It appears as :parent is just :not(:empty) in CSS selectors.

> :hidden         elements that are hidden
> :visible        elements that are visible
> :input,
> :text,
> :password,
> :radio,
> :checkbox,
> :submit,
> :image,
> :reset,
> :button
> :file           match elements of the given type

First of all we need to understand that jQuery uses selectors for
queries that are invoked from script, so dynamically - from time to
time.

CSS selectors in contrary define static system that applies to elements
all of the time - any change in the DOM triggers recalculation of
selectors on involved elements. I've tried to explain problem here [1].
This means that jQuery can use selectors that are more computationally
complex than the ones in CSS.

Thus you can compare CSS set of selectors and JQ set of selectors only
to some extent. They never be the same as are serving different
purposes. Ideally JQ selector set has to be a strict superset of the CSS
one.

If to speak about UI runtime state flags then here is the list of
additional pseudo-classes that we use in htmlayout and Sciter engines
to better handle Web alike UI cases:


:expanded
:collapsed - these flags are mutually exclusive and are in runtime
              by script/code. When set they may trigger animation as
              a delta between expanded and collapsed styles.

:busy      - there is at least one pending network operation on
              the element. E.g. <img> or <frame> when loading their
              content have this state. Elements that issue AJAX
              request will also have this flag set until the request
              finishes.
:incomplete - element that uses external data has no that data
              arrived yet. E.g. <img>, <frame>, <object> use external
              data and can be in :incomplete state.
              img:incomplete:not(:busy) - means that network
              operation finished with failure - e.g. image bits
              are not available.

:animating - is a "must" for animations. E.g. animation from
              display:block to display:none state requires the
              element to be display:block during the animation.

:focusable - element is active and will accept focus.
              E.g. hyperlinks, input elements, scrollables
              are focusable by default.

:synthetic - all elements that were synthesized -
              have not originated from document markup.
              In other words: elements that were created
              by script/behaviors will get this flag set.

:tab-focus - element that is in :focus state and have got
              the focus due to TAB key handling.
              Input elements on Windows have different
              styling when they got focus by TAB.
              Compare default hyperlink styling in IE and FF
              when the link gets focus by mouse or by tab.
              FF shows dotted outline always and IE only if
              the element have got focus by tab.

:drag-over   - these state flags are used by internal drag-n-drop
:drop-target   implementation. I suspect that JQ should have
:moving        something about them too.
:copying
:drag-source

:ltr        - is true if the element or one of its (nearest) parents
               has @dir declared and that dir has value of "ltr"
:rtl        - is true if the element or one of its (nearest) parents
               has @dir declared and that dir has value of "rtl"

:has-child     - element has single child.
:has-children  - element has at least one child.
:has-text      - element has text - non-whitespace sequence of
                  characters.

We have also experimental support of the following:

E:has-child-of-type(T) - matches element that has precisely one
               immediate child of type T.
E:has-children-of-type(T) - matches element that has one or more
               immediate children of type T.

My two cents as they say.

-- 
[1] "CSS, selectors and computational complexity":
     http://www.terrainformatica.com/?p=99

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Thursday, 9 October 2008 17:53:52 UTC