Started

Selectors

Utilities

Animation

AJAX

CSS

Event

Manipulation

Cookie

String

Attributes

Data

Storage

Miscellaneous

$select

Select elements by CSS selector
$select( selector, callback )
  1. selector [string]
    The CSS selector for querying elements.
  2. callback (optional) [function]
    The callback function for each matched elements.

Notes

This is a powerful selector for querying elements with native CSS selector powered and supported by browser engine. The syntax of selector string should be compatible with the web application you supported, especially for IE6/7 which supported simple CSS syntax only. But Qatrix is recommended that, using the good organized document element with id and className correctly provided for DOM querying is much more efficient than using powerful element selector.

Example

HTML code
<div class="box_wrap">
<div class="box">This is box 1</div>
<div class="box">This is box 2 <span>This is a span inside the box</span></div>
<span>This is a span</span>
</div>

<div class="box_wrap">
<div class="box">This is box 1</div>
<div class="box">This is box 2</div>
<div class="box"><div><span>This is a span inside the box inside box</span></div></div>
</div>

<button onclick="select_span()">select span</button>
CSS code
.box {
	width: 100px;
	height: 80px;
	margin: 10px 0;
	font-size: 12px;
	background: #5599bb;
	padding: 10px;
}
JavaScript code
function select_span()
{
	$select( ".box_wrap span", function (item)
	{
		$text(item, "I found this span!");
		$style.set(item, "color", "red");
	});
}
Demonstration
This is box 1
This is box 2 This is a span inside the box
This is a span
This is box 1
This is box 2
This is a span inside the box inside box