prototype1.5 初体验第1/2页_prototype

一直没有没有时间看prototype,现在好了,已经更新到了1.5 pre1,呵呵,强大的功能不得不学习啊,这个是提升自己JS能力的又一个捷径.

1. Prototype是什么?
或许你还没有用过它, prototype.js 是一个由Sam Stephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端, 高交互性WEB应用程序的重担。轻松加入Web 2.0特性。

如果你最近体验了这个程序包,你很可能会发现文档并不是它的强项之一。像所有在我之前的开发者一样,我只能一头扎进prototype.js的源代码中并且试验其中的每一个部分。 我想当我学习他的时候记写笔记然后分享给其他人将会很不错。

我也一起提供了这个包的对象,类,方法和扩展的 非官方参考 。

2. 通用性方法
这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量的重复编码和惯用法。

从Prototype1.5.x版本开始,你可以更方便的如下面代码一样操作DOM对象了: 

复制代码 代码如下:

var ele = $("myelement");
ele.hide(); //隐藏DOM对象对比从前的版本var ele = $("myelement");
Element.hide(ele); //隐藏DOM对象

这样的改变有什么益处呢? 我觉得一来是更面向对象了,二来就是便于将来IDE里的代码提示。 

2.1. 使用 $()方法
$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写,就像这个DOM方法一样,这个方法返回参数传入的id的那个元素。

比起DOM中的方法,这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。下面的例子会向你描述这些。

复制代码 代码如下:

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.3.1.js"></script>

<script>
    function test1()
    {
        var d = $('myDiv');
        alert(d.innerHTML);
    }

    function test2()
    {
        var divs = $('myDiv','myOtherDiv');
        for(i=0; i<divs.length; i++)
        {
            alert(divs[i].innerHTML);
        }
    }
</script>
</HEAD>

<BODY>
    <div id="myDiv">
        <p>This is a paragraph</p>
    </div>
    <div id="myOtherDiv">
        <p>This is another paragraph</p>
    </div>

    <input type="button" value=Test1 onclick="test1();"><br>
    <input type="button" value=Test2 onclick="test2();"><br>
</BODY>
</HTML>

这个方法的另一个好处就是你可以传入id字符串或者元素对象自己,这使得在创建可以传入任何形式参数的方法的时候, 它变得非常有用。

2.2. 使用$F()方法
$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值,如文本框或下拉框。 这个方法可以传入元素的id或者元素自己。

复制代码 代码如下:

<script>
    function test3()
    {
        alert(  $F('userName')  );
    }
</script>
<input type="text" id="userName" value="Joe Doe"><br> 
<input type="button" value=Test3 onclick="test3();"><br>

2.3. 使用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>

当前1/2页 12下一页阅读全文

时间: 2024-09-25 10:03:29

prototype1.5 初体验第1/2页_prototype的相关文章

Fireworks MX 之初体验2-1

在编者的苦口婆心,盛情邀请下,风云设计 的两位高手 风筝 和 心动为谁 终于答应,为广大朋友奉献对 Fireworks MX 的亲密接触后带来的初体验,为喜爱 Fireworks 的 fans 们作出贡献,特此鸣谢! 优化菜单面面观 上节我们对FWMX的最新.最酷(好像我很能落伍一样,总用老掉牙的词汇~)的各种新面板做了一个简单的介绍和了解,不知道各位是不是已经拿到了FWMX的测试版本开始体验了,相信体验的感觉总的来说应该是美妙的.本节我们来一起看看FWMX的各级菜单及其相关命令.同样,我们仍然

Docker 容器初体验

Docker 容器初体验 在本文中,我们将迈出使用Docker的第一步,学习第一个Docker容器.本章还会介绍如何与Docker进行交互的基本知识. 1 确保Docker已经就绪 首先,我们会查看Docker是否能正常工作,然后学习基本的Docker的工作流:创建并管理容器.我们将浏览容器的典型生命周期:从创建.管理到停止,直到最终删除. 第一步,查看docker程序是否存在,功能是否正常,如代码清单3-1所示. 代码清单3-1 查看docker程序是否正常工作 $ sudo docker i

Java多态初体验

Java多态初体验本文面向Java初学者,我们在教材上经常会看到Java是多态的,可是一般的教科书只停留在理论上,很少有实际操作.现在把多态个概念用代码简单描述一下,由于本人水平有限,所以难免有不足之处.      首先我们有这样几个类,电脑,个人电脑,笔记本电脑. java 代码 class Computer{                  public void turnOn(){         }     }    现在有了电脑这个类,那么个人PC,笔记本都是继承他. java 代码

XenApp / XenDesktop 7.6 初体验一 安装, 配置站点和序列号服务

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://beanxyz.blog.51cto.com/5570417/1579558 最新的Xen Desktop/Xenapp 已经到7.6的版本了.豆子自己搭建了个实验环境练练手. 虚拟平台我使用的是ESXi 5.5,OS都是windows 2012R2,之前我已经设置了Vcenter,DC和SQL 服务器.可以说准备工作基本上都好了.登录 Citrix.com,下载试用版的ISO镜

初体验JBossESB 及 部署使用 Hello World QuickStart

http://yulimin.javaeye.com/blog/52980 关键字:   ESB SOA     初体验JBossESB 及 部署使用 Hello World QuickStart1.下载 JBoss 4.0.5 GA 及 JBossESB 4.0 CR2 并解压,如果是src包的话,进入JBossESB目录运行ant install %JBoss_HOME% : C:/OpenSource/JBoss/4.0 %JBossESB_HOME% : C:/OpenSource/JB

zephir-(2)安装和初体验

zephir-安装和初体验 前言 先在这里感谢各位zephir开源技术提供者 zephir主要是解决了PHP开发人员尝试编写和编译PHP拓展所能执行的代码的语言.这是一个支持动态/静态类型的语言,熟悉PHP开发人员可以很好的进行开发.zephir这个名字的主要来源是(Zend Engine/PHP/Intermediate),今天首先介绍zephir的安装,接着会对zephir进行一些语法上面的介绍,希望大家喜欢! 注:笔者水平有限,说的不正确的地方希望大家多多指正,一同交流技术 附上: 喵了个

新手RoR十分钟初体验Step By Step

http://yulimin.javaeye.com/blog/35929 关键字: rails   Ruby Rails RoR     新手RoR十分钟初体验Step By Step 声明一下,这是个新手启动的体验文章,高手不要看了...:) 1.安装RubyWindows用户去 http://rubyforge.org/ 的 http://rubyforge.org/projects/rubyinstaller/ 下载 One-Click Installer - Windows 安装即可,

php+jquery+ajax初体验

这个一个简单的php与ajax案例 仅供新手学习 附上效果图 jquery ajax代码  $(function(){   $("#send").click(function(){    var cont = $("input").serialize();    $.ajax({     url:'aseoe.php',     type:'post',     dataType:'json',     data:cont,     success:function

Fireworks MX 之初体验1-2

在编者的苦口婆心,盛情邀请下,风云设计 的两位高手 风筝 和 心动为谁 终于答应,为广大朋友奉献对 Fireworks MX 的亲密接触后带来的初体验,为喜爱 Fireworks 的 fans 们作出贡献,特此鸣谢! Optimize of FW4 Optimize of FWMX 通过比较,我们发现FWMX中Optimize面板比起FW4中的内容要丰富多了,包括弹出菜单选项,其实通过观察,我们可以清楚的看到,现在的Optimize面板其实是将FW4中的Optimize面板和Color面板整合到