prototype javascript library Selector example

<ul id="fruits">
 <li id="apples">
  <h3 title="yummy!" id="hid">Apples</h3>
  <ul id="list-of-apples">
   <li id="golden-delicious" title="yummy!" >Golden Delicious</li>
   <li id="mutsu" title="yummy!">Mutsu</li>
   <li id="mcintosh">McIntosh</li>
   <li id="ida-red">Ida Red</li>
  </ul>
  <p id="saying">An apple a day keeps the doctor away.</p>
 </li>
</ul>
<script type="text/javascript" charset="utf-8">
 function doc(argument) {
  document.write("<br>\n");
  document.write(argument);
  document.write("</br>\n");
 }
 
 $$('p', 'h3').each(function (i) {
  doc(i.tagName.toLowerCase() + ':' + i.id);
 });
 doc('======================================================================');
 // $$(exps) == document.getElementsBySelector(exps) == Selector.findChildElements(document, $A(exps))
 Selector.findChildElements(document, ['p', 'h3']).each(function (i) {
  doc(i.tagName.toLowerCase() + ':' + i.id);
 });
 doc('======================================================================');
 doc(Selector.matchElements($('apples', 'saying'), 'p').length);
 Selector.matchElements($('apples', 'saying'), 'p').each(function (i) {
  doc(i.tagName.toLowerCase() + ':' + i.id);
 });
 doc(Selector.findElement($('apples', 'golden-delicious', 'mutsu', 'mcintosh', 'ida-red'), 'li', 1).id);
 doc('======================================================================');
 doc($('apples').match('li'));
 doc($('apples').match('p'));
 var s = new Selector('p'); 
 doc(s.match($('saying')));
 doc('======================================================================');
 var l = new Selector('li p');
 l.findElements($('fruits')).each(function (i) {
  doc(i.tagName.toLowerCase() + ':' + i.id);
 });
 var l = new Selector('ul li');
 l.findElements($('fruits')).each(function (i) {
  doc(i.tagName.toLowerCase() + ':' + i.id);
 });
 doc('======================================================================');
 $('apples').getElementsBySelector('[title="yummy!"]').each(function (y) {
  doc(y.tagName.toLowerCase());
 });
 doc('======================================================================');
 $('apples').getElementsBySelector( 'p#saying', 'li[title="yummy!"]').each(function (c) {
  doc(c.tagName.toLowerCase());
 });
 doc('======================================================================');
 doc($('apples').getElementsBySelector('[title="disgusting!"]').length);
 doc('======================================================================');
 doc($('apples').getElementsBySelector('[id^="m"]').length);
 $('apples').getElementsBySelector('[id^="m"]').each(function (i) {
  doc(i.tagName.toLowerCase() + ':' + i.id);
 });
 
</script>

prototype javascript library Selector.handlers example

<ul id="fruits">
 <li id="apples">
  <h3 title="yummy!" id="hid">Apples</h3>
  <ul id="list-of-apples">
   <li id="golden-delicious" title="yummy!" >Golden Delicious</li>
   <li id="mutsu" title="yummy!">Mutsu</li>
   <li id="mcintosh">McIntosh</li>
   <li id="ida-red">Ida Red</li>
  </ul>
  <p id="saying">An apple a day keeps the doctor away.</p>
 </li>
</ul>
<form action="index" method="post" id="f1" accept-charset="utf-8" style="background: #ddd; border: #ccc double 1px;">
 <input type="text" name="input1" value="origin is enabled" id="input1"><br/>
 <input type="text" name="input2" value="origin is disabled" id="input2" disabled="true"><br/>
 <input type="text" name="other3" value="origin is disabled" id="other3" disabled=""><br/>
