1/$()方法
(1)$()=document.getElementById()
(2)$()可以返回一个带有所有要求的元素的一个 Array 对象
$(‘myDiv’,’myOtherDiv’);
(3)这个函数能传入用string表示的对象ID，也可以传入对象本身
2/$F()函数
(1)返回任何表单输入控件的值,这个方法也能用元素id或元素本身做为参数
<script>
function test3()
{
alert( $F(‘userName’) );
}
</script>
<input type=”text” id=”userName” value=”Joe Doe”>
<input type=”button” value=Test3 onclick=”test3();”>
3/$A()函数
(1)把接收到的单个的参数转换成一个Array对象,把任何的可枚举列表转换成或拷贝到一个Array对象
<script>
function showOptions(){
var someNodeList = $(‘lstEmployees’).getElementsByTagName(‘option’);
var nodes = $A(someNodeList);
nodes.each(function(node){
alert(node.nodeName + ‘: ‘ + node.innerHTML);
});
}
</script>
<select id=”lstEmployees” size=”10″ >
<option value=”5″>Buchanan, Steven</option>
<option value=”8″>Callahan, Laura</option>
<option value=”1″>Davolio, Nancy</option>
</select>
<input type=”button” value=”Show the options” onclick=”showOptions();” >
4/$H()函数
把一些对象转换成一个可枚举的和联合数组类似的Hash对象
<script>
function testHash()
{
//let’s create the object
var a = {
first: 10,
second: 20,
third: 30
};
//now transform it into a hash
var h = $H(a);
alert(h.toQueryString()); //displays: first=10&second=20&third=30
}
</script>
5/$R()函数
<script>
function demoDollar_R(){
var range = $R(10, 20, false);
range.each(function(value, index){
alert(value);
});
}
</script>
<input type=”button” value=”Sample Count” onclick=”demoDollar_R();” >
6/Try.these()函数
Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易， 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。
在下面的例子中， xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。 使用Try.these()方法我们可以得到正常工作的那个方法的返回值。
<script>
function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;)
);
}
</script>
使用Ajax.Request类
<script>
function searchSales()
{
var empID = $F(‘lstEmployees’);
var y = $F(‘lstYears’);
var url = ‘http://yoursever/app/get_sales’;
var pars = ’empID=’ + empID + ‘&year=’ + y;
var myAjax = new Ajax.Request(
url,
{
method: ‘get’,
parameters: pars,
onComplete: showResponse //Loading, Loaded, Interactive, 或 Complete,onSuccess,onFailure
});
}
function showResponse(originalRequest)
{
//put returned XML in the textarea
$(‘result’).value = originalRequest.responseText;
}
</script>
<select id=”lstEmployees” size=”10″ onchange=”searchSales()”>
<option value=”5″>Buchanan, Steven</option>
<option value=”8″>Callahan, Laura</option>
<option value=”1″>Davolio, Nancy</option>
</select>
<select id=”lstYears” size=”3″ onchange=”searchSales()”>
<option selected=”selected” value=”1996″>1996</option>
<option value=”1997″>1997</option>
<option value=”1998″>1998</option>
</select>
<textarea id=result cols=60 rows=10 ></textarea>
Ajax.Responders对象
假设你想要在一个AJAX调用正在运行时，显示一些提示效果，像一个不断转动的图标之类的，你可以使用两个全局事件Handler来做到，其中一个在第一个调用开始时显示图标，另一个在最后一个调用完成时隐藏图标。看下面的例子。
<script>
var myGlobalHandlers = {
onCreate: function(){
Element.show(‘systemWorking’);
},
onComplete: function() {
if(Ajax.activeRequestCount == 0){
Element.hide(‘systemWorking’);
}
}
};
Ajax.Responders.register(myGlobalHandlers);
</script>
<div id=’systemWorking’><img src=’spinner.gif’>Loading…</div>
使用Ajax.Updater类(返回的信息已经是HTML了)
<script>
function getHTML()
{
var url = ‘http://yourserver/app/getSomeHTML’;
var pars = ‘someParameter=ABC’;
var myAjax = new Ajax.Updater(
‘placeholder’,
url,
{
method: ‘get’,
parameters: pars
});
}
</script>
<input type=button value=GetHtml onclick=”getHTML()”>
<div id=”placeholder”></div>
////////////////////////////
<script>
function getHTML()
{
var url = ‘http://yourserver/app/getSomeHTML’;
var pars = ‘someParameter=ABC’;
var myAjax = new Ajax.Updater(
{success: ‘placeholder’},
url,
{
method: ‘get’,
parameters: pars,
onFailure: reportError
});
}
function reportError(request)
{
alert(‘Sorry. There was an error.’);
}
</script>
<input type=button value=GetHtml onclick=”getHTML()”>
<div id=”placeholder”></div>
服务器逻辑是连同HTML 标记返回JavaScript 代码
加入evalScripts: true属性
枚举
function showList(){
var simpsons = [‘Homer’, ‘Marge’, ‘Lisa’, ‘Bart’, ‘Meg’];
simpsons.each( function(familyMember){
alert(familyMember);
});
}
<script>
function findEmployeeById(emp_id){
var listBox = $(‘lstEmployees’)
var options = listBox.getElementsByTagName(‘option’);
options = $A(options);
var opt = options.find( function(employee){
return (employee.value == emp_id);
});
alert(opt.innerHTML); //displays the employee name
}
</script>
<select id=”lstEmployees” size=”10″ >
<option value=”5″>Buchanan, Steven</option>
<option value=”8″>Callahan, Laura</option>
<option value=”1″>Davolio, Nancy</option>
</select>
<input type=”button” value=”Find Laura” onclick=”findEmployeeById(8);” >
现在我们再下一城，看看如何过滤一个Array中的元素，从每个元素中得到我们想要的成员。
<script>
function showLocalLinks(paragraph){
paragraph = $(paragraph);
var links = $A(paragraph.getElementsByTagName(‘a’));
//find links that do not start with ‘http’
var localLinks = links.findAll( function(link){
var start = link.href.substring(0,4);
return start !=’http’;
});
//now the link texts
var texts = localLinks.pluck(‘innerHTML’);
//get them in a single string
var result = texts.inspect();
alert(result);
}
</script>
<p id=”someText”>
This <a href=”http://othersite.com/page.html”>text</a> has
a <a href=”#localAnchor”>lot</a> of
<a href=”#otherAnchor”>links</a>. Some are
<a href=”http://wherever.com/page.html”>external</a>
and some are <a href=”#someAnchor”>local</a>
</p>
<input type=button value=”Find Local Links” onclick=”showLocalLinks(‘someText’)”>
prototype.js参考