Prototype的简单介绍

最新推荐文章于 2022-01-08 09:45:13 发布
最新推荐文章于 2022-01-08 09:45:13 发布
阅读量151 收藏
点赞数
分类专栏： Prototype 文章标签： prototype JavaScript HTML XHTML Cache ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libinxuan520/article/details/83767814
版权

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="测试" οnclick="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="显示" οnclick="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="显示" οnclick="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="显示" οnclick="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>
 
平民-王子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
prototype的Ajax介绍
11-22
### Prototype的Ajax介绍 #### 一、Prototype框架与Ajax **Prototype** 是一款JavaScript库，其设计目的是为了简化客户端脚本编程。它提供了一系列高级功能，使得开发人员能够更加高效地构建动态网页应用。其中，*...
Prototype库详解
allenhulove的博客
10-02 885
1.Prototype库只是一个JavaScript函数库，它提供了大量工具方法来简化DOM操作，还扩展了Array、String等内建类，并新增了一些类、对象。Prototype共4000多行，主要功能分为三个部分： 简单、易用的工具函数 扩展了一些原有类，增加了一些自定义的对象 简化了Ajax开发的相关类 引入一个JavaScript函数库 &lt;script type="text...
JS基本语法-JavaScript中的常用对象4-navigator对象，提供浏览器及操作系统等信息
记录和分享程序人生的点点滴滴
01-08 5148
navigator对象，用于提供当前浏览器及操作系统等信息，这些信息都放在navigator的各个属性中。navigator对象也是window对象的成员。
Prototype速查
热爱生活
12-16 511
Prototype  可获取浏览器的一些属性     Version        Prototype.Version     Browser         Gecko    [bool]        Prototype.Browser.Gecko         IE    [bool]        Prototype.Browser.IE         MobileSafar
Prototype 验证浏览器！
YYYY-MM-DD
07-18 479
var Prototype = ...{   Browser: ...{    IE:     !!(window.attachEvent && !window.opera),    Opera:  !!window.opera,    WebKit: navigator.userAgent.indexOf(AppleWebKit/) > -1,    Gecko:  navigator.
prototype介绍
03-01
### prototype介绍：深入理解JavaScript的面向对象编程与Prototype.js库 #### 1. JavaScript中的`prototype`机制 在JavaScript的世界里，`prototype`扮演着一个至关重要的角色，尤其是在面向对象编程(OOP)的语境下...
JavaScript使用prototype定义对象类型
10-31
使用 prototype 来定义对象类型非常简单，只需要创建一个对象，并将其 prototype 属性指向一个对象，该对象包含了该对象类型的所有方法和属性。例如，我们可以创建一个 Person 对象类型，如下所示： ``` var Person...
简单理解js的prototype属性及使用
10-20
主要介绍了简单理解js的prototype属性及使用 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ajax 同步_055 JAVA-AJAX
weixin_39732491的博客
11-27 190
AJAX出现背景（问题）： 目前浏览器向服务器发起请求的方式有 form 标签，超链接，还有脚本语言(jsjquery)中的window.location.href 方式和表单提交函数。但是不管哪种提交方式，浏览器都会将接收到的响应内容覆盖在请求网页中显示，但是怎么在保留请求网页内容的基础显示新的内容呢？解决方法： 使用AJAX（改良用户体验，实现局部刷新）与...
Prototype1.5.1源代码解读分析
月黑杀人夜，风高放火时！
05-14 1144
本来是打算写一本AJAX的教程的，可又怕自己没有那么多时间和能力来完成这个艰巨的任务。所以决定陆陆续续的把自己学ajax的学习心得记下来，以飨广大的热爱自考中国的会员。同时也是给MIANMIAN的版块加点人气（有点点假公济私哦）。这篇文章主要内容是对被广泛使用prototype框架的源代码进行解读。  Prototype是为应用javascript编程开发的一个通用帮助库（general
Prototype1.5.1源代码解读分析-2
weixin_34025151的博客
11-22 94
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd> 语法 这段代码用到的语法： 什么是对象？对象是一种复合数据类型，他们将多个数据值集中在一个单元中，而且允许使用名字来存取这些值。解释对象的另一种方式是，对象是一个无序的属性集合，...
Prototype.js
lniwn
02-15 1789
/* Prototype JavaScript framework, version 1.7 * (c) 2005-2010 Sam Stephenson * * Prototype is freely distributable under the terms of an MIT-style license. * For details, see the Prototype we
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
Python性能优化：掌握性能分析工具的实战指南
07-23
Python是一种广泛使用的高级编程语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键词）。这使得Python被认为是一种易于学习的语言，同时具备强大的功能，适合初学者和经验丰富的程序员。 Python的主要特点包括： 1. **易于学习**：Python有相对较少的关键字，结构简单，和一个明确定义的语法。 2. **易于阅读**：Python代码定义的清晰度使得它像可执行伪代码。 3. **易于维护**：Python的成功在于它的源代码是相当容易维护的。 4. **广泛的标准库**：Python的标凑库很庞大，包含用于互联网通信、网络通信、数据压缩、加密、系统管理等的模块。 5. **跨平台**：Python可以在多种操作系统上运行，包括但不限于Windows、Mac OS X、Linux等。 6. **解释型语言**：Python是一种解释型语言，这意味着开发过程中没有编译步骤。 7. **动态类型系统**：Python不会在编写
"深入了解prototype.js：介绍、使用方法和开发笔记
Prototype是一个JavaScript框架，它为JavaScript提供了一些强大的功能和工具，使得开发和编写JavaScript代码更加简单和高效。在本文中，我们将介绍Prototype的基本概念和使用方法，以及它的一些常见的功能和扩展。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值