<input type="submit" value="Continue →" id="submit" name="submit"><br/>
</form>
<script type="text/javascript" charset="utf-8">
 function doc(argument) {
  document.write("<br/>\n");
  document.write(argument);
  document.write("<br/>\n");
 }

 var s1 = Selector.matchElements($('apples', 'golden-delicious', 'mutsu', 'mcintosh', 'ida-red'), 'li');
 var s2 = $('apples').getElementsBySelector( 'p#saying', 'li[title="yummy!"]' );
 var sh = Selector.handlers;
 var l = new Selector('ul li');
 var f = l.findElements($('fruits'));
 sh.mark(f).each(function (s) {
  doc(s.id + ' counted? ' + s._counted);
 });
 sh.unmark(f).each(function (s) {
  doc(s.id + ' counted? ' + s._counted);
 });
 doc('=============================================');
 s1.each(function (s) {
  doc(s.tagName.toLowerCase() + ".id = " + s.id);
 });
 doc('=============================================');
 s2.each(function (s) {
  doc(s.tagName.toLowerCase() + ".id = " + s.id);
 });
 doc('concat=============================================');
 sh.concat(s1, s2).each(function (s) {
  doc(s.tagName.toLowerCase() + ".id = " + s.id);
 });
 doc('unique=============================================');
 sh.unique(sh.concat(s1, s2)).each(function (s) {
  doc(s.tagName.toLowerCase() + ".id = " + s.id);
 });
 doc('array.uniq()=============================================');
 sh.concat(s1, s2).uniq().each(function (s) {
  doc(s.tagName.toLowerCase() + ".id = " + s.id);
 }); 
 doc('descendant=============================================');
 sh.descendant(sh.unique(sh.concat(s1, s2))).each(function (s) {
  doc(s.tagName.toLowerCase() + ".id = " + s.id);
 });
 doc('child=============================================');
 sh.child(sh.concat(s1, s2)).each(function (s) {
  doc(s.tagName.toLowerCase() + ".id = " + s.id);
 });
 doc('adjacent=============================================');
 sh.adjacent(f).each(function (s) {
  doc(s.tagName.toLowerCase() + ".id = " + s.id);
 });
 doc('=============================================');
 var inputs = $$('form/input[name*="input"]');
 inputs.each(function (i) {
  doc(i.id);
 });
 
</script>

prototype javascript library Function extends example

<script type="text/javascript" src="prototype.js" charset="utf-8"></script>

<input type="checkbox" id="myChk" value="1"/> Test Function.prototype.bindAsEventListener

<input type="button" id="myBut1" value="bind element test" onclick="doc.bind(this)('arg1', 'arg2');"/> Test Function.prototype.bind

<input type="button" id="myBut2" value="bind window test" onclick="doc.bind(self)('arg1');"/> Test Function.prototype.bind

<script type="text/javascript" charset="utf-8">
function doc(){
 // this 根据调用它的对象不同而不同，可以是element对象, 也可以是当前window对象
 alert([this].concat($A(arguments)).inspect());
}

//declaring the class
var CheckboxWatcher = Class.create();
//defining the rest of the class implementation
CheckboxWatcher.prototype = {
 initialize: function(chkBox, message) {
  this.chkBox = $(chkBox);
  this.message = message;
  //this.chkBox.onclick
  // = this.showMessage.bindAsEventListener(this, ' other extraInfo') 
  // => function(event) { return __method.apply(object, [event || window.event].concat(args));}
  
  //将showMessage方法做为this object的方法来调用并返回showMessage方法的结果
  //既然是将showMessage做为this object的方法来调用，那showMessage中的this是指向当前调用它的object(即为CheckboxWatcher的实例对象，如watcher)。
  //this.chkBox.onclick = this.showMessage.apply(this, ['none event', ' other extraInfo']);
  //assigning our method to the event
  this.chkBox.onclick = this.showMessage.bindAsEventListener(this, ' other extraInfo');
 },
 
 showMessage: function(evt, extraInfo) {
  //this是指向watcher这个实例对象的
  //showMessage这个方法一般是不会从外部调用的
  alert(this.message + ' (' + evt + ')' + extraInfo);
 },
 
 bindExample: function() {
  alert(this.message + "\n" + $A(arguments).inspect);
 }
};

var watcher = new CheckboxWatcher('myChk', 'Changed');
</script>