您的位置:新葡亰496net > 服务器网络 > 新葡亰496net:4手册_prototype_脚本之家,js使用详明

新葡亰496net:4手册_prototype_脚本之家,js使用详明

发布时间:2019-11-24 05:32编辑:服务器网络浏览(199)

    prototype.js开拓者手册 对应版本1.4.0 original article by sp Sergio Pereira

          Prototype.js 是Ruby On Rails的副成品, Javascript编写者的风度翩翩把小军刀,提供了Ruby风格的简写语法和时间效益的函数,更尊敬的是一心跨浏览器,让我们舒舒服性格很顽强在荆棘满途或巨大压力面前不屈写出又轻巧又不用愁心包容的的JS代码,SpringSide 已经离不开它了。[

    last update: March 30th 2006

    一:简介

    Prototype在线手册]()

    中文版:THIN

    中文版:THIN

    /** 
     * 定义叁个大局对象, 属性 Version 在发表的时候会轮换为当下版本号 
     */ 
    var Prototype = { 
      Version: '@@VERSION@@' 

    终极更新:二零零七-3-31

    末尾更新:二〇〇七-3-31

    /** 
     * 创造黄金年代种等级次序,注意其质量 create 是三个艺术,重临贰个构造函数。 
     * 平时采用如下  
     *     var X = Class.create();  重回一个品种,相仿于 java 的三个Class实例。 
     * 要运用 X 类型,需继续用 new X()来获得叁个实例,犹如 java 的 Class.newInstance()方法。 
     * 
     * 再次回到的构造函数会进行名称为 initialize 的点子, initialize 是 Ruby 对象的构造器方法名字。 
     * 那时候initialize方法还还未有定义,其后的代码中创制新类型时会创建相应的同名方法。 
     * 
     * 倘若必要求从java上去驾驭。你能够领略为用Class.create()创设一个卫冕java.lang.Class类的类。当然java不允许那样做,因为Class类是final的 
     * 
     */ 
    var Class = { 
      create: function() { 
        return function() { 
          this.initialize.apply(this, arguments); 
        } 
      } 

    看来三个很好的东西在本国未有被许五人使用起来,实在是不爽,所以花了超大武功把那些手册翻译成普通话,由于那篇作品非常长,所以,翻译的职业量十分的大并且有个别地点土耳其(Turkey卡塔 尔(英语:State of Qatar)语版也从没说知道,虽得查看源代码,幸并非坚韧不拔做完了,大家鼓舞下啊!^o^prototype.js是二个特别高雅的javascript底子类库,对javascript做了汪洋的强盛,并且很好的支撑Ajax,国外有多个依赖此类库达成的法力库,也做得很棒。prototype.js不仅仅是叁个有非常的大实用价值的js库,况兼有极高的求学价值,所以作者生硬提出B/S开辟人士和对JS开采感兴趣的意中人去浏览部分它的源代码,此中有繁多的珠玑,你相对会感觉读它的源代码是一种享受,当然要读得懂,呵呵。网络也可能有人写过1.3版的源码解读,大家能够找来看看。但是1.4版做了十分的大的恢弘,所以希望有朋友写出1.4版的源码解读。几点表达: 有朋友说prototye已经有人翻译过了,呵呵,是没错,表明您从前关怀过它,然而原本翻译的是1.3版的文书档案,1.4版有这些第朝气蓬勃的扩展,并且pre_1.5版将来也出去,不地退换相当的小。 有朋友说有用多未有翻译地来的,拜托,只是各种艺术的参数表明未有翻,这个申明非常多都以如何项目,还是有空再弄啊,先将就一下,对不起了,翻到那些程序已经很累人了,终究犹如此长。 做成CHM文书档案的事也只可以Sorry,因为本身从未这些小时,也未曾做过CHM,笔者感觉制版一下看网页和CHM是恐怕吧。

    prototype.js 是什么?

    /** 
     * 创造叁个指标,从变量名来思考,本意恐怕是概念一个抽象类,现在创办新目的都 extend 它。 
     * 但从其后代码的应用来看, Abstract 越来越多是为了保全命名空间清晰的虚构。 
     * 也便是说,大家得以给 Abstract 那些目的实例增加新的对象定义。 
     * 
     * 从java去掌握,就是动态给二个对象创立内部类。 
     */ 
    var Abstract = new Object(); 

    prototype.js是什么?

    只要你未有选择过知名的prototype.js,那么让自身来告诉你,prototype.js是由SamStephenson写的壹个javascript类库。那一个寻思美妙,何况相当规范的类库,能扶持您轻轻便松创设有可观相互影响的web2.0 特性的富客商端页面。

    /** 
     * 获取参数对象的保有属性和办法,有一点象多种继承。但是这种持续是动态得到的。 
     * 如: 
     *     var a = new ObjectA(), b = new ObjectB(); 
     *     var c = a.extend(b); 
     * 那个时候 c 对象同期持有 a 和 b 对象的属性和办法。不过与多种世襲分歧的是,c instanceof ObjectB 将再次来到false。 
     */ 
    Object.prototype.extend = function(object) { 
      for (property in object) { 
        this[新葡亰496net,property] = object[property]; 
      } 
      return this; 

    假使您未曾行使过有名的prototype.js,那么让本人来告诉你,prototype.js是由SamStephenson写的二个javascript类库。这一个思考玄妙,而且格外规范的类库,能扶植您轻轻易松建构有莫斯中国科学技术大学学相互作用的web2.0特征的富顾客端页面。

    只要你如今尝试利用它,你差不离掌握到文书档案实际不是小编的七个钢铁。和在自己原先使用这几个类库的不在少数开垦者相符,一初阶,笔者只得贰头扎进阅读 prototype.js 的源代码和尝试它的作用中。作者想,在本身上学完它未来,把笔者学到的东西分享给大家是件不错的事。

    /** 
     * 那几个措施很风趣,它包裹叁个javascript函数对象,重返二个新函数对象,新函数对象的核心和原对象相符,可是bind()方法参数将被充任当前指标的靶子。 
     * 也正是说新函数中的 this 引用被退换为参数提供的对象。 
     * 比如: 
     *     <input type="text" id="aaa" value="aaa"> 
     *     <input type="text" id="bbb" value="bbb"> 
     *     新葡亰496net 1新葡亰496net 2新葡亰496net 3新葡亰496net 4新葡亰496net 5.. 
     *     <script> 
     *         var aaa = document.getElementById("aaa"); 
     *         var bbb = document.getElementById("bbb"); 
     *         aaa.showValue = function() {alert(this.value);} 
     *         aaa.showValue2 = aaa.showValue.bind(bbb); 
     *     </script> 
     *  那么,调用aaa.showValue 将返回"aaa", 但调用aaa.showValue2 将返回"bbb"。 
     * 
     * apply 是ie5.5后才面世的新办法(Netscape好像很已经帮忙了)。 
     * 该方法更加多的素材参照他事他说加以调查MSDN  
     * 还会有一个 call 方法,应用起来和 apply 相似。能够黄金时代并研商下。 
     */ 
    Function.prototype.bind = function(object) { 
      var method = this; 
      return function() { 
        method.apply(object, arguments); 
      } 

    假如您前段时间尝试接受它,你大约了然到文书档案而不是小编的四个顽强。和在笔者原先使用这些类库的大队人马开拓者同样,意气风发开头,小编必须要一头扎进阅读prototype.js的源代码和尝试它的效果与利益中。笔者想,在自己读书完它以后,把自己学到的事物分享给大家是件不错的事。

    与此同不常候,在本文中,作者也将提供叁个有关这几个类库提供的objects,classes,functions,extensions这对东东的违规参照他事他说加以考察

    /** 
     * 和bind相近,然而那一个办法平日用做html控件对象的事件管理。所以要传送event对象 
     * 注意当时,用到了 Function.call。它与 Function.apply 的例外好像独有是对参数方式的概念。 
     * 就好像 java 四个过载的不二秘籍。 
     */ 
    Function.prototype.bindAsEventListener = function(object) { 
      var method = this; 
      return function(event) { 
        method.call(object, event || window.event); 
      } 

    还要,在本文中,作者也将提供一个关于这些类库提供的objects,classes,functions,extensions那对东东的越轨参谋

    在读书这几个文书档案时,领会 Ruby 的开辟者将会静心到 Ruby 的生龙活虎对内建类和本类库扩张完成之间充裕雷同。

    /** 
     * 将整数方式奥迪Q3GB颜色值调换为HEX方式 
     */ 
    Number.prototype.toColorPart = function() { 
      var digits = this.toString(16); 
      if (this < 16) return '0'   digits; 
      return digits; 

    在读书这几个文书档案时,了然Ruby的开荒者将会专一到Ruby的生机勃勃对内建类和本类库扩张完成之间丰盛相符。

    有关文章

    /** 
     * 规范 Ruby 风格的函数,将参数中的方法每种调用,重临第贰个成功执行的办法的回来值 
     */ 
    var Try = { 
      these: function() { 
        var returnValue; 
        
        for (var i = 0; i < arguments.length; i ) { 
          var lambda = arguments[i]; 
          try { 
            returnValue = lambda(); 
            break; 
          } catch (e) {} 
        } 
        
        return returnValue; 
      } 

    相关小说

    Advanced JavaScript guide.

    新葡亰496net:4手册_prototype_脚本之家,js使用详明。/*--------------------------------------------------------------------------*/ 

    Advanced JavaScript guide.

    二:一些实用的函数

    /** 
     * 叁个规划精妙的准期试行器 
     * 首先由 Class.create() 创造多少个 PeriodicalExecuter 类型, 
     * 然后用对象直接量的语法格局设置原型。 
     * 
     * 要求特意表达的是 rgisterCallback 方法,它调用上边定义的函数原型方法bind, 并传递温馨为参数。 
     * 之所以如此做,是因为 setTimeout 暗中同意总以 window 对象为眼下目的,也正是说,即使 registerCallback 方法定义如下的话: 
     *     registerCallback: function() { 
     *         setTimeout(this.onTimerEvent, this.frequency * 1000); 
     *     } 
     * 那么,this.onTimeout伊芙nt 方法试行倒闭,因为它不能够访谈 this.currentlyExecuting 属性。 
     * 而采纳了bind现在,该措施展技术能科学的找到this,也便是PeriodicalExecuter的当前实例。 
     */ 
    var PeriodicalExecuter = Class.create(); 
    PeriodicalExecuter.prototype = { 
      initialize: function(callback, frequency) { 
        this.callback = callback; 
        this.frequency = frequency; 
        this.currentlyExecuting = false; 
        
        this.registerCallback(); 
      }, 
      
      registerCallback: function() { 
        setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000); 
      }, 
      
      onTimerEvent: function() { 
        if (!this.currentlyExecuting) { 
          try { 
            this.currentlyExecuting = true; 
            this.callback(); 
          } finally { 
            this.currentlyExecuting = false; 
          } 
        } 
        
        this.registerCallback(); 
      } 

    一些实用的函数

    其生机勃勃类库带有超多预约义的靶子和实用函数,那么些东东的指标显而易见是把您从部分再度的打字中解放出来 。

    /*--------------------------------------------------------------------------*/ 

    本条类库带有比很多预订义的靶子和实用函数,这么些东东的目的众目昭彰是把您从局部重新的打字中解放出来 。

    2.1 使用$()方法

    /** 
     * 那几个函数就 Ruby 了。小编以为它的成效重视有三个 
     * 1.  光景是 document.getElementById(id) 的最简化调用。 
     * 举个例子:$("aaa") 将回来上 aaa 对象 
     * 2.  赢得目的数组 
     * 比方: $("aaa","bbb") 再次回到多个回顾id为"aaa"和"bbb"四个input控件对象的数组。 
     */ 
    function $() { 
      var elements = new Array(); 
      
      for (var i = 0; i < arguments.length; i ) { 
        var element = arguments[i]; 
        if (typeof element == 'string') 
          element = document.getElementById(element); 

    运用$ 方法是在DOM中行使过度频仍的 document.getElementById() 方法的叁个方便的简写,就像是这么些DOM方法豆蔻梢头致,这一个情势重临参数字传送入的id的极其成分。

    $() 方法是在 DOM 中使用过度频仍的 document.getElementById() 方法的一个惠及的简写,就好像那么些 DOM 方法同样,那么些法子重回参数字传送入的 id 的可怜成分。比起 DOM 中的方法,这么些更胜一筹。你能够流传两个 id 作为参数然后 $() 重临多少个包罗全数须求的要素的二个 Array 对象。

        if (arguments.length == 1) 
          return element; 
          
        elements.push(element); 
      } 
      
      return elements; 

    比起DOM中的方法,那么些更胜一筹。你能够流传五个id作为参数然后 $() 再次来到叁个包括所有必要的因素的贰个 Array 对象。

    <HTML> 

     

     Test Page function test1;alert;}function test2(){var divs = $;for(i=0; i&lt;divs.length; i  ){alert;}}This is a paragraphThis is another paragraph
    

    <HEAD> 

    /** 
     * 定义 Ajax 对象, 静态方法 getTransport 方法重回三个 XMLHttp 对象 
     */ 
    var Ajax = { 
      getTransport: function() { 
        return Try.these( 
          function() {return new ActiveXObject('Msxml2.XMLHTTP')}, 
          function() {return new ActiveXObject('Microsoft.XMLHTTP')}, 
          function() {return new XMLHttpRequest()} 
        ) || false; 
      }, 
      
      emptyFunction: function() {} 

    别的四个收益是,这些函数能传遍用string表示的对象ID,也能够流传对象自己,那样,在创制此外能传两系列型的参数的函数时分外实用。

    <TITLE> Test Page </TITLE> 

    /** 
     * 作者以为此时的Ajax对象起到命名空间的意义。 
     * Ajax.Base 注解为一个底蕴对象类型 
     * 注意 Ajax.Base 并不曾选拔 Class.create() 的情势来创设,我想是因为小编并不期望 Ajax.Base 被库使用者实例化。 
     * 作者在其余对象类型的扬言中,将会延续于它。 
     * 就恍如 java 中的私有抽象类 
     */ 
    AJAX.Base = function() {}; 
    AJAX.Base.prototype = { 
      /** 
       * extend (见prototype.js中的定义) 的用法真是令人耳不熟悉龙活虎新 
       * options 首先设置暗中认可属性,然后再 extend 参数对象,那么参数对象中也许有同名的属性,那么就覆盖暗许属性值。 
       * 想一想如若自身写那样的兑现,应该接近如下: 
         setOptions: function(options) { 
          this.options.methed = options.methed? options.methed : 'post'; 
          新葡亰496net 6新葡亰496net 7新葡亰496net 8
         } 
         笔者想相当多时候,java 节制了 js 的新意。 
       */ 
      setOptions: function(options) { 
        this.options = { 
          method:       'post', 
          asynchronous: true, 
          parameters:   '' 
        }.extend(options || {}); 
      } 

    行使$F函数是另二个大收迎接的“快速键”,它能用来重临任何表单输入控件的值,比方text box,drop-down list。那一个法子也能用成分id或因素自己做为参数。

    <script src="prototype1.4.js"></script> 

    /** 
     * Ajax.Request 封装 XmlHttp 
     */ 
    AJAX.Request = Class.create(); 

    function test3(){alert;}
    Buchanan, StevenCallahan, LauraDavolio, Nancy
    

    <script>  

    /** 
     * 定义各样事件(状态), 参照他事他说加以考察 
     */ 
    AJAX.Request.Events = 
      ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; 

    行使$H函数把有个别对象调换来一个可枚举的和协助举行数组相近的Hash对象。

    function test1(){      

    /** 
     * 
     */ 
    AJAX.Request.prototype = (new Ajax.Base()).extend({ 
      initialize: function(url, options) { 
        this.transport = Ajax.getTransport(); 
        this.setOptions(options); 
      
        try { 
          if (this.options.method == 'get') 
            url  = '?'   this.options.parameters   '&_='; 
        
         /** 
          * 此处好像强制行使了异步情势,并非依照 this.options.asynchronous 的值 
          */ 
          this.transport.open(this.options.method, url, true); 
          
         /** 
          * 这里提供了 XmlHttp 传输进度中各样步骤的回调函数 
          */ 
          if (this.options.asynchronous) { 
            this.transport.onreadystatechange = this.onStateChange.bind(this); 
            setTimeout((function() {this.respondToReadyState(1)}).bind(this), 10); 
          } 
                  
          this.transport.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
          this.transport.setRequestHeader('X-Prototype-Version', Prototype.Version); 

    function testHash(){//let's create the objectvar a = {first: 10,second: 20,third: 30};//now transform it into a hashvar h = $H;alert; //displays: first=10&amp;second=20&amp;third=30}
    

        var d=$('myDiv');      

          if (this.options.method == 'post') { 
            this.transport.setRequestHeader('Connection', 'close'); 
            this.transport.setRequestHeader('Content-type', 
              'application/x-www-form-urlencoded'); 
          } 
          
          this.transport.send(this.options.method == 'post' ? 
            this.options.parameters   '&_=' : null); 
                          
        } catch (e) { 
        }    
      }, 
          
      onStateChange: function() { 
        var readyState = this.transport.readyState; 
       /** 
        * 如果不是 Loading 状态,就调用回调函数 
         */ 
        if (readyState != 1) 
          this.respondToReadyState(this.transport.readyState); 
      }, 
      
      /** 
       * 回调函数定义在 this.options 属性中,比方: 
          var option = { 
             onLoaded : function(req) {新葡亰496net 9}; 
             新葡亰496net 10新葡亰496net 11 
          } 
          new Ajax.Request(url, option); 
       */ 
      respondToReadyState: function(readyState) { 
        var event = Ajax.Request.Events[readyState]; 
        (this.options['on'   event] || Ajax.emptyFunction)(this.transport); 
      } 
    }); 

    使用$R是new ObjectRange(lowBound,upperBound,excludeBounds)的缩写。

        alert(d.innerHTML); 

    /** 
     * Ajax.Updater 用于绑定贰个html成分与 XmlHttp调用的再次来到值。相近与 buffalo 的 bind。 
     * 假设 options 中有 insertion(from dom.js) 对象的话, insertion 能提供更加的多的插入调控。 
     */ 
    AJAX.Updater = Class.create(); 
    AJAX.Updater.prototype = (new Ajax.Base()).extend({ 
      initialize: function(container, url, options) { 
        this.container = $(container); 
        this.setOptions(options); 
      
        if (this.options.asynchronous) { 
          this.onComplete = this.options.onComplete; 
          this.options.onComplete = this.updateContent.bind(this); 
        } 
        
        this.request = new Ajax.Request(url, this.options); 
        
        if (!this.options.asynchronous) 
          this.updateContent(); 
      }, 
      
      updateContent: function() { 
        if (this.options.insertion) { 
          new this.options.insertion(this.container, 
            this.request.transport.responseText); 
        } else { 
          this.container.innerHTML = this.request.transport.responseText; 
        } 

    跳到ObjectRange 类文书档案能够看出一个关于此类的全部描述. 那个时候,大家依旧先来看二个例证以显示这一个缩写能取代哪些措施呢。此外相关的有的文化能够在Enumerable 对象文书档案中找到。

         

        if (this.onComplete) { 
          setTimeout((function() {this.onComplete(this.request)}).bind(this), 10); 
        } 
      } 
    }); 

    function demoDollar_R(){var range = $R;range.each(function{alert;}
    

         

     

    使用Try.these()函数

    /** 
     * 针对 页面成分对象 的工具类,提供部分简易静态方法 
     */ 
    var Field = { 
      /** 
       * 扫除参数援引对象的值 
       */ 
      clear: function() { 
        for (var i = 0; i < arguments.length; i ) 
          $(arguments[i]).value = ''; 
      }, 

    Try.these() 方法使得完结当您想调用不一样的办法直到此中的四个打响不荒谬的这种必要变得特别轻松, 他把意气风发多元的诀窍作为参数何况按顺序的叁个贰个的实行那几个办法直到此中的一个中标实施,重回成功实践的要命方式的再次来到值。

    function test2(){ 

      /** 
       * 使参数援用对象获得大旨 
       */ 
      focus: function(element) { 
        $(element).focus(); 
      }, 
      
      /** 
       * 决断参数征引对象值是或不是为空,如为空,再次回到false, 反之true 
       */ 
      present: function() { 
        for (var i = 0; i < arguments.length; i ) 
          if ($(arguments[i]).value == '') return false; 
        return true; 
      }, 
      
      /** 
       * 使选中参数援用对象 
       */ 
      select: function(element) { 
        $(element).select(); 
      }, 

    在底下的事例中, xmlNode.text在局地浏览器中好用,然则xmlNode.textContent在另一些浏览器中健康职业。 使用Try.these()办法大家能够赢得平常事业的不胜方式的再次来到值。

        var divs=$('myDiv','myOtherDiv'); 

      /** 
       * 使参数引用对象处于可编写制定状态 
       */ 
      activate: function(element) { 
        $(element).focus(); 
        $(element).select(); 
      } 

    Ajax对象

        for(i=0;i<divs.length;i ){ 

    /*--------------------------------------------------------------------------*/ 

    地点提到的共通方法十三分好,可是直面它吗,它们不是最高档的那类东西。它们是吧?你很可能本人编辑了那几个以致在你的剧本里面有周围功效的办法。不过那么些艺术只是冰山朝气蓬勃角。

            alert(divs[i].innerHTML);          

    /** 
     * 表单工具类 
     */ 
    var Form = { 
      /** 
       * 将表单成分体系化后的值组合成 QueryString 的情势 
       */ 
      serialize: function(form) { 
        var elements = Form.getElements($(form)); 
        var queryComponents = new Array(); 
        
        for (var i = 0; i < elements.length; i ) { 
          var queryComponent = Form.Element.serialize(elements[i]); 
          if (queryComponent) 
            queryComponents.push(queryComponent); 
        } 
        
        return queryComponents.join('&'); 
      }, 
      
      /** 
       * 获得表单的有所因素对象 
       */ 
      getElements: function(form) { 
        form = $(form); 
        var elements = new Array(); 

    自己很断定你对prototype.js感兴趣的原故很大概是出于它的AJAX技术。所以让大家讲解当您要求做到AJAX逻辑的时候,那一个包怎么着让它更便于。

        } 

        for (tagName in Form.Element.Serializers) { 
          var tagElements = form.getElementsByTagName(tagName); 
          for (var j = 0; j < tagElements.length; j ) 
            elements.push(tagElements[j]); 
        } 
        return elements; 
      }, 
      
      /** 
       * 将点名表单的因素置于不可用状态 
       */ 
      disable: function(form) { 
        var elements = Form.getElements(form); 
        for (var i = 0; i < elements.length; i ) { 
          var element = elements[i]; 
          element.blur(); 
          element.disable = 'true'; 
        } 
      }, 

    Ajax 对象是叁个预约义对象,由那几个包创造,为了封装和简化编写AJAX 功效涉及的奸诈的代码。 那几个目的包含豆蔻梢头类别的封装AJAX逻辑的类。大家来看看里面多少个类。 使用Ajax.Request类

    }</script> 

      /** 
       * 使表单的第一个非 hidden 类型而且处于可用状态的要素得到大旨 
       */ 
      focusFirstElement: function(form) { 
        form = $(form); 
        var elements = Form.getElements(form); 
        for (var i = 0; i < elements.length; i ) { 
          var element = elements[i]; 
          if (element.type != 'hidden' && !element.disabled) { 
            Field.activate(element); 
            break; 
          } 
        } 
      }, 

    万风流倜傥你不行使其余的帮扶程序包,你很恐怕编写了总体大气的代码来创立XMLHttpRequest对象何况异步的追踪它的历程, 然后深入分析出响应 然后处理它。当您没有必要帮忙多于生机勃勃种档案的次序的浏览器时你会感到特其他托福。

    </HEAD>  

      /* 
       * 重新初始化表单 
       */ 
      reset: function(form) { 
        $(form).reset(); 
      } 

    为了扶植 AJAX 功效。那个包定义了 Ajax.Request类。

    <BODY>  

    /** 
     * 表单成分工具类 
     */ 
    Form.Element = { 
      /** 
       * 重回表单成分的值先连串化再开展 U奥迪Q7L 编码后的值 
       */ 
      serialize: function(element) { 
        element = $(element); 
        var method = element.tagName.toLowerCase(); 
        var parameter = Form.Element.Serializers[method](element); 
        
        if (parameter) 
          return encodeURIComponent(parameter[0])   '='   
            encodeURIComponent(parameter[1]);                    
      }, 
      
      /** 
       *  重临表单成分种类化后的值 
       */ 
      getValue: function(element) { 
        element = $(element); 
        var method = element.tagName.toLowerCase(); 
        var parameter = Form.Element.Serializers[method](element); 
        
        if (parameter) 
          return parameter[1]; 
      } 

    设若你有三个应用程序能够由此url 与服务器通讯。它回到上面这样的XML 响应。

    <div id="myDiv">  

    /** 
     * prototype 的所谓体系化其实正是将表单的名字和值组合成二个数组 
     */ 
    Form.Element.Serializers = { 
      input: function(element) { 
        switch (element.type.toLowerCase()) { 
          case 'hidden': 
          case 'password': 
          case 'text': 
            return Form.Element.Serializers.textarea(element); 
          case 'checkbox':  
          case 'radio': 
            return Form.Element.Serializers.inputSelector(element); 
        } 
        return false; 
      }, 
      
      inputSelector: function(element) { 
        if (element.checked) 
          return [element.name, element.value]; 
      }, 

    12341998-01$8,115.3612341998-02$11,147.51
    

    <p>This is a paragraph</p>  

      textarea: function(element) { 
        return [element.name, element.value]; 
      }, 

    Ajax.Request指标和服务器通讯况且获得这段XML是特别轻松的。上边包车型地铁事例演示了它是何等做到的。

    </div>  

      /** 
       * 看样子,也不协助多选框(select-multiple) 
       */ 
      select: function(element) { 
        var index = element.selectedIndex; 
        var value = element.options[index].value || element.options[index].text; 
        return [element.name, (index >= 0) ? value : '']; 
      } 

    function searchSales(){var empID = $F;var y = $F;var url = 'http://yoursever/app/get_sales';var pars = 'empID='   empID   '&amp;year='   y;var myAjax = new Ajax.Request(url,{method: 'get',parameters: pars,onComplete: showResponse});}function showResponse{//put returned XML in the textarea$.value = originalRequest.responseText;}Buchanan, StevenCallahan, LauraDavolio, Nancy199619971998
    

    <div id="myOtherDiv">  

    /*--------------------------------------------------------------------------*/ 

    你注意到传播 Ajax.Request构造方法的第一个指标了呢? 参数{method: 'get', parameters: pars, onComplete: showResponse} 表示二个无名氏对象的切实地工作写法。他代表你传入的那几个目的有三个名称为 method 值为 'get'的属性,另二个属性名字为 parameters 包蕴HTTP央浼的查询字符串,和三个onComplete 属性/方法满含函数showResponse

    <p>This is another paragraph</p>  

    /** 
     * Form.Element.getValue 大概会临时利用,所以做了一个飞速引用 
     */ 
    var $F = Form.Element.getValue; 

    还会有部分此外的习性能够在此个指标里面定义和装置,如 asynchronous,可以为truefalse 来决定AJAX对服务器的调用是不是是异步的(暗中认可值是 true)。

    </div>  

    /*--------------------------------------------------------------------------*/ 

    以此参数定义AJAX调用的选项。在大家的例子中,在第贰个参数通过HTTP GET命令央浼那个url,传入了变量 pars含有的询问字符串, Ajax.Request对象在它做到选取响应的时候将调用showResponse 方法。

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

    /** 
     * Abstract.TimedObserver 也绝非用 Class.create() 来创建,和Ajax.Base 意图应该亦然 
     * Abstract.提姆edObserver 看名就能猜到其意义,是沿用Observer设计方式来追踪钦定表单成分, 
     * 当表单元素的值产生变化的时候,就履行回调函数 
     * 
     * 小编想 Observer 与注册onchange事件相同,分歧点在于 onchange 事件是在要素失去大旨的时候才激起。 
     * 相近的与 onpropertychange 事件也相同,不过它只关注表单元素的值的转换,而且提供timeout的主宰。 
     * 
     * 除此而外,Observer 的益处大致就在与更面向对象,别的能够动态的转移回调函数,这就比注册事件要灵活一些。 
     * Observer 应该能够胜任动态数据校验,可能多个事关下拉选项列表的连动等等 
     * 
     */ 
    Abstract.TimedObserver = function() {} 

    大概你驾驭, XMLHttpRequest在HTTP央求时期将告诉进度景况。那么些速度被描述为多少个分歧品级:Loading, Loaded, Interactive, 或 Complete。你能够使 Ajax.Request 对象在其余品级调用自定义方法 ,Complete 是最常用的三个。想调用自定义的办法只供给轻便的在伸手的选项参数中的名称叫 onXXXXX 属性/方法中提供自定义的情势对象。 有如我们例子中的 onComplete 。你传入的秘诀将会被用三个参数调用,这么些参数是 XMLHttpRequest 对象本身。你将会用那些目的去获取重返的数据同偶然间可能检查满含有在此次调用中的HTTP结果代码的 status 属性。

    </BODY>  

    /** 
     * 这么些企划和 PeriodicalExecuter 雷同,bind 方法是实现的大旨 
     */ 
    Abstract.TimedObserver.prototype = { 
      initialize: function(element, frequency, callback) { 
        this.frequency = frequency; 
        this.element   = $(element); 
        this.callback  = callback; 
        
        this.lastValue = this.getValue(); 
        this.registerCallback(); 
      }, 
      
      registerCallback: function() { 
        setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000); 
      }, 
      
      onTimerEvent: function() { 
        var value = this.getValue(); 
        if (this.lastValue != value) { 
          this.callback(this.element, value); 
          this.lastValue = value; 
        } 
        
        this.registerCallback(); 
      } 

    再有其余四个有效的选项用来管理结果。大家得以在onSuccess 选项处传入七个方法,当AJAX正确的实行完后调用, 相反的,也足以在onFailure筛选处传来贰个办法,当服务器端现身错误时调用。正如onXXXXX 选项传入的诀要肖似,那五个在被调用的时候也不胫而走一个带有AJAX伏乞的XMLHttpRequest对象。

    </HTML>

    /** 
     * Form.Element.Observer 和 Form.Observer 其实是千篇风华正茂律的 
     * 注意 Form.Observer 并非用来追踪整个表单的,作者想大约只是为了减少书写(那是Ruby的三个设计条件) 
     */ 
    Form.Element.Observer = Class.create(); 
    Form.Element.Observer.prototype = (new Abstract.TimedObserver()).extend({ 
      getValue: function() { 
        return Form.Element.getValue(this.element); 
      } 
    }); 

    咱俩的例子未有用别样有意思的方式管理那个 XML响应, 大家只是把这段XML放进了三个文本域里面。对那个响应的二个天下无双的利用很恐怕正是找到此中的想要的音信,然后更新页面中的某个因素, 大概以至大概做一点XSLT调换而在页面中生出局地HTML。

    别的二个实惠是,这么些函数能传出用 string 表示的靶子 ID,也能够流传对象自己,那样,在确立其余能传两种类型的参数的函数时特别有效。

    Form.Observer = Class.create(); 
    Form.Observer.prototype = (new Abstract.TimedObserver()).extend({ 
      getValue: function() { 
        return Form.serialize(this.element); 
      } 
    }); 

    在1.4.0本子中,后生可畏种新的风浪回传外轮理货公司被引进。假使您有风流罗曼蒂克段代码总是要为二个出奇的风云实行,而不管是哪些AJAX调用引发它,那么您能够动用新的Ajax.Responders对象。

    2..2使用$F()函数

     

    若是你想要在三个AJAX调用正在运维时,呈现一些提拔效果,像一个不停转动的Logo之类的,你能够行使八个全局事件Handler来做到,当中二个在首先个调用伊始时显得Logo,另八个在最终二个调用实现时隐蔽Logo。看上边包车型客车例子。

    $F()函数是另三个大收迎接的“快速键”,它能用来再次回到任何表单输入控件的值,举例text box,drop-down list。那一个形式也能用成分 id 或因素本人做为参数。

    /** 
     * 依照 class attribute 的名字获得指标数组,帮衬 multiple class 
     * 
     */ 
    document.getElementsByClassName = function(className) { 
      var children = document.getElementsByTagName('*') || document.all; 
      var elements = new Array(); 
      
      for (var i = 0; i < children.length; i ) { 
        var child = children[i]; 
        var classNames = child.className.split(' '); 
        for (var j = 0; j < classNames.length; j ) { 
          if (classNames[j] == className) { 
            elements.push(child); 
            break; 
          } 
        } 
      } 
      
      return elements; 

    var myGlobalHandlers = {onCreate: function(){Element.show;},onComplete: function() {if(Ajax.activeRequestCount == 0){Element.hide;}}};Ajax.Responders.register;Loading...
    

    <script> 

    /*--------------------------------------------------------------------------*/ 

    更完全的解释,请参谋 Ajax.Request 参谋 和 Ajax选项仿效。

    function test3(){ 

    /** 
     * Element 就象一个 java 的工具类,主要用来 蒙蔽/显示/销除 对象,以致得到对象的简约属性。 
     * 
     */ 
    var Element = { 
      toggle: function() { 
        for (var i = 0; i < arguments.length; i ) { 
          var element = $(arguments[i]); 
          element.style.display = 
            (element.style.display == 'none' ? '' : 'none'); 
        } 
      }, 

    使用Ajax.Updater类

        alert($F('userName'));     

      hide: function() { 
        for (var i = 0; i < arguments.length; i ) { 
          var element = $(arguments[i]); 
          element.style.display = 'none'; 
        } 
      }, 

    即使你的服务器的另后生可畏端再次回到的音信已是HTML了,那么使用那几个程序包中 Ajax.Updater 类将使您的活着变得越发得轻便。用它你只需提供哪二个成分须要被AJAX诉求再次回到的HTML填充就足以了,例子比自个儿写表明的更明亮。

      show: function() { 
        for (var i = 0; i < arguments.length; i ) { 
          var element = $(arguments[i]); 
          element.style.display = ''; 
        } 
      }, 

    function getHTML(){var url = 'http://yourserver/app/getSomeHTML';var pars = 'someParameter=ABC';var myAjax = new Ajax.Updater('placeholder',url,{method: 'get',parameters: pars});}
    

    </script> 

      remove: function(element) { 
        element = $(element); 
        element.parentNode.removeChild(element); 
      }, 
        
      getHeight: function(element) { 
        element = $(element); 
        return element.offsetHeight; 
      } 

    你能够看看,这段代码比前面包车型客车事例特别简明,不满含 onComplete 方法,可是在构造方法中传出了叁个因素id。 大家来稍微改正一下代码来说述怎样在客商端管理服务器段错误成为或者。

    <inputtype="text"id="userName"value="Joe Doe"><br> 

    /** 
     * 为 Element.toggle 做了三个符号连接,大约是包容性的思谋 
     */ 
    var Toggle = new Object(); 
    Toggle.display = Element.toggle; 

    大家将加盟更加的多的选项, 钦命管理错误的一个主意。这几个是用 onFailure 选项来成功的。大家也内定了三个 placeholder 独有在中标恳求之后才会被填充。为了做到这几个目标咱们改过了第贰个参数从二个简短的因素id到多个暗含四个属性的靶子, successfailure 在底下的例子中绝非动用failure质量,而独自在 onFailure 处使用了 reportError 方法。

    <inputtype="button"value=Test3onclick="test3();"><br>

    /*--------------------------------------------------------------------------*/ 

    假定您的服务器逻辑是会同HTML 标志重临JavaScript 代码, Ajax.Updater指标可以进行那段JavaScript代码。为了使那几个目的相比较响应该为JavaScript,你只需在终极参数的靶子构造方法中轻便插手evalScripts: true品质。但是值得一提醒的是,像这一个选项名evalScripts暗暗提示的,那一个脚本会被执行,不过它们不会被到场到Page的台本中。“有怎样界别?”,也许您会那样问。大家假如央求地址重回的东东像这么:

    2.3 使用$A()函数

    /** 
     * 动态插入内容的贯彻,MS的Jscript完成中指标有三个 insertAdjacentHTML 方法() 
     * 这里终于一个对象形式的包装。 
     */ 
    Abstract.Insertion = function(adjacency) { 
      this.adjacency = adjacency; 

    function sayHi;}
    

    $A()函数能把它选拔到的单个的参数转变来一个 Array 对象。

    Abstract.Insertion.prototype = { 
      initialize: function(element, content) { 
        this.element = $(element); 
        this.content = content; 
        
        if (this.adjacency && this.element.insertAdjacentHTML) { 
          this.element.insertAdjacentHTML(this.adjacency, this.content); 
        } else { 
         /** 
          * gecko 不匡助 insertAdjacentHTML 方法,但足以用如下代码替代 
          */ 
          this.range = this.element.ownerDocument.createRange(); 
         /** 
          * 假使定义了 initializeRange 方法,则实行,这里极其与概念了二个浮泛的 initializeRange 方法 
          */ 
          if (this.initializeRange) this.initializeRange(); 
          this.fragment = this.range.createContextualFragment(this.content); 

    举个例子你早前那样尝试过,你掌握那么些本子不会如您所企望的那样行事,原因是这段脚本会被实践,但像上面那样的本子推行并不会成立三个称呼sayHi的函数,它怎么也不做。若是要创立三个函数,大家相应把代码改成上边那一个样子:

    其生机勃勃措施,结合被本类库扩展了的 Array 类,能有益的把其余的可枚举列表调换到或拷贝到多少个 Array 对象。八个引进的用法便是把 DOM Node Lists 转换成二个日常的 Array 对象,进而更有作用的进展遍历,请看上面包车型客车事例。

         /** 
          * insertContent 也是三个庞然大物方法,子类必需兑现 
          */ 
          this.insertContent(); 
        } 
    新葡亰496net:4手册_prototype_脚本之家,js使用详明。  } 

    sayHi = function;};
    

    <script>

    /** 
     * prototype 加深了本身的认知,就是写js 怎样去遵照 Don’t Repeat Yourself (DHavalY) 原则 
     * 上文中 Abstract.Insertion 算是叁个抽象类,定义了名称叫 initializeRange 的多个空洞方法 
     * var Insertion = new Object() 建设构造多个命名空间 
     * Insertion.Before|Top|Bottom|After 就象是三个java中的多个静态内部类,而它们分别世袭于Abstract.Insertion,并得以完成了initializeRange方法。 
     */ 
    var Insertion = new Object(); 

    干什么我们在地点的代码中不接受var关键字来声称这么些变量呢,因为那样做创设出来的函数将只是这几天脚本块的三个某些变量。不写var关键字,创制出来的对象的作用域正是大家所期望的window。

    function showOptions(){ 

    Insertion.Before = Class.create(); 
    Insertion.Before.prototype = (new Abstract.Insertion('beforeBegin')).extend({ 
      initializeRange: function() { 
        this.range.setStartBefore(this.element); 
      }, 
      
      /** 
       * 将内容插入到内定节点的后面, 与钦命节点同级 
       */ 
      insertContent: function() { 
        this.element.parentNode.insertBefore(this.fragment, this.element); 
      } 
    }); 

    更多相关文化,请参见 Ajax.Updater reference 和options reference.

        var someNodeList=$('lstEmployees').getElementsByTagName('option'); 

    Insertion.Top = Class.create(); 
    Insertion.Top.prototype = (new Abstract.Insertion('afterBegin')).extend({ 
      initializeRange: function() { 
        this.range.selectNodeContents(this.element); 
        this.range.collapse(true); 
      }, 
      
      /** 
       * 将内容插入到钦赐节点的率先个子节点前,于是内容变为该节点的首先个子节点 
       */ 
      insertContent: function() {  
        this.element.insertBefore(this.fragment, this.element.firstChild); 
      } 
    }); 

    枚举... 噢!噢!

        var nodes=$A(someNodeList); 

    Insertion.Bottom = Class.create(); 
    Insertion.Bottom.prototype = (new Abstract.Insertion('beforeEnd')).extend({ 
      initializeRange: function() { 
        this.range.selectNodeContents(this.element); 
        this.range.collapse(this.element); 
      }, 
      
      /** 
       * 将内容插入到钦命节点的末段,于是内容变为该节点的末梢壹个子节点 
       */ 
      insertContent: function() { 
        this.element.appendChild(this.fragment); 
      } 
    }); 

    您领悟,我们都以那样来做巡回的,建三个Array,用elements组织它们,再建七个循环结构通过index数字来探问每贰个element,再用那一个element做一些动作。

        nodes.each(function (node){ 

    Insertion.After = Class.create(); 
    Insertion.After.prototype = (new Abstract.Insertion('afterEnd')).extend({ 
      initializeRange: function() { 
        this.range.setStartAfter(this.element); 
      }, 

    当您想到当时,你会发现差不离每趟写循环代码你都会迟早用到二个Array。那么,假设Array对象能够提供更加多的功用给它们的迭代器使用不是很爽吗?确实是那般,事实上相当多的编制程序语言都在它们的Array或此外相同的构造中提供部分如此的效用。

            alert(node.nodeName ': ' node.innerHTML);          

      /** 
       * 将内容插入到内定节点的前面, 与内定节点同级 
       */ 
      insertContent: function() { 
        this.element.parentNode.insertBefore(this.fragment, 
          this.element.nextSibling); 
      } 
    }); 

    今后好了,prototype.js了给大家叁个Enumerable对象,它达成了好多和可迭代数据进行交互作用的妙方。和原始的JS对象比较prototype.js更上意气风发层楼,它对Array 类s扩大了装有枚举要用的函数。

        });     

    Prototype 还会有七个源码文件 effects.js compat.js 就不贴出来了。两个并不经常用,effects.js 看example 做花哨的机能还不易,可是代码中未有太多独特的事物。

    循环, Ruby样式的

    }

    亟待提议的正是
    compat.js 中 Funcation.prototype.apply 的兑现成三个谬误(应该是拼写错误卡塔 尔(英语:State of Qatar), 我分别贴出来,大家相比较一下就掌握了。 

    在正式的javascript中,假诺你想把一个array中的全体elements呈现出来,你能够像上面代码那样写得很好:

    </script> 

    /* 那是包蕴错误的原版本 
    if (!Function.prototype.apply) { 
    // Based on code from  
    Function.prototype.apply = function(object, parameters) { 
    var parameterStrings = new Array(); 
    if (!object) object = window; 
    if (!parameters) parameters = new Array(); 

    function showList(){var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg']; for(i=0;i&lt;simpsons.length;i  ){alert;}}
    

    <selectid="lstEmployees" size="10"> 

    for (var i = 0; i < parameters.length; i ) 
    parameterStrings[i] = 'x['   i   ']'; //Error 1 

    动用大家新的最好的意中人,prototype.js,大家得以把它生写成这么

     <optionvalue="5">Buchanan,Steven</option> 

    object.__apply__ = this; 
    var result = eval('obj.__apply__('   //Error 2 
    parameterStrings[i].join(', ')   ')'); 
    object.__apply__ = null; 

     function showList(){var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg']; simpsons.each( function{alert;}
    

     <optionvalue="8">Callahan,Laura</option> 

    return result; 


    */ 

    您可能会想“非常奇异的秘诀...相对旧的,这种语法太诡异了”。哦,在地点的事例,确实什么也不曾,在此个大致得要死例子中,也从不改变动太多啊,即使如此,请继续读下来。

     <optionvalue="1">Davolio,Nancy</option> 

    if (!Function.prototype.apply) { 
      Function.prototype.apply = function(object, parameters) { 
        var parameterStrings = new Array(); 
        if (!object) object = window; 
        if (!parameters) parameters = new Array(); 

    在继承上面内容前面,你放在心上到丰富被做为叁个参数字传送递给each函数的函数?我们把它通晓成迭代器函数。

    </select> 

        for (var i = 0; i < parameters.length; i ) 
          parameterStrings[i] = 'parameters['   i   ']'; 

    Your arrays on steroids

    <inputtype="button"value="Show the options"onclick="showOptions();"> 

        object.__apply__ = this; 
        var result = eval('object.__apply__('   parameterStrings.join(', ')   ')'); 
        object.__apply__ = null; 

    就好像小编辈地点提到的,把你的Array中的elements当成相通的种类应用相似的质量和函数是很通用的。让大家看看哪些利用大家新的马力刚劲的Arrays的迭代成效吗。

    2.4 使用$H() 函数

        return result; 
      } 

    按照标准找到一个element。

    $H()函数把风流罗曼蒂克部分对象调换到贰个可枚举的和协助实行数组相似的 Hash 对象。

     

    function findEmployeeById{var listBox = $var options = listBox.getElementsByTagName;options = $A;var opt = options.find( &lt;STRONG&gt;function{return (employee.value == emp_id);}&lt;/STRONG&gt;);alert; //displays the employee name}Buchanan, StevenCallahan, LauraDavolio, Nancy
    

    <script> 

    //接下去是本身模仿着编辑的二个 Effect 的三个子类,用来促成闪烁的职能。
    Effect.Blink = Class.create(); 
    Effect.Blink.prototype = { 
      initialize: function(element, frequency) { 
        this.element = $(element); 
        this.frequency = frequency?frequency:1000; 
        this.element.effect_blink = this; 
        this.blink(); 
      }, 

    将来我们再下黄金年代城,看看怎样过滤二个Array中的成分,从每一种成分中获取我们想要的成员。

    function testHash() 

      blink: function() { 
        if (this.timer) clearTimeout(this.timer); 
        try { 
          this.element.style.visibility = this.element.style.visibility == 'hidden'?'visible':'hidden'; 
        } catch (e) {} 
        this.timer = setTimeout(this.blink.bind(this), this.frequency); 
       } 
    }; 

    function showLocalLinks{paragraph = $;var links = $A(paragraph.getElementsByTagName;//find links that do not start with 'http'var localLinks = links.findAll{var start = link.href.substring;return start !='http';});//now the link textsvar texts = localLinks.pluck;//get them in a single stringvar result = texts.inspect;}This text hasa lot oflinks. Some areexternaland some are local
    

    {   

     使用也比较轻巧, 调用 new Effect.Blink(elementId) 就好了。

    地点的代码仅仅是一些微细的执行令人爱上这种语法。请参考Enumerable和Array的具备函数

    //let's create the object  

    通过对 Prototype 源码的研讨,笔者想我对javascript又有了一些新的认知,而最大的认识就是 《Ajax : A New Approach to Web Applications》文章最后小编对布置职员的建议: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.

    prototype.js参考

        var a={ 

    JavaScript类扩展

            first:10,second:20,third:30 

    prototype.js 类库完毕强大效率的风姿浪漫种门路是扩大本来就有的JavaScript 类。

        }; 

    对 Object的扩展

        //now transform it into a hash  

    Method

    var h=$H(a);      

    Kind

        alert(h.toQueryString()); 

    Arguments

        //displays: first=10&second=20&third=30  

    Description

         

    extendstaticdestination: any object, source: any object提供少年老成种通过拷贝全部源以象属性和函数到目标函数完成延续的措施inspectstatictargetObj: any object重返可读性好有关目的对象的文字描述,如若指标实例未有定义四个inspect函数,暗中认可再次回到toString函数的值。

    对Number的扩展

    </script>

    Method

    2.5 使用$R()函数

    Kind

    $R()是 new ObjectRange(lowBound,upperBound,excludeBounds)的缩写。

    Arguments

    跳到ObjectRange 类文书档案能够观察一个关于此类的完全描述. 当时,大家依然先来看一个例子以展现那一个缩写能替代哪些措施吧。其余相关的片段知识能够在Enumerable 对象文书档案中找到。

    Description

    <script> 

    toColorPart()instance重临数字的十五进制表示情势。在把叁个纳瓦拉GB数字调换来HTML表现情势时很有用。succ再次回到下一个数字,那一个主意可用于迭代调用项景中。 timesinstanceiterator: a function object conforming to FunctionCalls the iterator function repeatedly passing the current index in the index argument. 反复调用iterator函数并传递当前index到iterator的index参数。

    function demoDollar_R(){ 

    上面包车型地铁例证用提示框显示0-9。

        var range=$R(10,20,false); 

    function demoTimes(){var n = 10;n.times{alert;/**************************** you could have also used:* ;***************************/}
    

        range.each(function (value,index){ 

    对 Function扩展

            alert(value);         

    Method

        });     

    Kind

    Arguments

    </script>

    Description

    <input type="button" value="Sample Count" onclick="demoDollar_R();" >

    bindinstanceobject: the object that owns the method重返function的实例,那么些实例和源function的结构雷同,然则它已被绑定给了参数中提供的object,正是说,function中的this指针指向参数object。bindAsEventListenerinstanceobject: the object that owns the method用法和地点的bind相仿,差异在于用来绑定事件。

    2.6 使用Try.these()函数

    让大家看看哪些选用这个扩充。

    Try.these() 方法使得完成当你想调用分裂的措施直到此中的三个打响平常的这种供给变得极度轻易, 他把风姿洒脱多级的格局作为参数况兼按梯次的生龙活虎

     Test?//declaring the classvar CheckboxWatcher = Class.create();//defining the rest of the class implementationCheckboxWatcher.prototype = {initialize: function {this.chkBox = $;this.message = message;//assigning our method to the eventthis.chkBox.onclick =this.showMessage.bindAsEventListener;},showMessage: function {alert(this.message   ' ;}};var watcher = new CheckboxWatcher;
    

    个一个的施行这个办法直到当中的二个成功实施,重返成功实施的拾分情势的重临值。

    对String的扩展

    在底下的事例中, xmlNode.text在局地浏览器中好用,但是xmlNode.textContent在另意气风发对浏览器中健康干活。 使用 Try.these()

    Method

    主意我们能够收获健康工作的不得了情势的再次来到值。

    Kind

    <script> 

    Arguments

    function getXmlNodeValue(xmlNode){ 

    Description

        return Try.these(function (){ 

    stripTags再次来到一个把富有的HTML或XML标识都移除的字符串。stripScripts()instance重返八个把持有的script都移除的字符串。escapeHTML重回一个把装有的HTML标志合适的转义掉的字符串。unescapeHTMLescapeHTMLinstance重回一个包括在string中找到的具备

            return xmlNode.text; 

    在prototype.js中定义新的靶子和类

             

    另叁个那几个程序包帮衬你的地点正是提供数不完既帮忙面向对象设计意见又有共通成效的相当多对象。

        },function (){ 

    The PeriodicalExecuter object

            return xmlNode.textContent; 

    其一指标提供一定间隔时间上再度调用叁个主意的逻辑。

            )); 

    Method

             

    Kind

        } 

    Arguments

    </script>

    Description

    三:Ajax对象

    [ctor]constructorcallback: a parameterless function, interval: number of seconds创立那几个目的的实例将会再一次调用给定的方式。

    地点提到的共通方法十三分好,可是直面它呢,它们不是最高端的那类东西。它们是啊?你很恐怕本人编辑了那些以致在您的本子里面有相符成效的艺术。不过那几个点子只是冰山风度翩翩角。

    Property

    自家很分明你对prototype.js感兴趣的缘由很大概是由于它的AJAX能力。所以让大家讲解当您需求做到AJAX逻辑的时候,这么些包怎么着让它更便于。Ajax 对象是多少个预约义对象,由那几个包创设,为了封装和简化编写AJAX 功用涉及的奸诈的代码。 那一个指标包蕴生龙活虎多种的封装AJAX逻辑的类。大家来看看当中多少个类

    Type

    3.1 使用Ajax.Request类

    Description

    万意气风发您不利用此外的扶持程序包,你很可能编写了全数大气的代码来创建XMLHttpRequest对象况且异步的跟踪它的进度, 然后深入分析出响应 然后甩卖它。当你不必要扶持多于生龙活虎种档期的顺序的浏览器时您会认为十分的侥幸。

    callbackFunction()被调用的艺术,该办法不能够流传参数。frequencyNumber以秒为单位的间隔。currentlyExecutingBoolean表示那一个模式是或不是正在实施。

    为了补助 AJAX 效率。那些包定义了 Ajax.Request 类。

    The Prototype object

    若果你有贰个应用程序能够透过url 响应。

    Prototype 没有太重大的效果,只是申明了该程序包的版本 。

    <?xml version="1.0" encoding="utf-8" ?> 

    Property

    <ajax-response> 

    Type

      <response type="object" id="productDetails"> 

    Description

        <monthly-sales> 

    VersionString版本。emptyFunctionFunction()空函数。KFunction三个可是回传参数的函数。ScriptFragmentString识别script的正则式。

          <employee-sales> 

    The Enumerable object

            <employee-id>1234</employee-id> 

    Enumberable对象能够已越来越高贵的章程完成对列表样式的组织进行枚举。

            <year-month>1998-01</year-month> 

    好些个此外的靶子通过扩大自Enumberable对象来赢得那几个使得的接口。

            <sales>$8,115.36</sales> 

    Method

          </employee-sales> 

    Kind

          <employee-sales> 

    Arguments

            <employee-id>1234</employee-id> 

    Description

            <year-month>1998-02</year-month> 

    eachinstanceiterator: a function object conforming to Function把种种element做为第多少个参数,element的index作为第一个参数调用iterator函数。allinstanceiterator: a function object conforming to Function那么些函数会用给出的iterator测量试验整个群集,借使群集中任一成分在iterator函数测量试验中回到false或null,那么那一个函数重临false,不然重返true。若无付诸iterator,那么就能够测量试验全数的因素是还是不是不等于false和null。你能够简轻易单的把它看作是“检查评定每种元素都为非空非负”。 anyinstanceiterator: a function object conforming to Function, optional.那么些函数会用给出的iterator测量检验整个群集,假如集结中任一成分在iterator函数测量试验中回到true,那么这些函数再次来到true,不然重返false。若无交给iterator,那么就能够测量检验全体的要素是否有三个不等于false和null。你能够省略的把它看做是“检查评定成分中是否有非空非负的”。 collectinstanceiterator: a function object conforming to Function调用iterator函数依照集结中每一个成分重临多个结果,然后依据原本集合中的顺序,重返叁个Array。 detectinstanceiterator: a function object conforming to Function集结中各个成分调用一遍Iterator,重返第一个使Iterator再次回到True的要素,尽管最后都并未有为true的调用,那么再次回到null。 entries等于toArrayinstanceiterator: a function object conforming to Function等于 detectinstanceiterator: a function object conforming to Function会集中各样成分调用Iterator,重回一个由全部调用Iterator重临结果万分true的成分结合的数组。和reject()相反。 grepinstancepattern: a RegExp object used to match the elements, iterator: a function object conforming to Function用pattern参数正则表明式测量检验会集中的每一种成分,重回一个分包全体相配正则式的因素的Array,假若给出了Iterator,那一个每种结果还要通过一下Iterator处理。 includeinstanceobj: any object判定集结中包不含有钦赐对象。 inject(initialValue, iterator)instanceinitialValue: any object to be used as the initial value, iterator: a function object conforming to Function(accumulator, value, index)用Iterator联接全数集合中的成分。Iterator在被调用时把上一回迭代的结果做为第八个参数字传送给accumulator。第一遍迭代时,accurmelator等于initialValue,最后回到accumulator的值。 invoke(methodName [, arg1 [, arg2 [...]]])instancemethodName: name of the method that will be called in each element, arg1..argN: arguments that will be passed in the method invocation.集结中的种种成分调用钦点的函数(查看源代码能够窥见内定函数被调用时,this指针被传成当前因素卡塔尔国,并传到给出的参数,重临调用结果组成的Array。 mapinstanceiterator: a function object conforming to Function同collectinstanceiterator: a function object conforming to Function再次来到集结冰月素的最大值,或调用Iterator后重临值的最大值。 memberinstanceobj: any object同 includeinstanceiterator: a function object conforming to Function重临最小值,参见max()。 partitioninstanceiterator: a function object conforming to Function重临贰个暗含多少个Array的Array,第二个Array包罗全部调用Iterator重回True的元素,第叁个Array包括剩下的因素。假若Iterator未有交到,那么就依赖成分本人判别。 pluckinstancepropertyName name of the property that will be read from each element. This can also contain the index of the element再次回到每一个成分的钦命属性名的品质的值组成的Array。 rejectinstanceiterator: a function object conforming to Function和 findAll. selectinstanceiterator: a function object conforming to Function同 findAllinstanceiterator: a function object conforming to Function依据每一种成分调用Iterator重临的值进行排序重返三个Array。 toArray重回由集结全部因素构成的二个Array。 zip(collection1[, collection2 [, ... collectionN [,transform]]])instancecollection1 .. collectionN: enumerations that will be merged, transform: a function object conforming to Function合併每个给出的聚众到眼下集合。合併操作再次来到二个新的array,这些array的因素个数和原集结的因素个数相符,那些array的种种成分又是八个子array,它合併了独具集合中风度翩翩律index的因素。即便transform函数被钦命,那么array的每一种成分还有可能会调用transform函数先做拍卖。比方: [1,2,3].zip.inspect()返回 "[ [1,4,7],[2,5,8],[3,6,9] ]"

            <sales>$11,147.51</sales> 

    The Hash object

          </employee-sales> 

    Hash对象完毕风度翩翩种Hash结构,约等于一个Key:Value对的集纳。

        </monthly-sales> 

    Hash中的各样Item是三个有五个因素的array,前贰个是Key,后两个是Value,每一种Item也是有多个不需加以注脚的质量,key和value。

      </response> 

    Method

    </ajax-response> 

    Kind

    用 Ajax.Request对象和服务器通讯况兼获得这段 XML是特别轻便的。上边包车型地铁例证演示了它是什么样形成的。

    Arguments

    <script> 

    Description

    function searchSales(){ 

    keys重返全数Item的key的会集的三个array。 values()instance重回全部Item的value的联谊的三个array。 mergeinstanceotherHash: Hash object合併给出的Hash,重临二个新Hash。 toQueryString以QueryString那样的体制重临hash中颇负的item,比方: 'key1=value1&key2=value2&key3=value3' inspect用黄金时代种适于的方法呈现hash中的key:value对。

        var empID=$F('lstEmployees'); 

    The ObjectRange class

        var y=$F('lstYears'); 

    继承自 Enumerable

        var url=''; 

    用上、下面际描述叁个对象区域。

        var pars='empID=' empID '&year=' y;     

    Property

         

    Type

        var myAjax=new Ajax.Request(url,{ 

    Kind

            method:'get',parameters:pars,onComplete:showResponse         

    Description

        });     

    startinstance

    range的上面界

    function showResponse(originalRequest) 

    endinstancerange的最上部界exclusiveBooleaninstance决定边界本身是否range的黄金时代某个。

    Method

        //put returned XML in the textarea  

    Kind

        $('result').value = originalRequest.responseText;  

    Arguments

    }  

    Description

    </script> 

    [ctor](start, end, exclusive)constructorstart: the lower bound, end: the upper bound, exclusive: include the bounds in the range?创制二个range对象,从start生成到end,这里要专一的是,start和end必段项目风姿罗曼蒂克致,并且该品种要有succ()方法。 includeinstancesearchedValue: value that we are looking for检查三个value是或不是在range中。

    <select id="lstEmployees" size="10" onchange="searchSales()">  

    The Class object

        <option value="5">Buchanan, Steven</option>  

    在这里个顺序包中 Class 对象在宣称其余的类时候被用到 。用那些目的注解类使得新类接济 initialize() 方法,他起构造方法的职能。

        <option value="8">Callahan, Laura</option>  

    看上面包车型地铁例证

        <option value="1">Davolio, Nancy</option> 

    //declaring the classvar MySampleClass = Class.create();//defining the rest of the class implmentationMySampleClass.prototype = { initialize: function {this.message = message; }, showMessage: function { alert; }}; //now, let's instantiate and use one objectvar myTalker = new MySampleClass;myTalker.showMessage(); //displays alert

    </select> 

    Method

    <select id="lstYears" size="3" onchange="searchSales()"> 

    Kind

        <option selected="selected" value="1996">1996</option> 

    Arguments

        <option value="1997">1997</option> 

    Description

        <option value="1998">1998</option> 

    createinstance定义新类的构造方法。

    </select> 

    The Ajax object

    <br> 

    本条目款项的被看作别的提供AJAX功用的类的根对象。

    <textarea id=result cols=60 rows=10 ></textarea>

    Property

    您注意到传播 Ajax.Request构造方法的第三个对象了吗? 参数{method: 'get', parameters: pars, onComplete: showResponse} 表示五个无名对象的忠实写法。他表示您传入的那一个目的有三个名称叫 method 值为 'get'的性质,另一个属性名称叫 parameters 包涵HTTP须要的查询字符串,和二个onComplete 属性/方法包蕴函数showResponse。 

    Type

    再有局地别的的性情能够在此个指标里面定义和设置,如 asynchronous,可感到true 或 false 来决定AJAX对服务器的调用是不是是异步的(暗中同意值是 true卡塔 尔(英语:State of Qatar)。

    Kind

    其生机勃勃参数定义AJAX调用的选项。在大家的事例中,在首先个参数通过HTTP GET命令乞请那些url,传入了变量 pars富含的询问字符串, Ajax.Request 对象在它实现接纳响应的时候将调用showResponse 方法。

    Description

    或是你知道, XMLHttpRequest在HTTP诉求时期将报告进程景况。这么些速度被描述为七个不一致阶段:Loading, Loaded, Interactive, 或 Complete。你能够使 Ajax.Request 对象在任何品级调用自定义方法 ,Complete 是最常用的一个。想调用自定义的章程只必要轻巧的在号召的选项参数中的名称叫onXXXXX 属性/方法中提供自定义的不二等秘书籍对象。 就疑似大家例子中的 onComplete 。你传入的法子将会被用一个参数调用,那些参数是 XMLHttpRequest 对象自个儿。你将会用这些指标去赢得重回的数据同期恐怕检查包蕴有在这一次调用中的HTTP结果代码的 status 属性。

    activeRequestCountNumberinstance正在管理中的Ajax乞请的个数。

    还应该有其它八个有效的选项用来管理结果。大家能够在onSuccess 选项处传入一个办法,当AJAX准确的实施完后调用, 相反的,也能够在onFailure选项处传入一个艺术,当服务器端现身谬误时调用。正如onXXXXX 选项传入的办法意气风发致,那多个在被调用的时候也传扬叁个包蕴AJAX供给的XMLHttpRequest对象。

    Method

    作者们的例证未有用任何有意思的章程管理那个 XML响应, 大家只是把这段XML放进了三个文本域里面。对那一个响应的叁个第一名的施用很恐怕便是找到当中的想要的新闻,然后更新页面中的有些因素, 可能以致恐怕做一些XSLT转变而在页面中发出部分HTML。

    Kind

     在1.4.0版本中,风度翩翩种新的风浪回传外轮理货公司被引进。借令你有风流罗曼蒂克段代码总是要为三个卓绝的风浪施行,而无论是是哪些AJAX调用引发它,那么你可以接受新的Ajax.Responders对象。

    Arguments

    若是你想要在二个 AJAX 调用正在运作时,展现一些提醒成效,像三个不住转动的Logo之类的,你能够利用多个全局事件 Handler 来实现,个中一个在第 二个调用带头时显得Logo,另一个在最后两个调用实现时隐敝Logo。看上边包车型客车例证。

    Description

    <script> 

    getTransport()instance再次来到新的XMLHttpRequest 对象。

    var myGlobalHandlers = { 

    The Ajax.Responders object

    onCreate: function(){ 

    继承自 Enumerable

    Element.show('systemWorking'); 

    那些目的保障七个在Ajax相关事件发生时将被调用的目的的列表。比如,你要安装叁个大局钩子来拍卖Ajax操作特别,那么您就足以接收那么些指标。

    }, 

    Property

    onComplete: function() { 

    Type

    if(Ajax.activeRequestCount == 0){ 

    Kind

    Element.hide('systemWorking'); 

    Description

    respondersArrayinstance被登记到Ajax事件通报的指标列表。

    Method

    }; 

    Kind

    Ajax.Responders.register(myGlobalHandlers); 

    Arguments

    </script> 

    Description

    <div id='systemWorking'><img src='spinner.gif'>Loading...</div> 

    registerinstanceresponderToAdd: object with methods that will be called.被传播参数的靶子应包蕴名如Ajax事件的千门万户措施(如onCreate,onComplete,onException卡塔尔。通信事件引发全部被登记的对象的下不为例名称的函数被调用。 unregisterinstanceresponderToRemove: object to be removed from the list.从列表中移除。 dispatch(callback, request, transport, json)instancecallback: name of the AJAX event being reported, request: the Ajax.Request object responsible for the event, transport: the XMLHttpRequest object that carried the AJAX call, json: the X-JSON header of the response 遍历被登记的目的列表,搜索有由callback参数决定的相当函数的对象。然后向这几个函数字传送递别的的八个参数,借使Ajax响应中包含四个包含JSON内容的X-JSON HTTP头,那么它会被热行并传播json参数。倘诺事件是onException,那么transport参数会被特别替代,json不会传送。

    更完全的分解,请参见 Ajax.Request 仿照效法 和 Ajax选项仿效。

    The Ajax.Base class

    3.2 使用Ajax.Updater类

    其生龙活虎类是其余在Ajax对象中定义的类的基类。

    假使您的服务器的另风流洒脱端再次回到的新闻已是HTML了,那么使用那个程序包中 Ajax.Updater 类将使您的生活变得越来越得轻便。用它你只需提供哪叁个成分要求被AJAX伏乞重回的HTML填充就能够了,例子比小编写表达的更精晓。 

    Method

    <script> 

    Kind

    function getHTML() 

    Arguments

    Description

    var url = ''; 

    setOptionsinstanceoptions: AJAX options设定AJAX操作想要的选项。responseIsSuccess重返 true 假如AJAX操作成功,否则为 false 。responseIsFailure与 responseIsSuccess() 相反。

    var pars = 'someParameter=ABC'; 

    The Ajax.Request class

     

    继承自 Ajax.Base

    var myAjax = new Ajax.Updater( 

    封装 AJAX 操作

    'placeholder', 

    Property

    url, 

    Type

    Kind

    method: 'get', 

    Description

    parameters: pars 

    EventsArraystatic在AJAX操作中颇负恐怕报告的事件/状态的列表。这么些列表富含: 'Uninitialized', 'Loading', 'Loaded', 'Interactive','Complete'。transportXMLHttpRequestinstance承载AJAX操作的 XMLHttpRequest 对象。urlstringinstance请求的URL。

    }); 

    Method

     

    Kind

    Arguments

    </script> 

    Description

    <input type=button value=GetHtml onclick="getHTML()"> 

    [ctor]constructorurl: the url to be fetched, options: AJAX options成立这几个指标的三个实例,它将要加以的选项下乞求url。onCreate事件在调用constructor事被慰勉。 重要: 假如接受的url受到浏览器的平安设置,他会或多或少功用也不起。 超多情状下,浏览器不会呈请与当下页面区别主机的url。 你最佳只利用本地url来制止约束客户配置他们的浏览器instance那个点子鲜明不会被表面调用。它在Ajax响应中隐含X-JSONHTTP头时用于内部调用实施那几个剧情。evalReponse那也方法明确不会被表面调用,假如Ajax响应含有二个值为text/javascript的Cotent-Type头,那么那一个点子就用被调用实施响应体。headerinstancename: HTTP header name援引Ajax响应的头的开始和结果,在Ajax访谈甘休后再调用那一个情势。onStateChange那么些方法平日不会被外表调用。 当AJAX央求状态改换的时候被那几个目的自个儿调用。requestinstanceurl: url for the AJAX call那个主意日常不会被外表调用。已经在构造方法中调用了。respondToReadyStateinstancereadyState: state number 这一个格局日常不会被表面调用。 当AJAX央求状态改造的时候被那一个目的本身调用。setRequestHeaders那么些主意平时不会被外表调用。 被那一个目的本人调用来安顿在HTTP央求要发送的HTTP报头。

    <div id="placeholder"></div> 

    The options argument object

    你能够见见,这段代码比后面包车型客车例证尤其简洁,不包涵 onComplete 方法,不过在构造方法中盛传了一个因素id。 大家来微微改过一下代码来说述咋样在客商端管理服务器段错误成为或者。

    An important part of the AJAX operations is the options argument. There's no options class per se. Any object can be passed, as long as it has the expected properties. It is common to create anonymous objects just for the AJAX calls.

    我们将踏向愈来愈多的选项, 钦赐管理错误的贰个格局。那么些是用 onFailure 选项来成功的。大家也内定了叁个 placeholder 独有在中标央求之后才会被填充。为了实现那个目的大家改正了第贰个参数从叁个轻松的要素id到一个含有八个性子的靶子, success (一切OK的时候被用到) 和 failure (有地点出难点的时候被用到) 在上边包车型地铁事例中未有用到failure属性,而仅仅在 onFailure 处使用了 reportError 方法。

    Property

    <script> 

    Type

    function getHTML() 

    Default

    Description

    var url = ''; 

    methodString'post'HTTP 诉求格局。parametersString''在HTTP诉求中传来的url格式的值列表。asynchronousBooleantrue钦命是还是不是做异步 AJAX 央浼。postBodyStringundefined在HTTP POST的气象下,传入央浼体中的内容。requestHeadersArrayundefined和央浼一齐被传出的HTTP底部列表, 那一个列表必得含有偶数个类型, 任何奇数项目是自定义的底部的名目, 接下来的偶数项目使那一个底部项目标字符串值。 例子:['my-header1', 'this is the value', 'my-other-header', 'another value'] onXXXXXXXXFunction(XMLHttpRequest, Object)undefined在AJAX诉求中,当相应的风浪/状态产生的时候调用的自定义方法。 例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 那些方法将被流传二个参数, 那个参数是承载AJAX操作的 XMLHttpRequest 对象,另二个是含有被试行X-JSON响应HTTP头。onSuccessFunction(XMLHttpRequest, Object)undefined当AJAX央浼成功达成的时候调用的自定义方法。 那几个艺术将被盛传八个参数, 那么些参数是承载AJAX操作的 XMLHttpRequest 对象,另二个是包括被施行X-JSON响应HTTP头。onFailureFunction(XMLHttpRequest, Object)undefined当AJAX央求完结但现身谬误的时候调用的自定义方法。那几个措施将被盛传一个参数, 这一个参数是承载AJAX操作的 XMLHttpRequest 对象,另贰个是包罗被试行X-JSON响应HTTP头。onExceptionFunction(Ajax.Request, exception)undefined当一个在客商端实践的Ajax爆发像空头响应或无效参数那样的相当意况时被调用的自定义函数。它选择八个参数,包罗卓殊Ajax操作的Ajax.Request对象和相当对象。insertionan Insertion classundefined二个能决定哪些插入新剧情的类,能 Insertion.Before, Insertion.Top, Insertion.Bottom,或 Insertion.After. 只好使用于Ajax.Updater 对象. evalScriptsBooleanundefined, false决定当响应达到的时候是不是试行当中的脚本块,只在 Ajax.Updater 对象中运用。decayNumberundefined, 1决定当最终一遍响应和前三遍响应雷同一时间在 Ajax.PeriodicalUpdater 对象中的减漫访谈的次数, 比方,假诺设为2,后来的刷新和前边的结果一致, 那么些目的将等待2个设定的时日间隔实行下贰次刷新, 假若又二次相仿, 那么将等待4次,等等。 不设定那么些只,恐怕设置为1,将防止访谈频率变慢。frequencyNumberundefined, 2用秒表示的刷新间的间隔,只好采用于 Ajax.PeriodicalUpdater 对象。

    var pars = 'someParameter=ABC'; 

    The Ajax.Updater class

     

    继承自 Ajax.Request

     

    当呼吁的url重返风度翩翩段HTML而你想把它平素放置到页面中多少个一定的要素的时候被用到。 要是url的回到``

     

    的块而且想在选取届期就实践它的时候也得以运用该指标。含有脚本的时候使用 evalScripts 选项。

    var myAjax = new Ajax.Updater( 

    Property

    {success: 'placeholder'}, 

    Type

    url, 

    Kind

    Description

    method: 'get', 

    containersObjectinstance这一个指标包括八个属性:AJAX乞求成功进行的时候用到 containers.success , 不然的话用到 containers.failure

    parameters: pars, 

    Method

    onFailure: reportError 

    Kind

    }); 

    Arguments

     

    Description

    [ctor](container, url, options)constructorcontainer:this can be the id of an element, the element object itself, or an object with two properties - object.success element that will be used when the AJAX call succeeds, and object.failure element that will be used otherwise. url: the url to be fetched, options: AJAX options创制三个用给定的选料央浼给定的url的二个实例。updateContent()instance那一个主意日常不会被外表调用。 当响应到达的时候,被那些目的自身调用。 它会用HTML更新适当的成分可能调用在 insertion 选项中传来的办法-这几个法子将被传到四个参数, 被更新的要素和响应文件。

    function reportError(request) 

    The Ajax.PeriodicalUpdater class

    继承自Ajax.Base

    alert('Sorry. There was an error.'); 

    本条类重复生成并应用 Ajax.Updater指标来刷新页面中的八个因素。大概实行Ajax.Updater 能够进行的别的职责。更加多音讯参照他事他说加以考察 Ajax.Updater 参谋 。

    Property

    </script> 

    Type

    <input type=button value=GetHtml onclick="getHTML()"> 

    Kind

    <div id="placeholder"></div> 

    Description

    假诺你的服务器逻辑是连同HTML 标志再次回到JavaScript 代码, Ajax.Updater对象足以进行这段JavaScript代码。为了使那些目的相比较响应该为JavaScript,你只需在最终参数的对象构造方法中简易参预evalScripts: true属性。不过值得说示的是,像那一个选项名evalScripts暗中提示的,这几个脚本会被实践,然而它们不会被投入到Page的台本中。“有何样分别?”,只怕您会如此问。大家假使须求地址重返的东东像这么:

    containerObjectinstance那么些值将一向传入Ajax.Updater的构造方法。urlStringinstance这么些值将直接传入Ajax.Updater的构造方法。frequencyNumberinstance两遍刷新之间的间隔,以秒为单位。 暗中认可2秒。 This 当调用 Ajax.Updater 对象的时候,这几个数将和当前的 decay 相乘。 decayNumberinstance重负施行职务的时候保持的衰败水平。updaterAjax.Updaterinstance最终三回选择的 Ajax.Updater指标timerObjectinstance公告对象该下三回立异时用到的JavaScript 坚持计时器。

    <script language="javascript" type="text/javascript"> 

    Method

    function sayHi(){ 

    Kind

    alert('Hi'); 

    Arguments

    Description

    </script> 

    [ctor](container, url, options)constructorcontainer:this can be the id of an element, the element object itself, or an object with two properties - object.success element that will be used when the AJAX call succeeds, and object.failure element that will be used otherwise. url: the url to be fetched, options: AJAX options创制一个用给定的采纳央浼给定的url的八个实例。start()instance这些措施通常不会被表面调用。 对象为了早先周期性实施任务的时候调用的艺术。 stop使对象甘休推行周期职务。截止后,若是有onComplete选项,那么吸引callback。 updateComplete那个措施日常不会被表面调用。 被当下的 Ajax.Updater应用,当一回倡议停止的时候,它被看成安排下壹回呼吁。 onTimerEvent那个措施常常不会被表面调用。当到下叁次校正时被内部调用。

    <input type=button value="Click Me" onclick="sayHi()"> 

    The Element object

    比方您从前那样尝试过,你领会那一个本子不会如你所企盼的那么行事,原因是这段脚本会被奉行,但像上面那样的本子推行并不会创制叁个称呼sayHi的函数,它怎么也不做。借使要创设一个函数,大家应该把代码改成上边这么些样子:

    本条款的提供在操作DOM申月素时行使的作用性方法。

    <script language="javascript" type="text/javascript"> 

    Method

    sayHi = function(){ 

    Kind

    alert('Hi'); 

    Arguments

    }; 

    Description

    </script> 

    addClassNameinstanceelement: element object or id, className: name of a CSS class将付出的className增多到指标的className属性中。classNamesinstanceelement: element object or id再次来到叁个Element.ClassName的靶子表示CSS 给出对象有的class names。cleanWhitespaceinstanceelement: element object or id消亡对象子成分中装有空白的text node。emptyinstanceelement: element object or id重临三个布尔值指示对象为空或独有空白字符。getDimensionsinstanceelement: element object or id再次来到对象的尺码,再次来到值有八个属性,height和width。 getHeightinstanceelement: element object or id重回成分的 offsetHeight 。getStyleinstanceelement: element object or id, cssProperty name of a CSS property (either format 'prop-name' or 'propName' works).重临给定对象的CSS属性值或未有一点点名cssProperty时再次回到null。hasClassNameinstanceelement: element object or id, className: name of a CSS class重临 true 如若成分的类名中包括给定的类名hide(elem1 [, elem2 [, elem3 [...]]])instanceelemN: element object or id通过设定style.display'none'来掩藏每种传入的成分。 makeClippinginstanceelement: element object or id能过设定overflow的值设定内容溢出剪辑。makePositionedinstanceelement: element object or id改进对象的style.position为'relative'。removeinstanceelement: element object or id从document对象中剔除钦赐的要素。removeClassNameinstanceelement: element object or id, className: name of a CSS class从要素的类名中除去给定的类名。scrollToinstanceelement: element object or id滚动window到指标的任务。setStyle(element, cssPropertyHash)instanceelement: element object or id, cssPropertyHash Hash object with the styles to be applied.依据cssPropertyHash参数给目的设置CSS属性值。show(elem1 [, elem2 [, elem3 [...]]])instanceelemN: element object or id用设定它的 style.display''来显示每一种传入的因素。 toggle(elem1 [, elem2 [, elem3 [...]]])instanceelemN: element object or id切换每二个传开元素的可视性。undoClippinginstanceelement: element object or idstyle.overflow的值再次回到上五个设定值。undoPositionedinstanceelement: element object or id息灭对象的 style.position 为 ''updateinstanceelement: element object or id, html: html content用给出的HTML参数替换对象的innerHTML,纵然HTML参数中隐含

    <input type=button value="Click Me" onclick="sayHi()">

    将把 HTML 变为
    Hello, Chief Wiggum. How's it going?
    

    何以我们在上头的代码中不行使var关键字来声称这几个变量呢(指sayHi 卡塔 尔(英语:State of Qatar),因为那样做创制出来的函数将只是近来脚本块的贰个有个别变量(起码在IE中是那般卡塔尔。不写var关键字,创制出来的对象的效能域就是我们所希望的window。

    The Insertion.Top class

    更多相关知识,请参谋  Ajax.Updater reference 和options reference. 

    继承自 Abstract.Insertion

    四:枚举

    在给定元素第一身长节点地方插入 HTML。内容将放在元素的发轫标志的紧前边。

    你明白,大家都以这么来做巡回的,建多少个Array,用elements组织它们,再建叁个周而复始结构(比方for,foreach,while)通过index数字来做客每叁个element,再用那一个element做一些动作。 

    Method

    当您想到这个时候,你会开掘大致每一遍写循环代码你都会迟早用到三个Array。那么,若是Array对象能够提供越多的机能给它们的迭代器使用不是很爽吗?确实是这么,事实上比超多的编程语言都在它们的Array或其余相似的布局中(如Collections,Lists卡塔尔提供一些如此的成效。 

    Kind

    明天好了,prototype.js了给咱们三个Enumerable对象,它达成了累累和可迭代数据开展相互作用的门道。和原本的JS对象相比较prototype.js更上大器晚成层楼,它对Array 类s扩张了具备枚举要用的函数。 

    Arguments

    4.1循环, Ruby样式的

    Description

    在专门的工作的javascript中,要是您想把三个array中的所有elements展现出来,你能够像上边代码那样写得很好:

    [ctor]constructorelement: element object or id, content: HTML to be inserted继承自Abstract.Insertion. 创立三个方可协助插入动态内容的目的。

    <script> 

    下面的代码
    Hello, Wiggum. How's it going? new Insertion.Top; 
    
    将把 HTML 变为
    Hello, Mr. Wiggum. How's it going?
    

    function showList(){ 

    The Insertion.Bottom class

    var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg']; 

    Inherits from Abstract.Insertion

                for(i=0;i<simpsons.length;i ){ 

    在给定成分尾数子节点地点插入 HTML。内容将放在成分的了断标识的紧前面。

    alert(simpsons[i]); 

    Method

    Kind

    Arguments

    </script> 

    Description

    <input type="button" value="Show List" onclick="showList();" > 

    [ctor]constructorelement: element object or id, content: HTML to be insertedInherited from Abstract.Insertion. Creates an object that will help with dynamic content insertion.

    运用我们新的最棒的爱人,prototype.js,大家能够把它生写成这么

    The following code

    function showList(){ 

    Hello, Wiggum. How's it going? new Insertion.Bottom('person', " What's up?"); 
    

    var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg']; 

    Will change the HTML to

                simpsons.each( function(familyMember){ 

    Hello, Wiggum. How's it going? What's up?
    

    alert(familyMember); 

    The Insertion.After class

    }); 

    Inherits from Abstract.Insertion

    在给定成分甘休标志的背后插入HTML。

    您大概会想“非常想得到的秘诀...相对旧的,这种语法太古怪了”。哦,在上头的例证,确实什么也尚无,在此个轻易得要死例子中,也绝非变动太多啊,尽管如此,请继续读下去。 

    Method

    在三番四遍下边内容前边,你注意到足够被做为一个参数字传送递给each函数的函数?大家把它明白成迭代器函数。 

    Kind

    4.2 Your arrays on steroids

    Arguments

    有如我辈地点提到的,把你的Array中的elements当成相符的花色应用同风流倜傥的性质和函数是很通用(Common,不知该翻译成通用照旧庸俗)的。让大家看看怎么样利用大家新的劲头刚劲的Arrays的迭代成效吗。 遵照标准找到多少个element。 

    Description

    <script> 

    [ctor]constructorelement: element object or id, content: HTML to be insertedInherited from Abstract.Insertion. Creates an object that will help with dynamic content insertion.

    function findEmployeeById(emp_id){ 

    The following code

    var listBox = $('lstEmployees') 

    Hello, Wiggum. How's it going? new Insertion.After('person', ' Are you there?'); 
    

    var options = listBox.getElementsByTagName('option'); 

    Will change the HTML to

    options = $A(options); 

    Hello, Wiggum. How's it going? Are you there?
    

    var opt = options.find( function(employee){ 

    The Field object

    return (employee.value == emp_id); 

    本条目款项的提供操作表单中的输入项目标功效性方法。

    }); 

    Method

    alert(opt.innerHTML); //displays the employee name 

    Kind

    Arguments

    </script> 

    Description

    <select id="lstEmployees" size="10" > 

    clear(field1 [, field2 [, field3 [...]]])instance田野同志N: 田野先生element object or id 消除传入表单中项目成分的值。present(田野(field)1 [, field2 [, field3 [...]]])instance田野N: 田野(field) element object or id 独有在颇有的表单项目都不为空时重返 true 。focusinstance田野(field): fieldelement object or id移动主旨到给定的表单项目。selectinstance田野: 田野先生element object or id选用扶助项目值采纳的表单项指标值。activateinstance田野同志: 田野 element object or id移动宗旨并且接受支持项目值选用的表单项指标值。

    <option value="5">Buchanan, Steven</option> 

    The Form object

    <option value="8">Callahan, Laura</option> 

    这些指标提供操作表单和她们的输入成分的成效性方法。

    <option value="1">Davolio, Nancy</option> 

    Method

    </select> 

    Kind

    <input type="button" value="Find Laura" onclick="findEmployeeById(8);" > 

    Arguments

    现行反革命我们再下大器晚成城,看看怎样过滤二个Array中的成分,从各类成分中获取大家想要的积极分子。 

    Description

    <script> 

    serializeinstanceform: form element object or id重返url参数格式的档次名和值的列表, 如'field1=value1&field2=value2&field3=value3'。findFirstElementinstanceform: form element object or id重回Form中首先个Enable的对象。getElementsinstanceform: form element object or id再次来到包括全数在表单中输入项目标 Array 对象。getInputs(form [, typeName [, name]])instanceform: form element object or id, typeName: the type of the input element, name: the name of the input element.再次来到一个 Array 包罗全体在表单中的 元素。 其它, 那么些列表能够对成分的连串或名字属性举行过滤。disableinstanceform: form element object or id使表单中的全体输入项目无效。enableinstanceform: form element object or id使表单中的全体输入项目使得。focusFirstElementinstanceform: form element object or id激活第多少个表单中可视的,有效的输入项目。resetinstanceform: form element object or id重新苏醒设置表单。和调用表单对象的 reset() 方法同样。

    function showLocalLinks(paragraph){ 

    The Form.Element object

    paragraph = $(paragraph); 

    这一个目的提供表单对象中的可视和非可视成分的功能性方法。

    var links = $A(paragraph.getElementsByTagName('a')); 

    Method

    //find links that do not start with 'http' 

    Kind

    var localLinks = links.findAll( function(link){ 

    Arguments

    var start = link.href.substring(0,4); 

    Description

    return start !='http'; 

    serializeinstanceelement: element object or id重回成分的 名称=值 对, 如 'elementName=elementValue'。getValueinstanceelement: element object or id重回成分的值。

    }); 

    The Form.Element.Serializers object

    //now the link texts 

    那些目的提供了在那之中选择的用来增援分析出表单成分的脚下值的局地卓有功能的方式。

    var texts = localLinks.pluck('innerHTML'); 

    Method

    //get them in a single string 

    Kind

    var result = texts.inspect(); 

    Arguments

    alert(result); 

    Description

    inputSelectorinstanceelement: object or id of a form element that has the checked property, like a radio button or checkbox.再次来到带有成分名称和值的 Array , 如 ['elementName', 'elementValue']textareainstanceelement: object or id of a form element that has the value property, like a textbox, button or password 田野同志.再次回到带有成分名称和值的 Array , 如 ['elementName', 'elementValue']selectinstanceelement: object of a element再次回到带有成分名称和具有被选取的接收的值或文本的 Array , 如 ['elementName', 'selOpt1 selOpt4 selOpt9']

    </script> 

    The Abstract.TimedObserver class

    <p id="someText"> 

    本条类是用以别的监听叁个因素的值变化的类的基类,那一个类像叁个抽象类相似被利用。

    This <a href="; has 

    子类能够被创立来监听如输入项目值,或style属性,或表格的行数,或然此外任何对追踪变化有关的事物。

    a <a href="#localAnchor">lot</a> of 

    子类必得得以完成这些艺术来支配哪些才是被监听的成分的当前值。

    <a href="#otherAnchor">links</a>. Some are 

    Method

    <a href="; 

    Kind

    and some are <a href="#someAnchor">local</a> 

    Arguments

    </p> 

    Description

    <input type=button value="Find Local Links" onclick="showLocalLinks('someText')"> 

    [ctor](element, frequency, callback)constructorelement: element object or id, frequency: interval in seconds, callback: function to be called when the element changes创造四个监听成分的对象。getValue()instance, abstract子类必须兑现那么些方式以瘊定什么这些因素被监视的眼下值。registerCallback()instance那个办法平日不会被外表调用。 被那一个目的本身调用来开端监听那个成分。 onTimer伊夫nt这一个艺术日常不会被外表调用。 被那几个目的自个儿调用来周期性的检查那些成分。

    上边的代码仅仅是一些微小的实行令人爱上这种语法。请参照他事他说加以调查Enumerable和Array的装有函数

    Property

    五:prototype.js参考

    Type

    5.1 JavaScript类扩展

    Description

    prototype.js 类库达成强盛效能的生龙活虎种渠道是扩充本来就有的JavaScript 类。 

    elementObject被监听的要素对象。frequencyNumber每一次检查中的以秒为单位的时间隔离。callbackFunction只要成分更改这么些法子就能被调用。 会选拔到成分对象和新值作为参数。lastValueString成分被核算的最终一个值。

    5.1.1 对 Object的扩展

    The Form.Element.Observer class

    Method

    继承自 Abstract.TimedObserver

    Kind

    Abstract.TimedObserver 的三个兑现类用来监听表单输入项目标值的改变。当您想监听多个未曾带报告值变化事件的成分的时候利用这一个类。不然的话使用 Form.Element.EventObserver 类代替。

    Arguments

    Method

    Description

    Kind

    extend(destination, source)

    Arguments

    static

    Description

    destination: any object, source: any object

    [ctor](element, frequency, callback)constructorelement: element object or id, frequency: interval in seconds, callback: function to be called when the element changes继承自 Abstract.TimedObserver. 创制八个监听成分值属性的指标。getValue()instance重临成分的值。

    提供意气风发种通过拷贝所有源以象属性和函数到目的函数实现连续的方法

    The Form.Observer class

    inspect(targetObj)

    继承自 Abstract.TimedObserver

    static

    Abstract.TimedObserver 的四个落到实处类用来监听表单中任何数据项的值的变迁。当您想监听二个未曾带报告值变化事件的元素的时候使用那个类。 不然的话使用类Form.EventObserver 代替。

    targetObj: any object

    Method

    再次来到可读性好有关目的对象的文字描述,借使目的实例未有概念叁个inspect函数,私下认可重临toString函数的值。

    Kind

    5.1.2 对Number的扩展

    Arguments

    Method

    Description

    Kind

    [ctor](form, frequency, callback)constructorform: form object or id, frequency: interval in seconds, callback function to be called when any data entry element in the form changes继承自 Abstract.TimedObserver. 创建八个监听表单变化的目的。getValue()instance重临全数表单数据的意气风发种类值。

    Arguments

    The Abstract.EventObserver class

    Description

    本条类被看作别的一些类的基类,这么些类具有在一个成分的值改正事件产生的时候实施一个回调方法这么的成效。

    toColorPart()

    Abstract.EventObserver 的多个对象可以绑定到一个元素上,不是一个帮其他的擦出了,而是按照他们付给元素的顺序执行这些回调方法。

    instance

    单选开关和复选框的触及事件是 onclick ,而文本框和下拉列表框/下拉列表框的是 onchange

    (none)

    Method

    回去数字的十三进制表示情势。在把三个SportageGB数字转变到HTML表现方式时很有用。

    Kind

    succ()

    Arguments

    instance

    Description

    (none)

    [ctor]constructorelement: element object or id, callback: function to be called when the event happens创制监听成分的靶子。getValue()instance,abstract子类必得贯彻那么些办法以瘊定什么这一个成分被监视的当前值。registerCallback这些措施日常不会被表面调用。 被对象调用来把温馨绑定到成分的事件上。 registerFormCallbacks这一个法子经常不会被表面调用。 被对象调用来把温馨绑定到表单中的每一个数量项成分的风云上。 onElementEvent那么些艺术通常不会被表面调用。 将被绑定到成分的风浪上。

     再次回到下一个数字,这几个法子可用于迭代调用处景中。 

    Property

    times(iterator)

    Type

    instance

    Description

    iterator: a function object conforming to Function(index)

    elementObject被监听的因素对象。callbackFunction只要成分改动就调用的主意。会接到到成分对象和新值作为参数。lastValueString成分被核查的末梢贰个值。

    Calls the iterator function repeatedly passing the current index in the index argument. 反复调用iterator函数并传递当前index到iterator的index参数。 

    The Form.Element.EventObserver class

    上面包车型地铁例证用提示框显示0-9。 

    继承自 Abstract.EventObserver

    <script> 

    Abstract.EventObserver 的一个落实类,它在监测到表单中多少项成分的值改换的附和事件时候执行多少个回调方法。 要是成分未有任何报告生成的轩然大波,那么您能够行使 Form.Element.Observer 类代替。

    function demoTimes(){ 

    Method

    var n = 10; 

    Kind

    n.times(function(index){ 

    Arguments

    alert(index); 

    Description

    }); 

    [ctor]constructorelement: element object or id, callback: function to be called when the event happens继承自 Abstract.EventObserver。 创造三个监听成分值属性的目的。getValue()instance重回成分的值。

    /*************************** 

    The Form.EventObserver class

    * you could have also used: 

    继承自 Abstract.EventObserver

    *           (10).times( .... ); 

    Abstract.EventObserver 的多少个完毕类,监听表单对象中隐含的此外对象的其他改造,用成分的事件检验值的生成。倘诺元素未有其余报告生成的平地风波, 那么你能够选用Form.Observer 类代替。

    ***************************/ 

    Method

    Kind

    </script> 

    Arguments

    <input type=button value="Test Number.times()" onclick="demoTimes()"> 

    Description

    5.1.3 对 Function扩展

    [ctor]constructorform: form object or id, callback: function to be called when any data entry element in the form changes继承自 Abstract.EventObserver。 创造一个监听元素值属性的目的。getValue()instance重临全数表单数据的朝气蓬勃连串值。

    Method

    Position 对象

    Kind

    本条指标提供许多和因素地方相关的秘技。

    Arguments

    Method

    Description

    Kind

    bind(object)

    Arguments

    instance

    Description

    object: the object that owns the method

    prepare()instance调整 deltaXdeltaY 属性来协和在滚动地点中的变化。 记得在页面滚动之后的另向外调拨运输用的withinIncludingScrolloffset 在此以前调用那些艺术。realOffsetinstanceelement: object重返那个元素的不错滚动偏差的 Array 对象, 包含全体影响因素的滚动偏差。结果数组雷同 [total_scroll_left, total_scroll_top]cumulativeOffsetinstanceelement: object回那些因素的正确滚动偏差的 Array 对象, 满含别的被停放的父成分强加偏差。结果数组肖似 [total_offset_left, total_offset_top]withininstanceelement: object, x and y: coordinates of a point测验给定的点的坐标是还是不是在给定的成分的表面矩形范围以内。withinIncludingScrolloffsetsinstanceelement: object, x and y: coordinates of a point测量试验给定的点的坐标是还是不是在给定的因素的外表矩形范围以内。overlapinstancemode: 'vertical' or 'horizontal', element: object在调用那几个主意早先要求调用within() 。这么些措施再次来到0.0到1.0以内的数字,来代表坐标在要素重叠的分数。 举个例子,倘诺成分是三个边长是100px的长方形的DIV,况且位居, 然后 within;``overlap('vertical', divSquare);会回去 0.10,意思是卓殊点位于DIV最上端边框以下 百分之十 的地点上。 cloneinstancesource: element object or id, target: element object or id更换目的成分的分寸尺寸和地方与源成分的生机勃勃致。

    回到function的实例,这么些实例和源function的构造相像,可是它已被绑定给了参数中提供的object,就是说,function中的this指针指向参数object。

    bindAsEventListener(object)

    instance

    object: the object that owns the method

    用法和上边的bind相似,区别在于用来绑定事件。

    让大家看看如何利用那么些扩充。 

    <input type=checkbox id=myChk value=1> Test? 

    <script> 

    //declaring the class 

    var CheckboxWatcher = Class.create(); 

    //defining the rest of the class implementation 

    CheckboxWatcher.prototype = { 

    initialize: function(chkBox, message) { 

    this.chkBox = $(chkBox); 

    this.message = message; 

    //assigning our method to the event 

     

    this.chkBox.onclick = 

    this.showMessage.bindAsEventListener(this); 

     

    }, 

    showMessage: function(evt) { 

    alert(this.message ' (' evt.type ')'); 

    }; 

    var watcher = new CheckboxWatcher('myChk', 'Changed'); 

    </script> 

    5.1.4 对String的扩展

    Method

    Kind

    Arguments

    Description

    stripTags()

    instance

    (none)

    重临三个把持有的HTML或XML标志都移除的字符串。

    stripScripts()

    instance

    (none)

    归来多少个把富有的script都移除的字符串。

    escapeHTML()

    instance

    (none)

    归来二个把拥有的HTML标志合适的转义掉的字符串。

    unescapeHTML()

    instance

    (none)

    escapeHTML()的反转。

    extractScripts()

    instance

    (none)

    回来二个包蕴在string中找到的享有<script>的数组。

    evalScripts()

    instance

    (none)

    进行在string中找到的装有<script>。

    toQueryParams()

    instance

    (none)

    把querystring分割才五个用parameter name做index的联合签名Array,更像三个hash。

    parseQuery()

    instance

    (none)

    和toQueryParams()一样.

    toArray()

    instance

    (none)

    把字符串调换来字符数组.

    camelize()

    instance

    (none)

    转变叁个以连字符连接的字符串成八个骆驼法样式的字符串。比方,这一个函数在写代码时,把它做为二个体裁工具使用是很有用的。

    5.1.5 对  Array的扩展

    因为array扩大于enumerable,所以全数enumberable对象的函数,array都以足以选拔的,除外,上边包车型地铁那个也是现已落实了的。 

    Method

    Kind

    Arguments

    Description

    clear()

    instance

    (none)

    清空。

    compact()

    instance

    (none)

    归来四个不包涵源array中null或undefined成分的array,此方法不退换源array。

    first()

    instance

    (none)

    回去array的第二个对象。

    flatten()

    instance

    (none)

    透过递归组合array每种成分的子成分(假使该因素也是array)来回到多少个“扁平的”生机勃勃维的array。

    indexOf(value)

    instance

    value: what you are looking for.

    回来给出数字地点(从0算起卡塔尔国的因素,假设在该岗位未有找到对象,再次回到-1。 

    inspect()

    instance

    (none)

    重载inspect(),重临更加好格式的反映Array种种成分的字符描述。

    last()

    instance

    (none)

    归来最终三个要素。

    reverse([applyToSelf])

    instance

    applyToSelf: indicates if the array itself should also be reversed.

     反转Array七月素的相继,若无提交参数,或参数为true,则源Array七月素的黄金年代生机勃勃也反转,不然源Array保持不改变。 

    shift()

    instance

    (none)

    归来Array的率先个要素并从Array中移除它,Array的Length-1。

    without(value1 [, value2 [, .. valueN]])

    instance

    value1 ... valueN: values to be excluded if present in the array.

     再次回到叁个把参数列表中包含的成分从源Array中解除的Array。 

    5.2 document DOM扩展

    Method

    Kind

    Arguments

    Description

    getElementsByClassName(className [, parentElement])

    instance

    className: name of a CSS class associated with the elements, parentElement: object or id of the element that contains the elements being retrieved.

    归来全部CSS className属性等于className参数的要素,若无给出parentElement,那么将追寻document body。(此处使用document.body小编觉着不如使用document,因为不常候有的页面未有body)  

    5.3 Event扩展

    Property

    Type

    Description

    KEY_BACKSPACE

    NumberNumber

    8: Constant. Code for the Backspace key.

    KEY_TAB

    Number

    9: Constant. Code for the Tab key.

    KEY_RETURN

    Number

    13: Constant. Code for the Return key.

    KEY_ESC

    Number

    27: Constant. Code for the Esc key.

    KEY_LEFT

    Number

    37: Constant. Code for the Left arrow key.

    KEY_UP

    Number

    38: Constant. Code for the Up arrow key.

    KEY_RIGHT

    Number

    39: Constant. Code for the Right arrow key.

    KEY_DOWN

    Number

    40: Constant. Code for the Down arrow key.

    KEY_DELETE

    Number

    46: Constant. Code for the Delete key.

    observers:

    Array

    List of cached observers. Part of the internal implementation details of the object.

    Method

    Kind

    Arguments

    Description

    element(event)

    static

    event: an Event object

    回来事件源对象。

    isLeftClick(event)

    static

    event: an Event object

    假定点击了鼠标左键,再次来到true.

    pointerX(event)

    static

    event: an Event object

    回到鼠标的X座标。 

    pointerY(event)

    static

    event: an Event object

    回去鼠标的Y座标。

    stop(event)

    static

    event: an Event object

    行使此函数来脚刹踏板事件的暗许行为并阻止传递(冒泡)。

    findElement(event, tagName)

    static

    event: an Event object, tagName: name of the desired tag.

    从事件源对象开首进步搜索DOM树,直到找到第叁个切合tagName的因素

    observe(element, name, observer, useCapture)

    static

    element: object or id, name: event name (like 'click', 'load', etc), observer: function to handle the event, useCapture: if true, handles the event in the capture phase and if false in the bubbling phase.

    为目的的某部事件扩展一个管理函数。

    stopObserving(element, name, observer, useCapture)

    static

    element: object or id, name: event name (like 'click'), observer: function that is handling the event, useCapture: if true handles the event in the capture phase and if false in the bubbling phase.

    和方面包车型客车函数相反。

    _observeAndCache(element, name, observer, useCapture)

    static

     

    私家函数,别管它。

    unloadCache()

    static

    (none)

    私家函数,别管它。从内部存储器中杀绝全体的observers缓存。

    上边代码演示怎样给window增添三个load事件管理函数。 

    <script> 

    Event.observe(window, 'load', showMessage, false); 

    function showMessage() { 

    alert('Page loaded.'); 

    </script> 

    5.4 在prototype.js中定义新的靶子和类

    另三个以此顺序包支持你的地点正是提供点不清既帮衬面向对象设计意见又有共通作用的浩大指标。 

    The PeriodicalExecuter object

    以此目的提供一定间距时间上海重机厂新调用三个方法的逻辑。 

    Method

    Kind

    Arguments

    Description

    [ctor](callback, interval)

    constructor

    callback: a parameterless function, interval: number of seconds

    始建那些指标的实例将会再一次调用给定的艺术。

    Property

    Type

    Description

    callback

    Function()

    被调用的办法,该方法无法流传参数。

    frequency

    Number

    以秒为单位的间距。

    currentlyExecuting

    Boolean

    意味着那个法子是不是正在实践。

    5.4.1 The Prototype object

    Prototype 未有太主要的机能,只是注脚了该程序包的版本 。 

    Property

    Type

    Description

    Version

    String

    版本。

    emptyFunction

    Function()

    空函数。

    K

    Function(obj)

    叁个独有回传参数的函数。

    ScriptFragment

    String

    辨认script的正则式。

    5.4.2 The Enumerable object

    Enumberable对象能够已越来越高贵的格局实现对列表样式的布局进行枚举。 

    好些个别的的目的通过扩大自Enumberable对象来得到这个使得的接口。

    Method

    Kind

    Arguments

    Description

    each(iterator)

    instance

    iterator: a function object conforming to Function(value, index)

    把各种element做为第叁个参数,element的index作为第三个参数调用iterator函数。

    all([iterator])

    instance

    iterator: a function object conforming to Function(value, index)

    以此函数会用给出的iterator测量检验整个集结,即便集合中任一成分在iterator函数测量试验中回到false或null,那么那么些函数重返false,不然再次来到true。若无交给iterator,那么就能测量试验全部的成分是还是不是不等于false和null。你能够大约的把它看做是“检验各种成分都为非空非负”。 

    any(iterator)

    instance

    iterator: a function object conforming to Function(value, index), optional.

    其朝气蓬勃函数会用给出的iterator测量试验整个会集,假诺群集中任一成分在iterator函数测量试验中回到true,那么那个函数重返true,不然再次来到false。若无付诸iterator,那么就能测量检验全体的因素是还是不是有三个不等于false和null。你能够轻巧的把它看成是“检查测量试验元素中是或不是有非空非负的”。 

    collect(iterator)

    instance

    iterator: a function object conforming to Function(value, index)

     调用iterator函数依照集结中各样成分再次来到三个结出,然后依据原先集结中的顺序,再次回到八个Array。 

    detect(iterator)

    instance

    iterator: a function object conforming to Function(value, index)

    集聚中每一个成分调用一遍Iterator,再次回到第三个使Iterator再次回到True的要素,若是最终都并未有为true的调用,那么重临null。 

    entries()

    instance

    (none)

    等于toArray(). 

    find(iterator)

    instance

    iterator: a function object conforming to Function(value, index)

    等于 detect(). 

    findAll(iterator)

    instance

    iterator: a function object conforming to Function(value, index)

    聚拢中种种元素调用Iterator,重返一个由具有调用Iterator重回结果特别true的要素构成的数组。和reject()相反。 

    grep(pattern [, iterator])

    instance

    pattern: a RegExp object used to match the elements, iterator: a function object conforming to Function(value, index)

     用pattern参数正则表明式测量试验会集中的每种成分,再次回到贰个暗含全部相配正则式的成分的Array,假如给出了Iterator,那一个每一个结果还要通过一下Iterator管理。 

    include(obj)

    instance

    obj: any object

     推断集合中包不带有内定对象。 

    inject(initialValue, iterator)

    instance

    initialValue: any object to be used as the initial value, iterator: a function object conforming to Function(accumulator, value, index)

     用Iterator联接全体集结中的成分。Iterator在被调用时把上一回迭代的结果做为第三个参数字传送给accumulator。第一次迭代时,accurmelator等于initialValue,最终回来accumulator的值。 

    invoke(methodName [, arg1 [, arg2 [...]]])

    instance

    methodName: name of the method that will be called in each element, arg1..argN: arguments that will be passed in the method invocation.

    集结中的每一个成分调用内定的函数(查看源代码能够开采钦点函数被调用时,this指针被传成当前因素卡塔尔国,并传播给出的参数,重临调用结果组成的Array。 

    map(iterator)

    instance

    iterator: a function object conforming to Function(value, index)

    同collect(). 

    max([iterator])

    instance

    iterator: a function object conforming to Function(value, index)

    回到群集巧月素的最大值,或调用Iterator后再次回到值的最大值(借使给出了Iterator的话)。 

    member(obj)

    instance

    obj: any object

    同 include(). 

    min([iterator])

    instance

    iterator: a function object conforming to Function(value, index)

    回来最小值,参见max()。 

    partition([iterator])

    instance

    iterator: a function object conforming to Function(value, index)

    回到五个含有七个Array的Array,第二个Array富含全体调用Iterator再次回到True的成分,第叁个Array包含剩下的因素。要是Iterator未有提交,那么就依靠成分自己判别。 

    pluck(propertyName)

    instance

    propertyName name of the property that will be read from each element. This can also contain the index of the element

    归来每种成分的钦命属性名的属性的值组成的Array。 

    reject(iterator)

    instance

    iterator: a function object conforming to Function(value, index)

    和  findAll()相反(再次回到全体等于false的要素卡塔尔. 

    select(iterator)

    instance

    iterator: a function object conforming to Function(value, index)

    同 findAll(). 

    sortBy(iterator)

    instance

    iterator: a function object conforming to Function(value, index)

    基于种种成分调用Iterator重回的值进行排序重返二个Array。 

    toArray()

    instance

    (none)

    回去由集结全部因素结合的三个Array。 

    zip(collection1[, collection2 [, ... collectionN [,transform]]])

    instance

    collection1 .. collectionN: enumerations that will be merged, transform: a function object conforming to Function(value, index)

    集合种种给出的聚众到当下聚焦。合併操作重临三个新的array,那一个array的因素个数和原集结的要素个数相仿,那个array的各样成分又是一个子array,它合并了装有集结中千篇黄金年代律index的元素。假如transform函数被钦点,那么array的种种成分还有只怕会调用transform函数先做处理。例如: [1,2,3].zip([4,5,6], [7,8,9]).inspect() 返回 "[ [1,4,7],[2,5,8],[3,6,9] ]" 

    5.4.3 The Hash object

    Hash对象完成一种Hash结构,也等于一个Key:Value没有错会集。 

    Hash中的每种Item是一个有四个成分的array,前多少个是Key,后五个是Value,每种Item也会有多少个不需加以印证的性质,key和value。 

    Method

    Kind

    Arguments

    Description

    keys()

    instance

    (none)

    归来全部Item的key的会晤的八个array。 

    values()

    instance

    (none)

    归来全部Item的value的聚众的一个array。 

    merge(otherHash)

    instance

    otherHash: Hash object

    联合给出的Hash,再次回到八个新Hash。 

    toQueryString()

    instance

    (none)

    以QueryString这样的样式重返hash中存有的item,举例: 'key1=value1&key2=value2&key3=value3' 

    inspect()

    instance

    (none)

    用生龙活虎种适于的主意展现hash中的key:value对。

    5.4.4 The ObjectRange class

    继承自  Enumerable

    用上、下面际描述三个指标区域。 

    Property

    Type

    Kind

    Description

    start

    (any)

    instance

    range的下面界

    end

    (any)

    instance

    range的上边界

    exclusive

    Boolean

    instance

    决定边界自个儿是或不是range的后生可畏有的。

    Method

    Kind

    Arguments

    Description

    [ctor](start, end, exclusive)

    constructor

    start: the lower bound, end: the upper bound, exclusive: include the bounds in the range?

    创建二个range对象,从start生成到end,这里要注意的是,start和end必段项目黄金年代致,何况该类型要有succ()方法。 

    include(searchedValue)

    instance

    searchedValue: value that we are looking for

    自己顶牛八个value是否在range中。 

    5.4.5 The Class object

    在此个顺序包中 Class 对象在宣称其余的类时候被用到 。用这些目的表明类使得新类支持 initialize() 方法,他起构造方法的法力。

    看上面包车型客车例证

    //declaring the class 

    var MySampleClass = Class.create(); 

     

    //defining the rest of the class implmentation 

    MySampleClass.prototype = { 

     

       initialize: function(message) { 

    this.message = message; 

       }, 

     

       showMessage: function(ajaxResponse) { 

          alert(this.message); 

       } 

    };  

     

    //now, let's instantiate and use one object 

    var myTalker = new MySampleClass('hi there.'); 

    myTalker.showMessage(); //displays alert 

    Method

    Kind

    Arguments

    Description

    create(*)

    instance

    (any)

    概念新类的构造方法。

    5.4.6 The Ajax object

    以此目的被作为别的提供AJAX成效的类的根对象。 

    Property

    Type

    Kind

    Description

    activeRequestCount

    Number

    instance

    正在管理中的Ajax伏乞的个数。

    Method

    Kind

    Arguments

    Description

    getTransport()

    instance

    (none)

    回来新的XMLHttpRequest 对象。

    5.4.7 The Ajax.Responders object

    继承自 Enumerable

    以此指标保障一个在Ajax相关事件发生时将被调用的指标的列表。例如,你要安装一个大局钩子来管理Ajax操作极度,那么您就足以应用那些目的。 

    Property

    Type

    Kind

    Description

    responders

    Array

    instance

    被注册到Ajax事件通报的对象列表。

    Method

    Kind

    Arguments

    Description

    register(responderToAdd)

    instance

    responderToAdd: object with methods that will be called.

    被传到参数的指标应包蕴名如Ajax事件的比比都已措施(如onCreate,onComplete,onException卡塔 尔(英语:State of Qatar)。通信事件引发全体被登记的靶子的合适名称的函数被调用。 

    unregister(responderToRemove)

    instance

    responderToRemove: object to be removed from the list.

     从列表中移除。 

    dispatch(callback, request, transport, json)

    instance

    callback: name of the AJAX event being reported, request: the Ajax.Request object responsible for the event, transport: the XMLHttpRequest object that carried (or is carrying) the AJAX call, json: the X-JSON header of the response (if present) 

    遍历被注册的指标列表,找寻有由callback参数决定的充足函数的目的。然后向那个函数字传送递其余的四个参数,即使Ajax响应中包括三个带有JSON内容的X-JSON HTTP头,那么它会被热行并传到json参数。假设事件是onException,那么transport参数会被那三个代替,json不会传递。 

    5.4.8 The Ajax.Base class

    以此类是其余在Ajax对象中定义的类的基类。 

    Method

    Kind

    Arguments

    Description

    setOptions(options)

    instance

    options: AJAX options

    设定AJAX操作想要的选项。

    responseIsSuccess()

    instance

    (none)

    回到 true 如若AJAX操作成功,不然为 false 。

    responseIsFailure()

    instance

    (none)

    与 responseIsSuccess() 相反。

    5.4.9 The Ajax.Request class

    继承自 Ajax.Base

    封装 AJAX 操作 

    Property

    Type

    Kind

    Description

    Events

    Array

    static

    在AJAX操作中颇负也许报告的事件/状态的列表。那个列表包括: 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 和 'Complete'。

    transport

    XMLHttpRequest

    instance

    承载AJAX操作的 XMLHttpRequest 对象。

    url

    string

    instance

    请求的URL。

    Method

    Kind

    Arguments

    Description

    [ctor](url, options)

    constructor

    url: the url to be fetched, options: AJAX options

    创建这些目的的一个实例,它就要加以的选项下必要url。onCreate事件在调用constructor事被激起。 主要: 假如接收的url受到浏览器的安全设置,他会或多或少效果也不起。 相当多动静下,浏览器不会呈请与当前页面不一样主机(域名)的url。 你最棒只利用当地url来制止约束顾客配置他们的浏览器(多谢Clay)

    evalJSON()

    instance

    (none)

    以此艺术显明不会被外表调用。它在Ajax响应中包罗X-JSON HTTP头时用来内部调用施行这个内容。

    evalReponse()

    instance

    (none)

    那也方法鲜明不会被外表调用,假设Ajax响应含有叁个值为text/javascript的Cotent-Type头,那么那几个主意就用被调用试行响应体。

    header(name)

    instance

    name: HTTP header name

    引用Ajax响应的头的剧情,在Ajax访谈停止后再调用这么些主意。

    onStateChange()

    instance

    (none)

    其大器晚成办法日常不会被表面调用。 当AJAX央求状态纠正的时候被那个目的自己调用。

    request(url)

    instance

    url: url for the AJAX call

    以此办法平日不会被外表调用。已经在构造方法中调用了。

    respondToReadyState(readyState)

    instance

    readyState: state number (1 to 4)

    其后生可畏办法平时不会被表面调用。 当AJAX央求状态更改的时候被这些目的自身调用。

    setRequestHeaders()

    instance

    (none)

    本条点子常常不会被表面调用。 被这么些指标自身调用来配置在HTTP央求要发送的HTTP报头。

    The options argument object

    An important part of the AJAX operations is the options argument. There's no options class per se. Any object can be passed, as long as it has the expected properties. It is common to create anonymous objects just for the AJAX calls. 

    Property

    Type

    Default

    Description

    method

    String

    'post'

    HTTP 乞请形式。

    parameters

    String

    ''

    在HTTP恳求中传唱的url格式的值列表。

    asynchronous

    Boolean

    true

    钦点是不是做异步 AJAX 央浼。

    postBody

    String

    undefined

    在HTTP POST的场馆下,传入诉求体中的内容。

    requestHeaders

    Array

    undefined

    和要求一齐被传到的HTTP底部列表, 那个列表必须带有偶数个类型, 任何奇数项目是自定义的头顶的名目, 接下来的偶数项目使那么些底部项指标字符串值。 例子:['my-header1', 'this is the value', 'my-other-header', 'another value'] 

    onXXXXXXXX

    Function(XMLHttpRequest, Object)

    undefined

    在AJAX央求中,当相应的事件/状态形成的时候调用的自定义方法。 举例 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 那几个主意将被盛传二个参数, 这么些参数是承载AJAX操作的 XMLHttpRequest 对象,另贰个是包蕴被施行X-JSON响应HTTP头。

    onSuccess

    Function(XMLHttpRequest, Object)

    undefined

    当AJAX伏乞成功做到的时候调用的自定义方法。 这些办法将被传出两个参数, 那几个参数是承载AJAX操作的 XMLHttpRequest 对象,另二个是带有被实行X-JSON响应HTTP头。

    onFailure

    Function(XMLHttpRequest, Object)

    undefined

    当AJAX须求达成但现身错误的时候调用的自定义方法。那一个方法将被流传一个参数, 那么些参数是承载AJAX操作的 XMLHttpRequest 对象,另二个是富含被实践X-JSON响应HTTP头。

    onException

    Function(Ajax.Request, exception)

    undefined

    当二个在顾客端推行的Ajax发生像空头响应或无效参数那样的卓殊情况时被调用的自定义函数。它选取多个参数,包罗十分Ajax操作的Ajax.Request对象和足够对象。

    insertion

    an Insertion class

    undefined

    一个能决定如何插入新剧情的类,能 Insertion.Before, Insertion.Top, Insertion.Bottom, 或 Insertion.After. 只可以动用于Ajax.Updater 对象. 

    evalScripts

    Boolean

    undefined, false

    决定当响应达到的时候是否进行个中的脚本块,只在 Ajax.Updater 对象中运用。

    decay

    Number

    undefined, 1

    决定当最后三回响应和前三回响应相相同的时候在 Ajax.PeriodicalUpdater 对象中的减漫访谈的次数, 举例,借使设为2,后来的根基代谢和事先的结果意气风发致, 那些指标将拭目以俟2个设定的时光间距举办下一回刷新, 就算又一遍相像, 那么将静观其变4次,等等。 不设定那些只,大概安装为1,将制止访谈频率变慢。

    frequency

    Number

    undefined, 2

    用秒表示的幼功代谢间的间隔,只好使用于 Ajax.PeriodicalUpdater  对象。 

    5.4.10 The Ajax.Updater class

    继承自 Ajax.Request

    当呼吁的url重回豆蔻年华段HTML而你想把它平昔放置到页面中一个特定的要素的时候被用到。 如果url的归来<script> 的块何况想在吸纳届期就举办它的时候也能够行使该对象。含有脚本的时候利用 evalScripts 选项。 

    Property

    Type

    Kind

    Description

    containers

    Object

    instance

    以此指标包括多个属性:AJAX伏乞成功实行的时候用到 containers.success , 不然的话用到 containers.failure 。

    Method

    Kind

    Arguments

    Description

    [ctor](container, url, options)

    constructor

    container:this can be the id of an element, the element object itself, or an object with two properties - object.success element (or id) that will be used when the AJAX call succeeds, and object.failure element (or id) that will be used otherwise. url: the url to be fetched, options: AJAX options

    创造三个用给定的筛选诉求给定的url的一个实例。

    updateContent()

    instance

    (none)

    以此格局日常不会被表面调用。 当响应到达的时候,被这么些指标本人调用。 它会用HTML更新适当的因素可能调用在 insertion 选项中传来的点子-这么些措施将被盛传七个参数, 被更新的要素和响应文件。 

    5.4.11 The Ajax.PeriodicalUpdater class

    继承自Ajax.Base

    本条类重复生成并使用 Ajax.Updater 对象来刷新页面中的四个因素。或许施行Ajax.Updater 可以实行的别的职责。越来越多新闻参照他事他说加以考查 Ajax.Updater 参考 。 

    Property

    Type

    Kind

    Description

    container

    Object

    instance

    本条值将平素传入Ajax.Updater的构造方法。

    url

    String

    instance

    这些值将一向传入Ajax.Updater的构造方法。

    frequency

    Number

    instance

    两回刷新之间的间距 (不是成效) ,以秒为单位。 暗许2秒。 This 当调用 Ajax.Updater 对象的时候,那些数将和日前的 decay 相乘。 

    decay

    Number

    instance

    重负试行职分的时候保持的衰落水平。

    updater

    Ajax.Updater

    instance

    末段贰回选拔的 Ajax.Updater 对象

    timer

    Object

    instance

    通报对象该下三遍立异时用到的JavaScript 沙漏。

    Method

    Kind

    Arguments

    Description

    [ctor](container, url, options)

    constructor

    container:this can be the id of an element, the element object itself, or an object with two properties - object.success element (or id) that will be used when the AJAX call succeeds, and object.failure element (or id) that will be used otherwise. url: the url to be fetched, options: AJAX options

    创办三个用给定的抉择央求给定的url的三个实例。

    start()

    instance

    (none)

    那一个方法平时不会被外表调用。 对象为了开端周期性实施任务的时候调用的措施。 

    stop()

    instance

    (none)

    使对象截至实行周期职责。结束后,如若有onComplete选项,那么吸引callback。 

    updateComplete()

    instance

    (none)

    以此办法常常不会被外表调用。 被眼下的 Ajax.Updater 使用,当叁遍倡议停止的时候,它被用作布署下二回倡议。 

    onTimerEvent()

    instance

    (none)

    其风流洒脱措施日常不会被表面调用。当到下二次更改时被里面调用。 

    5.4.12 The Element object

    其一目标提供在操作DOM凉月素时行使的作用性方法。

    Method

    Kind

    Arguments

    Description

    addClassName(element, className)

    instance

    element: element object or id, className: name of a CSS class

    将交给的className增添到目的的className属性中。

    classNames(element)

    instance

    element: element object or id

    回来二个Element.ClassName的对象表示CSS 给出对象有的class names。

    cleanWhitespace(element)

    instance

    element: element object or id

    驱除对象子成分中有所空白的text node。

    empty(element)

    instance

    element: element object or id

    回到二个布尔值提醒对象为空或唯有空白字符。

    getDimensions(element)

    instance

    element: element object or id

    回到对象的尺寸,重回值有五个脾性,height和width。 

    getHeight(element)

    instance

    element: element object or id

    重返成分的 offsetHeight 。

    getStyle(element, cssProperty)

    instance

    element: element object or id, cssProperty name of a CSS property (either format 'prop-name' or 'propName' works).

    回到给定对象的CSS属性值或从不点名cssProperty时重返null。

    hasClassName(element, className)

    instance

    element: element object or id, className: name of a CSS class

    归来 true 假若成分的类名中含有给定的类名

    hide(elem1 [, elem2 [, elem3 [...]]])

    instance

    elemN: element object or id

    透过设定style.display 为 'none'来掩藏每种传入的要素。 

    makeClipping(element)

    instance

    element: element object or id

    能过设定overflow的值设定内容溢出剪辑。

    makePositioned(element)

    instance

    element: element object or id

    变动对象的style.position为'relative'。

    remove(element)

    instance

    element: element object or id

    从document对象中剔除内定的因素。

    removeClassName(element, className)

    instance

    element: element object or id, className: name of a CSS class

    从要素的类名中剔除给定的类名。

    scrollTo(element)

    instance

    element: element object or id

    滚动window到指标的职务。

    setStyle(element, cssPropertyHash)

    instance

    element: element object or id, cssPropertyHash Hash object with the styles to be applied.

    安份守己cssPropertyHash参数给目的设置CSS属性值。

    show(elem1 [, elem2 [, elem3 [...]]])

    instance

    elemN: element object or id

    用设定它的 style.display 为 ''来浮现各样传入的成分。 

    toggle(elem1 [, elem2 [, elem3 [...]]])

    instance

    elemN: element object or id

    切换每八个传到元素的可视性。

    undoClipping(element)

    instance

    element: element object or id

    style.overflow的值重返上二个设定值。

    undoPositioned(element)

    instance

    element: element object or id

    免除对象的 style.position 为 ''

    update(element, html)

    instance

    element: element object or id, html: html content

    用给出的HTML参数替换对象的innerHTML,借使HTML参数中饱含<script>,那么它们不会被含有进去,不过会执行。 

    visible(element)

    instance

    element: element object or id

    回到一个布尔值提示对象可不可以知道。

    5.4.13 The Element.ClassNames class

    继承自  Enumerable

    在贰个对象中意味着CSS class names的聚焦。 

    Method

    Kind

    Arguments

    Description

    [ctor](element)

    constructor

    element: any DOM element object or id

    开创二个对象,给出对象的CSS class names被展现在那几个ClassNames对象中。 

    add(className)

    instance

    className: a CSS class name

    把CSS class name满含进对象的class names 列表。 

    remove(className)

    instance

    className: a CSS class name

    从指标的class names列表中移除className 

    set(className)

    instance

    className: a CSS class name

    设定目的CSS class name为className,移除此外class names。 

    5.4.14 The Abstract object

    其一指标是以此程序包中其余类的根。它未有任何性质和格局。在这里个目的中定义的类能够被视为守旧的抽象类。

    5.4.15 The Abstract.Insertion class

    其生机勃勃类被充当其余提供动态内容插入成效的类的基类,它像四个抽象类雷同被运用。

    Method

    Kind

    Arguments

    Description

    [ctor](element, content)

    constructor

    element: element object or id, content: HTML to be inserted

    开创二个得以扶持插入动态内容的目的。

    contentFromAnonymousTable()

    instance

    (none)

    对content通过无名氏表格形成三个Node数组。

    Property

    Type

    Kind

    Description

    adjacency

    String

    static, parameter

    那几个参数钦点相对于给定成分,内容将被停放的职分。 或者的值是: 'beforeBegin', 'afterBegin', 'beforeEnd', 和 'afterEnd'.

    element

    Object

    instance

    与插入物做参谋成分对象。

    content

    String

    instance

    被插入的 HTML 。

    5.4.16 The Insertion object

    以此目的是其他相同意义的根。它未有其他性质和格局。在此个目的中定义的类仍然是能够被视为守旧的抽象类。

    5.4.17 The Insertion.Before class

    继承自 Abstract.Insertion

    在给定成分最早标志的前头插入HTML。

    Method

    Kind

    Arguments

    Description

    [ctor](element, content)

    constructor

    element: element object or id, content: HTML to be inserted

    持续自   Abstract.Insertion. 创造一个足以协理插入动态内容的指标。

    下边包车型大巴代码

    <br>Hello,  

    <span id="person" style="color:red;"> 

    Wiggum. Hows’it going? 

    </span> 

    <script> new Insertion.Before('person', 'Chief '); </script> 

     

    将HTML变成:

    <br>Hello, Chief  

    <span id="person" style="color:red;">Wiggum. How’s it going?</span> 

    The Insertion.Top class

    5.4.18 The Insertion.Top class

    继承自 Abstract.Insertion

    在给定成分第叁个头节点地点插入 HTML。内容将身处成分的领头标识的紧前面。

    Method

    Kind

    Arguments

    Description

    [ctor](element, content)

    constructor

    element: element object or id, content: HTML to be inserted

    后续自  Abstract.Insertion. 成立多少个方可支持插入动态内容的指标。

    上边包车型大巴代码

    <br>Hello,  

    <span id="person" style="color:red;"> 

    Wiggum. How’s it going? 

    </span> 

    <script> new Insertion.Top('person', 'Mr. '); </script> 

    将把 HTML 变为:

    <br>Hello, <span id="person" style="color:red;">Mr. Wiggum. How’s it going?</span>

    5.4.19 The Insertion.Bottom class

    继承自Abstract.Insertion

    在给定成分最终三个子节点地点插入 HTML。内容将放在成分的扫尾标识的紧前边。

    Method

    Kind

    Arguments

    Description

    [ctor](element, content)

    constructor

    element: element object or id, content: HTML to be inserted

    Inherited from Abstract.Insertion. Creates an object that will help with dynamic content insertion.

    下边包车型大巴代码

    <br>Hello,  

    <span id="person" style="color:red;"> 

    Wiggum. Hows it going? 

    </span> 

    <script>  

    new Insertion.Bottom('person', " What's up?");  

    </script> 

    将把 HTML 变为:

    <br>Hello, <span id="person" style="color:red;">Wiggum. How’s it going? What’s up?</span>

    5.4.20 The Insertion.After class

    继承自Abstract.Insertion

    在给定成分甘休标识的末端插入HTML。

    Method

    Kind

    Arguments

    Description

    [ctor](element, content)

    constructor

    element: element object or id, content: HTML to be inserted

    Inherited from Abstract.Insertion. Creates an object that will help with dynamic content insertion.

    上边的代码

    <br>Hello, 

     <span id="person" style="color:red;">Wiggum. How’s it going?</span> 

    <script>  

    new Insertion.After('person', ' Are you there?');  

    </script> 

    将把 HTML 变为

    <br>Hello, <span id="person" style="color:red;">Wiggum. Hows it going?

    </span> Are you there?

    5.4.21 The Field object

    本条约标提供操作表单中的输入项指标功效性方法。

    Method

    Kind

    Arguments

    Description

    clear(field1 [, field2 [, field3 [...]]])

    instance

    fieldN: field element object or id 

    祛除传入表单中项目成分的值。

    present(field1 [, field2 [, field3 [...]]])

    instance

    fieldN: field element object or id 

    唯有在具有的表单项目都不为空时重临 true 。

    focus(field)

    instance

    field: field element object or id

    运动主题到给定的表单项目。

    select(field)

    instance

    field: field element object or id

    选料支持项目值选取的表单项指标值。

    activate(field)

    instance

    field: field element object or id

    移步大旨何况接纳扶助项目值采取的表单项指标值。

    5.4.21 The Form object

    那一个指标提供操作表单和她们的输入成分的作用性方法。

    Method

    Kind

    Arguments

    Description

    serialize(form)

    instance

    form: form element object or id

    再次来到url参数格式的花色名和值的列表, 如'田野同志1=value1&田野2=value2&田野同志3=value3'。

    findFirstElement(form)

    instance

    form: form element object or id

    回来Form中率先个Enable的靶子。

    getElements(form)

    instance

    form: form element object or id

    回来包蕴全部在表单中输入项指标 Array 对象。

    getInputs(form [, typeName [, name]])

    instance

    form: form element object or id, typeName: the type of the input element, name: the name of the input element.

    回到一个 Array 包罗全体在表单中的 <input> 成分。 其它, 这些列表可以对成分的连串或名字属性举办过滤。

    disable(form)

    instance

    form: form element object or id

    使表单中的全部输入项目无效。

    enable(form)

    instance

    form: form element object or id

    使表单中的全数输入项目有效。

    focusFirstElement(form)

    instance

    form: form element object or id

    激活第多少个表单中可视的,有效的输入项目。

    reset(form)

    instance

    form: form element object or id

    重新载入参数表单。和调用表单对象的 reset() 方法同样。

    5.4.22 The Form.Element object

    本条指标提供表单对象中的可视和非可视成分的功能性方法。

    Method

    Kind

    Arguments

    Description

    serialize(element)

    instance

    element: element object or id

    回到元素的 名称=值 对, 如 'elementName=elementValue'。

    getValue(element)

    instance

    element: element object or id

    回到成分的值。

    5.4.23 The Form.Element.Serializers object

    其一目的提供了里面接纳的用来提携深入解析出表单成分的方今值的片段有效的秘诀。

    Method

    Kind

    Arguments

    Description

    inputSelector(element)

    instance

    element: object or id of a form element that has the checked property, like a radio button or checkbox.

    归来带有成分名称和值的 Array , 如 ['elementName', 'elementValue']

    textarea(element)

    instance

    element: object or id of a form element that has the value property, like a textbox, button or password field.

    归来带有成分名称和值的 Array , 如 ['elementName', 'elementValue']

    select(element)

    instance

    element: object of a <select> element

    归来带有成分名称和颇负被接收的选料的值或文本的 Array , 如 ['elementName', 'selOpt1 selOpt4 selOpt9']

    5.4.24 The Abstract.TimedObserver class

    本条类是用于其余监听贰个要素的值(大概其余类中涉嫌的特性)变化的类的基类,这么些类像三个抽象类同样被运用。

    子类能够被成立来监听如输入项目值,或style属性,或表格的行数,恐怕别的任何对追踪变化有关的东西。

    子类必得落实那几个法子来支配哪些才是被监听的要素的一时值。 

    Method

    Kind

    Arguments

    Description

    [ctor](element, frequency, callback)

    constructor

    element: element object or id, frequency: interval in seconds, callback: function to be called when the element changes

    开创叁个监听成分的对象。

    getValue()

    instance, abstract

    (none)

    子类必需落实这一个主意以瘊定什么这一个因素被监视的脚下值。

    registerCallback()

    instance

    (none)

    本条点子平时不会被表面调用。 被那一个目的自身调用来起头监听那三个成分。 

    onTimerEvent()

    instance

    (none)

    这一个措施平常不会被外表调用。 被那几个目的自身调用来周期性的检讨这一个成分。 

    Property

    Type

    Description

    element

    Object

    被监听的因素对象。

    frequency

    Number

    历次检查中的以秒为单位的时日间距。

    callback

    Function(Object, String)

    比方成分退换这几个方式就能够被调用。 会选用到成分对象和新值作为参数。

    lastValue

    String

    要素被查验的终极一个值。

    5.4.25 The Form.Element.Observer class

    继承自 Abstract.TimedObserver

    Abstract.TimedObserver 的三个兑现类用来监听表单输入项指标值的转移。当您想监听一个未有带报告值变化事件的要素的时候利用这些类。不然的话使用 Form.Element.伊夫ntObserver 类取代。

    Method

    Kind

    Arguments

    Description

    [ctor](element, frequency, callback)

    constructor

    element: element object or id, frequency: interval in seconds, callback: function to be called when the element changes

    继续自 Abstract.提姆edObserver. 创造一个监听成分值属性的对象。

    getValue()

    instance

    (none)

    回来成分的值。

    5.4.26 The Form.Observer class

    继承自 Abstract.TimedObserver

    Abstract.TimedObserver 的二个落到实处类用来监听表单中任何数据项的值的更换。当你想监听三个从未有过带报告值变化事件的元素的时候使用那么些类。 不然的话使用类Form.EventObserver 取代。

    Method

    Kind

    Arguments

    Description

    [ctor](form, frequency, callback)

    constructor

    form: form object or id, frequency: interval in seconds, callback function to be called when any data entry element in the form changes

    后续自 Abstract.TimedObserver. 创造一个监听表单变化的靶子。

    getValue()

    instance

    (none)

    再次回到全体表单数据的风流倜傥系列值。

    5.4.27 The Abstract.EventObserver class

    以此类被作为别的一些类的基类,这几个类具备在二个因素的值改动事件产生的时候实践五个回调方法这么的功力。

    类 Abstract.伊夫ntObserver 的八个对象能够绑定到一个要素上,不是一个帮别的的擦出了,而是服从他们交给成分的相继实行那么些回调方法。

    单选按键和复选框的接触事件是 onclick ,而文本框和下拉列表框/下拉列表框的是 onchange 。  

    Method

    Kind

    Arguments

    Description

    [ctor](element, callback)

    constructor

    element: element object or id, callback: function to be called when the event happens

    创制监听成分的对象。

    getValue()

    instance,abstract

    (none)

    子类必需兑现这几个措施以瘊定什么那一个因素被监视的日前值。

    registerCallback()

    instance

    (none)

    那个主意平时不会被外表调用。 被对象调用来把温馨绑定到成分的事件上。 

    registerFormCallbacks()

    instance

    (none)

    其大器晚成措施平常不会被表面调用。 被对象调用来把温馨绑定到表单中的每四个数量项成分的风云上。 

    onElementEvent()

    instance

    (none)

    本条形式日常不会被表面调用。 将被绑定到成分的事件上。 

    Property

    Type

    Description

    element

    Object

    被监听的元素对象。

    callback

    Function(Object, String)

    假定成分改动就调用的措施。会吸收接纳到成分对象和新值作为参数。

    lastValue

    String

    要素被核实的末梢三个值。

    5.4.28 The Form.Element.EventObserver class

    继承自 Abstract.EventObserver

    Abstract.EventObserver 的三个完成类,它在监测到表单中数量项成分的值更改的对应事件时候试行叁个回调方法。 假使成分未有其余报告生成的风浪,那么你能够动用 Form.Element.Observer 类替代。

    Method

    Kind

    Arguments

    Description

    [ctor](element, callback)

    constructor

    element: element object or id, callback: function to be called when the event happens

    气冲牛斗自 Abstract.EventObserver。 创造三个监听成分值属性的目的。

    getValue()

    instance

    (none)

    重临成分的值。

    5.4.29 The Form.EventObserver class

    继承自 Abstract.EventObserver

    Abstract.EventObserver 的二个完成类,监听表单对象中带有的别的对象的其余更换,用元素的平地风波检查评定值的变型。假使元素没有别的报告生成的平地风波, 那么你能够选取Form.Observer 类代替。 

    Method

    Kind

    Arguments

    Description

    [ctor](form, callback)

    constructor

    form: form object or id, callback: function to be called when any data entry element in the form changes

    持续自 Abstract.伊芙ntObserver。 创设叁个监听元素值属性的靶子。

    getValue()

    instance

    (none)

    重返全体表单数据的意气风发种类值。

    六:Position 对象 (预备文书档案)

    那个目标提供成千上万和要素地点相关的艺术。

    Method

    Kind

    Arguments

    Description

    prepare()

    instance

    (none)

    调度 deltaX 和 deltaY 属性来和谐在滚动地方中的变化。 记得在页面滚动之后的另向外调拨运输用的withinIncludingScrolloffset 在此以前调用这几个方法。

    realOffset(element)

    instance

    element: object

    归来这些因素的准确性滚动偏差的 Array 对象, 包罗具有影响因素的轮转偏差。结果数组近似 [total_scroll_left, total_scroll_top]

    cumulativeOffset(element)

    instance

    element: object

    回这一个成分的不错滚动偏差的 Array 对象, 包括别的被停放的父成分强加偏差。结果数组相像 [total_offset_left, total_offset_top]

    within(element, x, y)

    instance

    element: object, x and y: coordinates of a point

    测量检验给定的点的坐标是或不是在给定的要素的外表矩形范围以内。

    withinIncludingScrolloffsets(element, x, y)

    instance

    element: object, x and y: coordinates of a point

     测量检验给定的点的坐标是还是不是在加以的因素的表面矩形范围以内(富含scroll offsets卡塔 尔(阿拉伯语:قطر‎。

    overlap(mode, element)

    instance

    mode: 'vertical' or 'horizontal', element: object

    在调用那些主意以前必要调用within() 。这几个艺术重回0.0到1.0之内的数字,来表示坐标在要素重叠的分数。 举个例证,假设成分是一个边长是100px的圆锥形的DIV,况且位居(300, 300), 然后 within(divSquare, 330, 330);overlap('vertical', divSquare); 会返回0.10,意思是非常点位于DIV最上部边框以下 一成 (30px) 的岗位上。 

    clone(source, target)

    instance

    source: element object or id, target: element object or id

    改造指标成分的深浅尺寸和岗位与源成分的同等。

    中文版:THIN 最终更新:二零零六-3-31 prototype.js 是怎样? 万大器晚成您未曾运用过著名的prototype.js,那么让自家来告诉你,prototype.js是由Sa...

    本文由新葡亰496net发布于服务器网络,转载请注明出处:新葡亰496net:4手册_prototype_脚本之家,js使用详明

    关键词: