Basics

xui is available as the global x$ function. It accepts a CSS selector string or DOM element, or an array of a mix of these, as parameters, and returns the xui object. For example:

   var header = x$('#header'); // returns the element with id attribute equal to "header".

For more information on CSS selectors, see the W3C specification. Please note that there are different levels of CSS selector support (Levels 1, 2 and 3) and different browsers support each to different degrees. Be warned!

The functions described in the docs are available on the xui object and often manipulate or retrieve information about the elements in the xui collection.

extend

Extends XUI's prototype with the members of another object.

syntax

xui.extend( object );

arguments

• object Object contains the members that will be added to XUI's prototype.

example

Given:

var sugar = {
    first: function() { return this[0]; },
    last:  function() { return this[this.length - 1]; }
}

We can extend xui's prototype with members of sugar by using extend:

xui.extend(sugar);

Now we can use first and last in all instances of xui:

var f = x$('.button').first();
var l = x$('.notice').last();

find

Find the elements that match a query string. x$ is an alias for find.

syntax

x$( window ).find( selector, context );

arguments

• selector String is a CSS selector that will query for elements.
• context HTMLElement is the parent element to search from (optional).

example

Given the following markup:

<ul id="first">
    <li id="one">1</li>
    <li id="two">2</li>
</ul>
<ul id="second">
    <li id="three">3</li>
    <li id="four">4</li>
</ul>

We can select list items using find:

x$('li');                 // returns all four list item elements.
x$('#second').find('li'); // returns list items "three" and "four"

set

Sets the objects in the xui collection.

syntax

x$( window ).set( array );

reduce

Reduces the set of elements in the xui object to a unique set.

syntax

x$( window ).reduce( elements, index );

arguments

• elements Array is an array of elements to reduce (optional).
• index Number is the last array index to include in the reduction. If unspecified, it will reduce all elements (optional).

has

Returns the elements that match a given CSS selector.

syntax

x$( window ).has( selector );

arguments

• selector String is a CSS selector that will match all children of the xui collection.

example

Given:

<div>
    <div class="round">Item one</div>
    <div class="round">Item two</div>
</div>

We can use has to select specific objects:

var divs    = x$('div');          // got all three divs.
var rounded = divs.has('.round'); // got two divs with the class .round

filter

Extend XUI with custom filters. This is an interal utility function, but is also useful to developers.

syntax

x$( window ).filter( fn );

arguments

• fn Function is called for each element in the XUI collection.

  // `index` is the array index of the current element
  function( index ) {
      // `this` is the element iterated on
      // return true to add element to new XUI collection
  }
  

example

Filter all the <input /> elements that are disabled:

x$('input').filter(function(index) {
    return this.checked;
});

not

The opposite of has. It modifies the elements and returns all of the elements that do not match a CSS query.

syntax

x$( window ).not( selector );

arguments

• selector String a CSS selector for the elements that should not be matched.

example

Given:

<div>
    <div class="round">Item one</div>
    <div class="round">Item two</div>
    <div class="square">Item three</div>
    <div class="shadow">Item four</div>
</div>

We can use not to select objects:

var divs     = x$('div');          // got all four divs.
var notRound = divs.not('.round'); // got two divs with classes .square and .shadow

each

Element iterator for an XUI collection.

syntax

x$( window ).each( fn )

arguments

• fn Function callback that is called once for each element.

  // `element` is the current element
  // `index` is the element index in the XUI collection
  // `xui` is the XUI collection.
  function( element, index, xui ) {
      // `this` is the current element
  }
  

example

x$('div').each(function(element, index, xui) {
    alert("Here's the " + index + " element: " + element);
});