YASS: Yet Another cSS selector

Documentation

YASS is a lightweight CSS selectors library that supports some of the common combinations of CSS3 specification

_ or yass function params

Main selectors function receives 3 params: CSS selector itself, selection root (document by default) and noCache to clean up cache for given selector (the cache will be automatically dropped for modern browsers, but in IE you should set this parameter to select new set of nodes after changes in HTML).

More examples are listed in tutorials section.

Supported Selectors:

• class selectors (e.g., .example),
• node type selectors like span or div,
• descendant selectors (i.e. div p a),
• > child element selectors,
• ~, the immediately preceeded-by sibling selector,
• +, the preceeded-by sibling selector
• #id style ID selectors,
• * universal selector,
• attribute queries:
  • [type=checkbox] attribute value exact match,
  • [title] attribute presence selector,
  • [rel~=nofollow] attribute value list item match,
  • [class^=block] attribute start match,
  • [class$=hidden] attribute end match,
  • [alt*=image] attribute substring match,
  • [alt!=image] attribute value list item negative match,
• :first-child, :last-child positional selectors,
• :empty content empty selector,
• :root selector for HTML element,
• :checked pseudo selector for checked checkboxes or radio buttons,
• :nth-child(3) style positional calculations,
• :nth-child(even), :nth-child(odd), :nth-child(2n+1) positional selectors,
• :lang pseudo selector.

Any legal combination of these selectors will work with _(), including compound selectors ("," delimited). Returned value is either a DOM element or an array of such elements. If there is no element for given selector YASS will return null.

Unsupported Selectors:

Some of the selectors are not supported yet. Maybe they will be handled by the next versions of YASS.

• :not(...) negation pseudo selectors
• multiple selectors [class=class1][class=class2]

Modules API

YASS is very flexible for any kind of extensions. For example you can dynamically load full Prototype of full jQuery after load of YASS core. For this purpose you should write:

<script src="yass.js" type="text/javascript" class="yass-module-jquery"></script>

With this piece of code you:

1. Load YASS as external JavaScript file
2. Load file yass.jquery.js that is located near initial HTML file - on DOM ready event

You can also load any other file as a YASS module. Just use:

<script src="yass.js" type="text/javascript" class="yass-module-http://yass.webo.in/airee_ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

On the end of each module you can:

• Fire any action right after all dependencies for this module will be resolved. Dependencies can be written in any DOM node class:

  <div class="yass-module-base-jquery"></div>

  So jquery depends on base and final load won't be fired untill both of files are loaded.

  For this purpose you can setup in each module init event:

  _.modules[modules_name]['init'] = function(){...}

  For the base module it will be (in the end of the file yass.base.js):

  _.modules['base']['init'] = function(){...}

• Form tree of dependecies dynamically. For this purpose you should write _.init(module_dependency + '-' + module_name) at the end of loading file. YASS will fire load only after module_dependency is loaded.

• Execute any function on script load itself (w/o dependencies tree). Just write in title of any DOM node:

  <div id="jquery" class="yass-module-jquery" title="$('jquery').html('jQuery is loaded via YASS')"></div>

  So right after the script yass.jquery.js will be loaded and initialized title will be executed.

• Also you can touch module-specific namespace located in _.modules[module_name]. There are some pre-defined objects / variables:

  • _.modules[module_name].status indicates current status of this module (0 — not loaded yet, 1 — is being loaded, 2 — is loaded, 3 — resolving dependencies, -1 — can't be loaded).
  • _.modules[module_name].yass — hash of modules that depend on current.
  • _.modules[module_name].deps — array of modules that current one depends on.
  • _.modules[module_name].notloaded — number of not loaded dependencies.
  • _.modules[module_name].deps.yass — hash of modules that current one depends on.

  Please create all module-dependent variables inside this namespace.

More examples can we studied from online modules load demo.