ZF2_Prototype
1.$();
<mce:script type="text/javascript"><!-- // select the div and change its color to red var exampleDiv = $('my-example-div'); exampleDiv.style.backgroundColor = '#f00'; // select the text input and show its value var exampleInput = $('form-title'); alert(exampleInput.value); // now select it again using its DOM path and show its value var exampleInput = $(document.f.elements.title); alert(exampleInput.value); // --></mce:script>
2.getElementsByClassName()
<html> <head> <title> Listing 5-2: Hiding or showing boxes using document.getElementsByClassName() </title> <mce:script type="text/javascript" src="/js/prototype.js" mce_src="js/prototype.js"></mce:script> <mce:style type="text/css"><!-- .box { width : 300px; text-align : center; background : #f60; color : #fff; margin : 10px; font-weight : bold; } .box h1 { margin : 0; } --></mce:style><style type="text/css" mce_bogus="1"> .box { width : 300px; text-align : center; background : #f60; color : #fff; margin : 10px; font-weight : bold; } .box h1 { margin : 0; } </style> </head> <body> <div> <input type="button" value="Hide All" onclick="hideAll()" /> <input type="button" value="Show All" onclick="showAll()" /> </div> <div id="box-container"> <div class="box"> <h1>Box 1</h1> </div> <div class="box"> <h1>Box 2</h1> </div> </div> <mce:script type="text/javascript"><!-- function hideAll() { // find all 'box' elements var elts = document.getElementsByClassName('box', 'box-container'); // now loop over them and hide them for (i = 0; i < elts.length; i++) elts[i].hide(); } function showAll() { // find all 'box' elements var elts = document.getElementsByClassName('box', 'box-container'); // now loop over them and hide them for (i = 0; i < elts.length; i++) elts[i].show(); } // --></mce:script> </body> </html>
//---------------使用each方法
<mce:script type="text/javascript"><!-- function hideAll() { // find all 'box' elements and hide them document.getElementsByClassName('box', 'box-container').each( function(s) { s.hide(); } ); } function showAll() { // find all 'box' elements and show them document.getElementsByClassName('box', 'box-container').each( function(s) { s.show(); } ); } // --></mce:script>
//对每个元素可以使用invoke()方法
<mce:script type="text/javascript"><!-- function hideAll() { // find all 'box' elements and hide them //document.getElementsByClassName('box', 'box-container').invoke('hide'); $('box-container').getElementsByClassName('box').invoke('hide'); //$$('#box-container.box') } function showAll() { // find all 'box' elements and show them document.getElementsByClassName('box', 'box-container').invoke('show'); } // --></mce:script>
3.$$()
$$('form')选择页面上所有表单
$$('div.box')选择类名为box的所有div元素
$$('div#logo img') 选择名为＃logo的div中的img元素
$$('input[type=radio]');选择所有radio单选按钮输入元素
说明
$('element-id') ie $$('#element-id'),后者会返回数组;
$('box-container').getElementsByClassName('box').invoke('hide'); ie $$('#box-container.box')
组合：
eg.选择ID为＃box-container的层中的所有类.box
$('box-container').getElementsByClassName('box');
4.散列表
<mce:script type="text/javascript"><!-- var person = $H({ name : 'zlb', age : 30 }) // --></mce:script>
可以
each()
remove()
toQueryString
5.其他扩展
show();
hide();
toggle();
visible();
remove();从DOM中删除一个元素
6.管理元素类
addClassName();
removeClassName();
toggleClassName();有则删除，没有增加
hasClassName();
7.管理字符串
truncate();
//可是缩短,my short ...
strip();
//删除首尾的空白
stripTags();
//去除HTML标签
stripScripts();
//从字符串删除所有脚本
//------------------------------------------------------------------------------------
《1》Prototype中的事件处理
1.观察事件
Event.observe(window,'load',something) == <body onload = "something()">
另一种方式 $('element-id','click',somethind)
2.查找发生事件的元素
function something(e)
{
var img = Event.element(e);
}
3.取消事件
//防止自动转到处理页
<sript> $('my-form').oberserve('submit',Formsub); function Formsub(e) { Event.stop(e); } </sript> 《2》class 1.eg Book = Class.create(); Book.prototype = { initialize : function(title) { this.title = title; } ,//,,,,,,,,,,,,,,,,,,,,,,,,,,, getTitle : function() { return this.title(); } };
2.帮定对象
var options = {
onSuccess : this.handleSuccess.bind(this)
};
//将类BOOK帮定到handleSuccess的函数上，之后就可以在这个函数中this.xxx调用类的其他函数
3.一个利用ajax处理xml的例子
<html> <head> <title> Listing 5-7: The complete Ajax.Request example </title> <mce:script type="text/javascript" src="/js/prototype.js" mce_src="js/prototype.js"></mce:script> </head> <body> <div> <input type="button" value="Load XML" id="load-xml" /> </div> <mce:script type="text/javascript"><!-- function handleSuccess(transport) { var xml = transport.responseXML; var people = $A(xml.documentElement.getElementsByTagName('person')); var tpl = new Template('The age of #{name} is #{age}'); people.each(function(s, idx) { var data = { name : s.getAttribute('name'), age : s.getAttribute('age') }; alert(tpl.evaluate(data)); }); } function handleFailure(transport) { alert('Error: ' + transport.statusText); } function loadXml() { var url = 'listing-5-6.xml'; var options = { method : 'get', onSuccess : handleSuccess, onFailure : handleFailure }; new Ajax.Request(url, options); } Event.observe('load-xml', 'click', loadXml); // --></mce:script> </body> </html>