使用Prototype的一点心得体会（五）

最新推荐文章于 2025-12-19 15:33:32 发布
原创 最新推荐文章于 2025-12-19 15:33:32 发布 · 691 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#prototype #function #callback #class #html #user

本文介绍如何使用Prototype.js库实现创建自定义类、处理哈希对象、操作DOM元素及设置表单观察器等功能。
1. 使用Class对象
<html>
<head>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<script>
    var Person = Class.create();
    Person.prototype =
    {
        initialize: function(name)
        {
            this.name = name;
        },
        showMessage: function()
        {
            alert(this.name);
        }
    }; 
    var p = new Person('yeeku');
    p.showMessage(); 
</script>
</head>
</html>

2.使用Hash对象

<html>
<head>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<script>
    var person = 
    {
        name:'yeeku',
        age:29
    };

    var h = $H(person);
    alert(h.toQueryString());
</script>
</head>
</html>

以及如下的示例

<html>
<head>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<script>
    var person = 
    {
        name:'yeeku',
        age:29
    };
    var teacher = 
    {
        name:'yeeku.H.lee',
        gender:'male'
    };
    var h = $H(person).merge($H(teacher));
    alert(h.toQueryString());
</script>
</head>
</html>

3. 用于操作HTML的元素类 Insertion

<html>
<head>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
</HEAD>
<BODY>
<div id="test" style="border-color:black;border-style:solid;width:200px;">
    <div>CCCCC</div>
    <div>DDDDD</div>    
</div>
<input type="button" value="Insertion.After" onClick="new Insertion.After('test' , '<b>FFFFF</b><br>');"><br>
<input type="button" value="Insertion.Before" onClick="new Insertion.Before('test' , '<b>AAAAA</b><br>');"><br>
<input type="button" value="Insertion.Top" onClick="new Insertion.Top('test' , '<b>BBBBB</b><br>');"><br>
<input type="button" value="Insertion.Bottom" onClick="new Insertion.Bottom('test' , '<b>EEEEE</b><br>');"><br>
</BODY>
</HTML>

4. 常用的监听器

<html>
<head>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
</HEAD>
<BODY>
<FORM id="test" METHOD=POST ACTION="#">
    <input type="text" id="user" name="user"/>
    <input type="text" id="pass" name="pass"/>
    <input type="button" value="test"/>
</FORM>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
    new Form.Observer("test", 1, function()
    {
        alert(this.getValue());
    });
</SCRIPT>

说明：Form.Observer(form, interval, callback) : 当表单内表单域值发生变化时，将于interval(秒)后自动触发callback函数。

或者直接可以监听某一个表单元素。

<html>
<head>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
</HEAD>
<BODY>
<input type="text" id="user" name="user"/>
<input type="button" value="test"/>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
    new Form.Element.Observer("user", 1, function()
    {
        alert(this.getValue());
    });
