Prototype的简单介绍

平民王子

浏览: 286281 次
性别:
来自: 深圳

最近访客更多访客>>

sunchi1997

q123q

rainman_zjd

anitaihua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Prototype

prototype JavaScript HTML XHTML Cache

Prototype只是一个JavaScript库，可到http://www.prototypejs.org/download站点去下载最新版本，点击连接“目标另存为”就可以了。使用它很简单copy到项目中，然后：

<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>

第一个简单的Prototype程序：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Prototype 的相关属性</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
  </head>
  
  <body>
  	
    <script type="text/javascript">
    	//document.writeIn("Prototype库的版本为：" + Prototype.Version + "<br />");
    	document.write("Prototype库的版本为：" + Prototype.Version + "<br>");
    	//document.writeIn("Prototype是否支持Firefox：" + Prototype.Browser.Gecko + "<br>");
    	document.write("Prototype是否支持Firefox：" + Prototype.Browser.Gecko + "<br>");
    	//alert(Prototype.Version);
    	//alert(Prototype.Browser.Gecko);
 		//K方法返回本身
 		alert(Prototype.K("测试"));
 		document.write(Prototype.K("测试") + "<br>");
    </script>
  </body>
</html>

使用$()函数：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Prototype测试一</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>

	<script type="text/javascript">
		function clickHandler(){
			$("out").innerHTML = "使用Prototype.js"
		}
	</script>

  </head>
  
  <body>
    <input type="button" value="测试" onclick="clickHandler();" />
	<div id="out"></div>
  </body>
</html>

<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>

	<script type="text/javascript">
		function clickHandler(){
			$("out").innerHTML += $("a2").value
		}
	</script>

  </head>
  
  <body>
  	<input type="text" id="a1" name="a2" value="第一个文本框" /><br>
  	<input type="text" id="a2" name="a1" value="第二个文本框" /><br>
    <input type="button" value="显示" onclick="clickHandler();" />
	<div id="out" style="font-weight: bold;"></div>
  </body>

<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>

	<script type="text/javascript">
		function clickHandler(){
			var a = $("a1","a2");
			$("out").innerHTML += a[0].value + " " + a[1].value + " " ;
		}
	</script>

  </head>
  
  <body>
  	<input type="text" id="a1" name="a1" value="第一个文本框" /><br>
  	<input type="text" id="a2" name="a2" value="第二个文本框" /><br>
    <input type="button" value="显示" onclick="clickHandler();" />
	<div id="out" style="font-weight: bold;"></div>
  </body>

使用$A()函数：

<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="menuBar">
			<div>
				文件
			</div>
			<div>
				编辑
			</div>
			<div>
				查看
			</div>
		</div>
	
	<script type="text/javascript">
		//获得id为menuBar的元素，再获取该元素的所有div子元素，返回一个HTMLCollection
		var fileList = $("menuBar").getElementsByTagName("div");
		document.write(fileList + "<br>");
		//将fileList转换为一个数组
		var fileArray = $A(fileList);
		//依次输出数组的每个元素
		for ( var i = 0; i < fileArray.length; i++) {
			document.write(fileArray[i].innerHTML + "<br>");
		}
	</script>
	</body>

<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript">
		</script>
		<script type="text/javascript">
			var str = "crazyit";
			//使用$A将一个字符串转换成字符数组
			var strArray = $A(str);
			//依次输出每个字符数组中的每个字符
			for ( var i = 0; i < strArray.length; i++) {
				document.writeln(strArray[i] + "<br />");
			}
		</script>
	</body>

使用$F()函数：

<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			//事件处理函数，用于输出三个表单控件的值
			function aaa() {
				$("show").innerHTML = $F("text1") + "<br />" + $F("text2") + "<br />"
						+ $F("text3");
			}
		</script>
		
	</head>
	<body>
		<form id="form1" name="form1" action="#">
			<input type="text" id="text1" name="text1" />
		</form>
		
		<form id="form2" name="form2" action="#">
			<input type="text" id="text2" name="text2" />
			<br />
			<textarea cols="40" rows="2" id="text3"></textarea>
		</form>
		
		<div id="show"></div>
		
		<input type="button" value="显示" onclick="aaa();" />
		
	</body>

使用$H()函数：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>$H()函数</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			// 将navigator对象里的属性名和属性值转换成对应的Hash对象
			var nav = $H(navigator);
			// 输出该Hash对象
			alert(nav.inspect());
		</script>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>$H()函数</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			//将空对象变成Hash对象
			var nav = $H( {});
			//输出该Hash对象
			alert(nav.inspect());
		</script>
	</body>
</html>

使用$R()函数：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>$H()函数</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			//构造一个ObjectRange对象
			var range = $R(10, 20, false);
			//遍历ObjectRange对象的每个元素
			range.each(function(value, index) {
				document.write(value + "<br>");
			});
		</script>
	</body>
</html>

使用Try.these函数：

<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			function createXMLHttpRequest(){
				var request;
				if(window.XMLHttpRequest){
					//DOM 2 浏览器
					request = new XMLHttpRequest();
				}else if(window.ActiveXObject){
					try{
						request = new ActiveXObject("Msxm12.XMLHTTP");
					}catch(e){
						try{
							request = new ActiveXObject("Microsoft.XMLHTTP");
						}catch(e){
						}
					}
				}
				return request;
			}
			var req  = Try.these(createXMLHttpRequest);
			alert(req);
			//使用Try.these创建XMLHttpRequest对象
			//依次调用多个函数，直到遇到第一个函数的有返回值时，
			//该返回值将作为Try.these()函数的返回值
			var objXMLHttp = Try.these(function() {
				return new XMLHttpRequest();
			}, function() {
				return new ActiveXObject('MSXML2.XMLHTTP.5.0');
			}, function() {
				return new ActiveXObject('MSXML2.XMLHTTP.4.0');
			}, function() {
				return new ActiveXObject('MSXML2.XMLHTTP.3.0');
			}, function() {
				return new ActiveXObject('MSXML2.XMLHTTP');
			}, function() {
				return new ActiveXObject('Microsoft.XMLHTTP');
			});
			alert(objXMLHttp);
		</script>
	</body>

<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			//定义一个aa函数
			function aa() {
				return "hello";
			}
			//Try.these()的参数只是函数的引用，而不是调用函数
			var b = Try.these(aa);
			alert(b);
		</script>
	</body>

分享到：

Prototype支持JSON | 一个简单的Ajax程序XMLHttpRequest

2010-11-20 22:19
浏览 1360
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Prototype的简单介绍

第一个简单的Prototype程序：

使用$()函数：

使用$A()函数：

使用$F()函数：

使用$H()函数：

使用$R()函数：

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Prototype的简单介绍

第一个简单的Prototype程序：

使用$()函数：

使用$A()函数：

使用$F()函数：

使用$H()函数：

使用$R()函数：

评论

发表评论

相关推荐

Prototype的Ajax支持使用Ajax.PeriodicalUpdater类

Prototype的Ajax支持使用Ajax.Updater类

Prototype的Ajax支持使用Ajax.Responders对象

Prototype的Ajax支持使用Form.request方法

Prototype的Ajax支持使用Ajax.Request类

Prototype扩展Array，document，String，Function，Number

Prototype中两个常用的监听器

Prototype中使用Class

Prototype中使用Event和Template

Prototype使用Form操作表单和使用Hash对象

Prototype中使用ObjectRange和Form.Element操作表单

Prototype中使用Enumerable

Prototype中使用Element对象

Prototype支持JSON

最近访客更多访客>>