<一>主要方法
1.$()
2.$F()
3.$A()
4.$H()
5. $R()
6.Try.these()
7.Ajax.Request
8.Ajax.Updater
$('bookdiv').update('<p>...</p>'); //更新innerHtml
$('bookdiv').show();
$('bookdiv').hide();
$('bookdiv').toggle(); //切换visiable
$('bookdiv').visiable(); //返回是否visiable
$('bookdiv').scrollTo();
值得留意的还有和CSS一样的批量选择语法$$(),
如$$('div#left_books).each(....) ,CSS的语法指它的#. 等符号及嵌套的定义
<二>总结
1.Element系列有很多实用的函数:
visible(element); //返回是否visiable
Element.show();
Element.hide();
Element.toggle(); //切换visiable
Element.scrollTo();
Element.empty();
update(element, html); //更新innerHtml
......
2.Form系列有很多实用的函数:
serialize(form):将Form中所有Input对象的值转化为一个URL String,方便把Form转为用 URL Get方式的Ajax提交,
最经典的用Ajax提交Form的例子:
<form action="/action/here" method="post"
onsubmit="new Ajax.Updater('div_to_be_updated', '/action/here', {parameters:Form.serialize(this)});
return false;">
下面两个函数可以监察Form里数值变化的情况,典型应用是离开本页时,提醒用户还有没有保存的修改。和传统的检查方式相比,下面的函数是用户有input的动作时主动调度myCallBackFunction设置一个flag,而不是页面提交时才进行批量检查,加速提交的速度。
new Form.EventObserver($("myform"), myCallBackFunction);
new Form.Element.EventObserver($("myfield", myCallbackFunction);
focusFirstElement(form)
findFirstElement(form)
getInputs(form [, typeName [, name]])
getElements(form)
......
3.Event系列有很多实用的函数:
Event.element(event),返回触发事件的element.
Event.findElement(event,tagName),搜索DOM tree里事件的响应链里的第一个符合tagName的element.
pointerX(event),pointerY(event)等
4.Ruby风格
1.循环函数
elements.each( function(element){
alert(element);
});
2.不定参数
new Ajax.Updater('mydiv', '/foo/bar', {asynchronous:true});
5.Observe模式
Observe模式,就是连接仍然以<a href="foo.jsp" >形式编写链接,用Observe为其加入onClick事件的侦听。 这样,当搜索引擎访问时,就会访问传统的URL;而用户使用浏览器访问时,就会被Observe转为使用onClick事件的Ajax效果。
SpringSide推荐用$${},批量选择element进行设置onclick 事件,ajax的访问原来的<a href>。
$$('div#left_books * a\[href\]').each(function(element){
Event.observe(element,'click',handlerCilckEvent,false);
});
function handlerCilckEvent(event){
var element = Event.element(event);
new Ajax.Updater('bookdiv',element.href);
}
6.script.aculo.us
script.aculo.us 在Prototype的基础上进行了二次开发。
//script.aculo.us 提供了非常方便的使用ajax 调用服务器端自动填充文本框功能。
new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate, url, options);
参考文件
prototype.js源代码
http://www.sergiopereira.com/articles/prototype.js.html
http://www.prototypedoc.com/