关于mootools的选择器，我们可以用官网的一个例子来看看。
我们首先找到一个mootools的cdn链接：<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.3/mootools-yui-compressed.js"></script>
这个是google上面的。买电器，选大品牌，写代码，也用大公司的吧。哈哈。
然后我们要打算编写selector部分js。在mootools 中，$(''),专门用于选择id, $$('')则用于多重条件选择器。
我们计划是用户点击对应的文本内容，内容就被作为选择器内容进行选择，但是这里我们会用到：getElements(selector)这个方法。
当然我们也可以让用户自己输入选择对象的内容，于是我们可以留出一个input 是让用户自己输入的。
这样一来，整个设计意图和大概框架就清楚了。
Html部分：
View Code
<p>
Try a CSS Selector or pick one of the predefined ones.
</p>
<input type="text" id="selector" size="40" />
<input type="button" value="Search the DOM" id="searchDOM" /><br />
<ul id="selector_list">
<li><h4>CSS Selectors:</h4></li>
<li>
<a href="#">p, a, label</a><br />
Matches all paragraph, links and labels
</li>
<li>
<a href="#">tr td:first-child</a><br />
Matches all first td in every row
</li>
<li>
<a href="#">input:checked + label</a><br />
Matches only the next label element where the previous checkbox is checked
</li>
<li>
<a href="#">input[name="myCheckbox"] + label</a><br />
Matches only the next label element where the previous has a name attribute containing "myCheckbox"
<li>
<a href="#">div:contains(Some text)</a><br />
Checks if an element contains the string "Some text"
</li>
<li>
<a href="#">table tr:odd td</a><br />
Selects all td elements of the odd rows of the table
</li>
<li><h4>Reversed Combinators:</h4></li>
<li>
<a href="#">p !> .chapter</a><br />
Matches a .chapter that is a direct parent of a paragraph
</li>
<li>
<a href="#">p ! div.chapter</a><br />
Matches a div.chapter which is any parent of a paragraph
</li>
<li>
<a href="#">a !> strong ! th:nth-child(3) ! table</a><br />
Give me every TABLE whose third TH contains a STRONG A
</li>
</ul>
<div id="search_wrapper">
<h4>The elements we search in:</h4>
<div id="seach_in_here">
<div class="chapter">
<p>div.chapter > p</p>
<p><strong>div.chapter > p > strong</strong></p>
</div>
<table>
<tr>
<th>A</th>
<th>Simple table</th>
<th>with: <strong><a href="#">table > tr > th:nth-child(3) > strong > a</a></strong></th>
</tr>
<tr>
<td>Some</td><td>Other</td><td>Text</td>
</tr>
<tr>
<td>Some</td><td>Other</td><td>Text</td>
</tr>
<tr>
<td>Some</td><td>Other</td><td>Text</td>
</tr>
<tr>
<td>Some</td><td>Other</td><td>Text</td>
</tr>
</table>
<div>
<input type="checkbox" checked><label>div > label</label>
<input type="checkbox" checked><label>div > label</label>
<input type="checkbox" name="myCheckbox"><label>div > label</label>
</div>
<div>
Some text<br />
div
</div>
</div>
如下图显示：
Try a CSS Selector or pick one of the predefined ones.
-
CSS Selectors:
- p, a, label
Matches all paragraph, links and labels - tr td:first-child
Matches all first td in every row - input:checked + label
Matches only the next label element where the previous checkbox is checked - input[name="myCheckbox"] + label
Matches only the next label element where the previous has a name attribute containing "myCheckbox" - div:contains(Some text)
Checks if an element contains the string "Some text" - table tr:odd td
Selects all td elements of the odd rows of the table -
Reversed Combinators:
- p !> .chapter
Matches a .chapter that is a direct parent of a paragraph - p ! div.chapter
Matches a div.chapter which is any parent of a paragraph - a !> strong ! th:nth-child(3) ! table
Give me every TABLE whose third TH contains a STRONG A
The elements we search in:
div.chapter > p
div.chapter > p > strong
| A | Simple table | with: table > tr > th:nth-child(3) > strong > a |
|---|---|---|
| Some | Other | Text |
| Some | Other | Text |
| Some | Other | Text |
| Some | Other | Text |
div
接下来，就是script部分：
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.3/mootools-yui-compressed.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var selector_input = $('selector'),
searchDOM = $('searchDOM'),
elements = $('seach_in_here');
$('selector_list').getElements('a').addEvent('click', function(event){
event.stop();
selector_input.set('value', this.get('text'));
searchDOM.fireEvent('click');
});
searchDOM.addEvent('click', function(){
var selector = selector_input.get('value');
elements.getElements(selector).highlight();
});
});
</script>
这样看来，就相当清楚了。我们从上之下快速的说一下：
首先定义selector_input,searchDOM还有elements，以方便之后的引用。
其次，$('selector_list').getElements('a').addEvent('click', function(event){}中有两件事情要发生，一是selector_input中赋值（用户点击对象的text内容被抓取置入），二是searchDOM被触发click事件。
最后，定义searchDOM的click事件。事件内容就是根据selector内容选择对象并将其highlight显示。
这里说说 element.fireEvent（‘eventName’）的用法。其实我就把它理解会As中的自定义事件。非常相似的是有定义事件，有触发事件。fireEvent正是在触发事件。希望我的说明能帮助大家共同进步。谢谢。
