1. $() 方法是在 DOM 中使用过于频繁的 document.getElementById() 方法的一个便利的简写,就像这个 DOM 方法一样,这个方法返回参数传入的 id
的那个元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script type="text/javascript" language="javascript">
function test1() {
var div = $("div1"); // 单个参数
alert(div.innerHTML);
}
function test2() {
var divs = $("div1", "div2"); // 多个参数
for (var i = 0; i < divs.length; i++) {
alert(divs[i].innerHTML);
}
}
</script>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<input type="button" value="click1" onclick="test1()" />
<input type="button" value="click2" onclick="test2()" />
</body>
2. $$
<html>
<head>
<title>Test $$</title>
<script src="prototype.js"></script>
<script>
function test$$(){
/**//*
in case CSS is not your forte, the expression below says
'find all the INPUT elements that are inside
elements with class=field that are inside a DIV
with id equal to loginForm.'
*/
var f = $$('div#loginForm .field input');
var s = '';
for(var i=0; i<f.length; i++){
s += f[i].value + '/';
}
alert(s); // shows: "joedoe1/secret/"
//now passing more than one expression
f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
s = '';
for(var i=0; i<f.length; i++){
s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
}
alert(s); //shows: "joedoe1/secret/User name:/Password:/"
var temp=$$('div#loginForm .field');
alert(temp.innerHTML);
}
function testtoColorPart()
{var num=new Number(50);
alert(num.toColorPart());
}
</script>
<div id='loginForm'>
<div class='field'>
<span class='fieldName'>User name:</span>
<input type='text' id='txtName' value='joedoe1'/>
</div>
<div class='field'>
<span class='fieldName'>Password:</span>
<input type='password' id='txtPass' value='secret' />
</div>
<input type='submit' value='login' />
</div>
<input type=button value='test $$()' onclick='test$$();' />
<input type=button value='testtoColorPart' onclick='testtoColorPart();' />
</body>
</html>
3. $F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值,如文本框或下拉框。这个方法可以传入元素的id或者元素自己。
<html>
<head>
<title>$F</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script type="text/javascript" language="javascript">
function test()
{
alert($F("userName"));
}
</script>
</head>
<body>
<form>
<input type="text" id="userName" value="test username">
<input type="button" value="click" onclick="test()">
</form>
</html>
4. $A()方法把接收到的参数转换成一个Array对象。 这个方法加上对Array类的扩展,可以很容易的转换或者复制任意的列举列表到Array对象,
一个被推荐使用的用法就是转换DOM的NodeLists到一个普通的数组里,可以被更广泛高效的使用,看下面的例子。
<html>
<head>
<title>$A</title>
<script language="javascript" src="prototype.js"
type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function showOptions() {
var someNodeList = $("lstFramework").getElementsByTagName("option");
var nodes = $A(someNodeList);
var info = [];
nodes.each (function(node){
info.push(node.value + ": " + node.innerHTML);
});
alert(info.join("\r\n"));
}
</script>
</head>
<body>
<form>
<select id="lstFramework" size="10">
<option value="1">Prototype</option>
<option value="2">Script.aculo.us</option>
<option value="3">Dojo</option>
<option value="4">YUI</option>
</select>
<input onclick="showOptions();" type="button" value="Show the options">
</form>
</body>
</html>
5.$H()方法把对像转化成可枚举的貌似联合数组Hash对象。
<html>
<head>
<title>$H</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script>
function test()
{
// 创建一个对象
var obj = {
key1: 1,
key2: 2,
key3: 3
};
// 将其转换为Hash对象
var hash = $H(obj);
alert(hash.toQueryString());
}
</script>
</head>
<body>
<form>
<input type="button" value="click" onclick="test()" />
</form>
</body>
</html>
<转自:http://www.cnblogs.com/me-sa/archive/2007/04/24/724660.html >
分享到:
相关推荐
prototype开发笔记prototype开发笔记prototype开发笔记prototype开发笔记prototype开发笔记prototype开发笔记prototype开发笔记
Prototype开发笔记.doc,很全面...
Prototype开发笔记 js框架 prototype 好的js框架
Prototype学习笔记(一)(二)的源代码
包括prototype和prototype的开发笔记!
NULL 博文链接:https://dodomail.iteye.com/blog/251704
prototype.js开发笔记.doc prototype.js开发笔记.doc prototype.js开发笔记.doc prototype.js开发笔记.doc
万一你没有使用过大名鼎鼎的prototype.js,那么让我来告诉你,prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,而且兼容标准的类库,能帮助你轻松建立有高度互动的web2.0特性的富客户端页面。...
或许你还没有用过它, prototype.js 是一个由Sam Stephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端,... 我想当我学习他的时候记写笔记然后分享给其他人将会很不错。
javascript prototype原型操作笔记.docx
prototype.js开发笔记.pdf
1. Prototype是什么? 3 2. 通用性方法 3 2.1. 使用 $()方法 3 2.2. 使用$F()方法 4 2.3. 使用Try.these()方法 5 3. Ajax 对象 5 3.1. 使用 Ajax.Request类 5 3.2. 使用 Ajax.Updater 类 7 4...
prototype 开发手册(PDF) 博文链接:https://boris-song.iteye.com/blog/234825
博文链接:https://kdisk-sina-com.iteye.com/blog/239793