</SCRIPT>
05 Vue生命周期，总也学不会，所以我详细整理了一下
xingyu_qie的专栏
01-17 8044
相信搞懂了这几个问题，vue的生命周期知识点，可以通过了吧
【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
热门推荐
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
使用Prototype的一点心得体会（四）
【昆山人在上海】
05-22 675
使用Field对象操作表单域 ( API: http://www.prototypejs.org/api/form )示例代码：html>head>script src="prototype-1.6.0.2.js" type="text/javascript">script>head>body>input id="text1" type="text" />br>input id="te
使用Prototype的一点心得体会（二）
【昆山人在上海】
05-22 695
使用Element对象 （ API:  http://www.prototypejs.org/api/element ）1.addClassName方法html>head>script src="prototype-1.6.0.2.js" type="text/javascript">script>script>...function chg()...{        Element.
使用Prototype的一点心得体会（一）
【昆山人在上海】
05-21 644
1.$()如果页面中有2个id相同的HTML元素，函数将返回第一个元素。对于IE6来说，该函数不仅可以获取id属性所对应的元素，还可获取name属性所对应的元素。html>head>script src="prototype-1.6.0.2.js" type="text/javascript">script>script language=JavaScript>function c
使用Prototype的一点心得体会（三）
【昆山人在上海】
05-22 714
使用Enumerable类 （ API: http://www.prototypejs.org/api/enumerable ）1.collect方法html>head>script src="prototype-1.6.0.2.js" type="text/javascript">script>script>...    var a = [20,30,40,50];    alert
使用Prototype的一点心得体会（六）
【昆山人在上海】
05-22 731
关于扩展：1.扩展Arrayhtml>head>script src="prototype-1.6.0.2.js" type="text/javascript">script>script>...    var a = [hello,world];    var b = [wawa,anno];    var c = [a, b];    var d = [c , c
JavaEE心得体会
weixin_46229392的博客
01-27 6514
JavaEE 技术心得体会 1 前端开发 1 简介 前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JS以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网...
封装jQuery的方法和心得体会
wzy199982的博客
11-23 977
封装jQuery的方法（get、click、toggle）和心得体会，官方jQuery.extend()方法的简单了解
JDBC心得体会-->总结
优快云流星追月专属频道--吃的苦中苦，方为人上人！
09-10 1万+
JDBC部分 终端进入mysql： mysql -u root回车 终端进入oracle： telnet 192.168.0.23  然后sqlplus openlab/open123 MySQL常用命令： show databases; use tableName;  show tables; 一、概述JDBC     JDBC从物理结构上说就是Java语言访问数据库的
JavaScript对象，函数，prototype,constructor总结
成长中的小码农
05-19 288
最近看前端代码学习js和react，本来觉得基本的Js语法会就可以了，但是感觉这样学习react是真的吃力还混淆。所以阅读了一些博客写一点参考的学习心得。只记录混淆部分，如果有和我一样迷糊的人可以看看。这篇是一边看博客一边写代码测试的，感觉准确度应该没啥问题 学习资料： http://reng99.cc/2018/04/05/prototype-object-chain-md/ https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/
javascript学习总结
08-04
函数参数在JavaScript中具有“默认值”的特性，如果没有提供实参，可以使用默认参数来设定值。例如： ```javascript function greet(name = 'World') { console.log('Hello, ' + name); } greet(); // 输出 "Hello...
vue+elementUI实战之网易云音乐--半月总结！！！
xhyxxhwns的博客
05-16 3512
vue+elementUI实战之网易云音乐--半月总结！！！模仿网易云音乐pc端项目搭建基本项目引入项目中使用的东西------axios，element-Ul遇到的问题 模仿网易云音乐pc端 先写写心得体会吧，经过半个月，我实现了网易云音乐的一些功能。最开始的时候，我记得我几乎写点东西，就会去看我学vue的笔记，（笔记真的好有用，什么忘记了，就拿出来看看，不懂的再百度）。我觉得这半个月最难的就是，音乐播放部分了，终于昨天晚上，我成功的实现了音乐自动播放下一首，点击按钮切换上一首，下一首，我真的好开心，哈哈
Spring MVC学习总结（3）——Spring3 MVC详解
科技D人生
12-15 2767
DispatcherServlet 前置控制器   使用Spring MVC,配置DispatcherServlet是第一步。DispatcherServlet是一个Servlet,所以可以配置多个DispatcherServlet。DispatcherServlet是前置控制器，配置在web.xml文件中的。拦截匹配的请求，Servlet拦截匹配规则要自已定义，把拦截下来的请求，依据某某规
前端原生能力速查笔记（HTML + 浏览器 API 实战篇）
奋斗的小前端
12-16 120
本文总结了前端开发中无需框架即可实现的高频实用功能：1）a标签下载文件的核心原理与注意事项；2）前端打印功能的基础实现与进阶优化；3）HTML原生实用属性；4）浏览器内置JavaScript API（剪贴板、全屏、本地存储等）。这些原生功能可提升开发效率，建议作为日常开发速查和基础能力沉淀。
前端革命：自定义元素如何让HTML元素“活“起来，重构你的开发体验！
JakeMa1024的博客
12-15 1157
自定义元素是Web Components技术的核心组成部分，它允许开发者定义全新的HTML元素，扩展浏览器中可用的元素集。这不是简单的"新标签"，而是前端开发思维的彻底转变：将UI组件视为可复用的、封装良好的独立单元。想象一下，你可以创建一个元素，它自带完整的样式、交互逻辑和数据绑定，而无需依赖任何框架。当你的团队需要展示商品信息时，只需写<product-card name="无线耳机" price="129.99" image="headphones.jpg">
Html中常用的块标签!!!12.16日
2501_90845920的博客
12-16 961
用dl创建列表，dt表示下定义（小标题），dd表示对定义内容补充默认样式：dl上下有16像素的外边距dd左侧有40像素的外边距1、给列表增加type属性，可以修改项目符号（了解一下），但一般我们不用列表的默认的项目符号ol type属性值 可选：1(默认值)，A,a,I,i下图所示为有序列表中默认项目符号改为Aul type属性值 可选：disc，默认值，实心的圆点square，实心的方块circle，空心的圆下图所示为无序列表中默认项目符号改为空心的圆。
使用Java将HTML内容转换为Word文档
最新发布
liuhm的博客
12-19 717
通过上述方法，我们可以快速实现HTML到Word的转换功能。虽然方案相对简单，但在许多实际项目中都能发挥重要作用。对于更复杂的需求，可以考虑集成专业的文档处理库如Flying Saucer或Docx4j。希望这个小技巧能帮助到正在做类似功能的开发者朋友们！博客地址代码下载下面的markdown-to-word。
HTML 核心基础与常用标签全解析
HANhylyxy的博客
12-15 5830
这是一份 HTML 入门指南，涵盖了 HTML 的基础概念、文件结构、常用标签（标题、段落、图片、超链接等）、表格、表单控件及布局容器等核心内容，通过示例代码与功能说明，帮助快速掌握 HTML 页面的搭建逻辑与常用交互元素的使用方法，是前端初学者了解网页结构的实用参考。
使用Prototype技术开发进度条示例教程
本部分将详细解读如何使用Prototype框架实现进度条组件。Prototype是一个轻量级的JavaScript框架，它提供了一套丰富的工具库，使得在浏览器端使用JavaScript进行开发变得更加便捷和高效。进度条是一个常见的用户界面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值