`
flashdream8
  • 浏览: 675551 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

【prototype】笔记3

阅读更多

1.Insertion

 

<script src="prototype.js"></script>
<div id="div1" style="font-size:20px;font-weight:bold">
<hr>基线<hr>
</div>
<script> 

new Insertion.After("div1", " After"); 
new Insertion.Bottom("div1", " Bottom"); 
new Insertion.Top("div1", " Top"); 
new Insertion.Before("div1", " Before"); 
</script>

 

 

2. Even Observe

 

 

<script src="prototype.js"></script>
<input type="button" id="btn" value="click" />
<input type="button" id="reg" value="register" />
<input type="button" id="unreg" value="unregister" />
<div id="status"></div>
<script>
function test() {
    alert("clicked");
}

Event.observe("reg", "click", function () {
        Event.observe("btn", "click", test, false);
        $("status").innerHTML = "event registered";
    }, false
);
Event.observe("unreg", "click", function () {
        Event.stopObserving("btn", "click", test, false);
        $("status").innerHTML = "event unregistered";
    }, false
);
</script>

 

 

3.  Form.Element.Observer

<script src="prototype.js"></script>
<form id="frm">
<div id="div1">
    <input type="text" id="txt" name="txt" onchange="return alert('Now')"/>
    <input type="text" id="txt2" name="txt2" />
    <input type="button" id="btn" name="btn"
        value="click" onclick="test(event)" />
    <input type="submit" />
    <a href="http://www.google.com" onclick="test2(event)">Google</a>
    <input type="button" id="btn1" name="btn1"
    value="click" onclick="test3(event)" />
</div>
</form>
<script>
function test(evt) {
    alert($("btn") === Event.element(evt));
}

function test2(evt) {
    alert("clicked");
    Event.stop(evt);
}

function test3(evt) {
    alert($("div1") === Event.findElement(evt, "div"))
}

new Form.EventObserver("frm", function () {
        alert("form changed");
    }
);

new Form.Element.EventObserver("txt", function () {
        alert("txt changed");
    }
);


new Form.Observer("frm", 1, function () {
        alert("form changed");
    }
);

new Form.Element.Observer("txt", 1, function () {
        alert("changed");
    }
);
</script>

 

 

4. Hash

 

<script src="prototype.js"></script>
<script>
// 创建一个对象
var obj = {
    key1: 1,
    key2: 2,
    key3: 3
};

// 将其转换为Hash对象
var hash = $H(obj);
// 输出 #<Hash: {'key1': 1, 'key2' : 2, 'key3': 3}>
// 输出key1=1&key2=2&key3=3
alert("hash.inspect()"+hash.inspect()+"\r\ntoQueryString:    "+hash.toQueryString()+"\r\n"+"values:   "+hash.values()+"\r\n keys:    "+hash.keys());
</script>

 

5.ObjectRange

 

<script src="prototype.js"></script>
<div id="div1" style="font-size:20px;font-weight:bold">
ObjectRange
</div>
<script> 
var range = $R(1, 10, false);
var range2 = $R(1, 10, true);

alert(range.merge(range2));
// true
alert(range.include(1));
// true
alert(range.include(5));
// true
alert(range.include(10));

// true
alert(range2.include(1));
// true
alert(range2.include(5));
// false
alert(range2.include(10));
</script>

 

 

6 . String

 

<html>
<head>
<title>String Test</title>
<script src="prototype.js"></script>
<script>
function testStrip()
{
    var str=new String('       wanfangdata      ');
    alert(str.strip());  
    }
    function teststripTags()
{
    var str=new String('<html>2002<head>2005<body> ');
    alert(str.stripTags());  
    }
    function testtruncate()
{
    var str=new String('king123456789987654321');
    alert(str.truncate(8,'*'));  
    }
    
    function testcamelize()
    {
        var str=new String('Background-color')
        alert(str.camelize())
        }
        function testcapitalize()
    {
            var str=new String('back');
    alert(str.capitalize());
        }
        
function testDasherize()
{
    var str=new String('Hello_World');
    alert(str.dasherize());  
    }

function testinspect()
{
    alert("sdfj\"sfa".inspect() );
    }
    function testgsub()
    {
        alert("skdjfAsfdjkAdk".gsub(/A/,function(match) {return match[0].toLowerCase()}));
        }
        function testScan()
        {
            alert("skdjfAsfdjkAdk".scan(/A/,function(){alert('have a A')}));
            }
    function testUnderscore()
    {alert('borderBottomWidth'.underscore());

        }
        function testTemplate()
        {var temp = new Template("被替换");
             
            alert(temp.evaluate('aAklkljkjAkka'));
            }
            function testTimes()
        {
             
            alert('['+'Q'.times(10)+']');
            }
            function testEval()
            {
                var str="<script"+">alert('ok');<"+"/script>";
                str.evalScripts();
                }
</script>
<body>
<p><input type=button value='Strip' onclick='testStrip();' />"       wanfangdata         "  ---> 'wanfangdata'去掉两边的空格</p><br/>
<p><input type=button value='stripTags' onclick='teststripTags();' />“&lt;html&gt;2002&lt;head&gt;2005&lt;body&gt;” ---> '20022005'去掉html标签</p><br/>
<p><input type=button value='truncate' onclick='testtruncate();' />“123456789>987654321” ---> '123456>'字符串截断</p><br/>
<p><input type=button value='camelize' onclick='testcamelize();' />Background-color --->BackgroundColor</p><br/>
<p><input type=button value='capitalize' onclick='testcapitalize();' />back--->Back</p><br/>
<p><input type=button value='inspect' onclick='testinspect();' />sdfj\"sfa--->sdfj"sfa</p><br/>
<p><input type=button value='testgsub' onclick='testgsub();' />skdjfAsfdjkAdk--->skdjfasfdjkadk</p><br/>
<p><input type=button value='testScan' onclick='testScan();' />字符串检测</p><br/>
<p><input type=button value='testTemplate()' onclick='testTemplate();' />字符串模板</p><br/>
<p><input type=button value='testTimes' onclick='testTimes();' />字符串重复</p><br/>
<p><input type=button value='执行脚本' onclick='return testEval();' />执行字符串脚本</p><br/>
<p><input type=button value='testUnderscore' onclick='testUnderscore();' />'borderBottomWidth’.underscore()  -> 'border_bottom_width’
</p><br/>
<p><input type=button value='testDasherize' onclick='testDasherize();' />'Hello_World'  ---> 'Hello-World'把下划线转化成-</p><br/>
</body>
</html>

 

 

 

<转自:http://www.cnblogs.com/me-sa/archive/2007/04/24/724660.html >

 

分享到:
评论

相关推荐

    prototype笔记(9)----结合Prototype和JSON开发AJAX

    在本篇"prototype笔记(9)----结合Prototype和JSON开发AJAX"中,我们将深入探讨如何利用Prototype JavaScript库与JSON(JavaScript Object Notation)技术来高效地开发异步JavaScript应用程序,也就是我们常说的AJAX...

    Prototype学习笔记(一)(二)

    Prototype学习笔记(一)(二)涵盖了这一主题的深入探讨,旨在帮助开发者更好地理解和利用这个特性。在本篇文章中,我们将详细阐述Prototype的核心概念、作用以及如何在实际编程中应用。 首先,Prototype是...

    prototype开发笔记.doc

    Prototype 是一个广泛使用的JavaScript库,由Sam Stephenson创建,旨在简化和增强JavaScript的原生功能,特别是对于构建富客户端Web应用程序。它通过提供强大的对象扩展、DOM操作、以及Ajax交互等工具,使得开发者...

    Prototype开发笔记.doc

    《Prototype开发笔记》是关于JavaScript框架Prototype的一份详细文档,主要涵盖了该框架的基本概念、核心功能和使用方法。Prototype是一个由Sam Stephenson编写的JavaScript库,它的设计目标是提升Web应用的交互性和...

    prototype学习笔记

    这篇"prototype学习笔记"可能探讨了如何利用原型链实现面向对象编程的关键技术。以下是对这个主题的详细解析。 首先,理解`prototype`的基本含义是关键。在JavaScript中,每个函数都有一个`prototype`属性,这个...

    prototype+开发笔记

    本笔记将深入探讨`Prototype`机制及其在实际开发中的应用。首先,我们从基本概念出发,理解`Prototype`的核心原理。 `Prototype`是JavaScript中每个对象所固有的特性,它为对象提供了继承的能力。在JavaScript中,...

    prototype.js开发笔记

    ### Prototype.js 开发笔记知识点详解 #### 1.1 Prototype.js 是什么? Prototype.js 是一个由 Sam Stephenson 开发的 JavaScript 库。该库的主要目的是简化 Web 应用程序的开发过程,尤其针对那些需要高度交互性...

    prototype 开发应用手册,笔记,prototype.js文件下载

    《Prototype开发应用手册:深入解析与实践》 Prototype是一个强大的JavaScript库,由Sam Stephenson创建,旨在提升JavaScript的开发效率,提供丰富的类和函数扩展,为JavaScript编程带来面向对象的特性。在本手册中...

    prototype1.4.0开发笔记

    万一你没有使用过大名鼎鼎的prototype.js,那么让我来告诉你,prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,而且兼容标准的类库,能帮助你轻松建立有高度互动的web2.0特性的富客户端页面。...

    Prototype学习笔记(最新整理)

    ### Prototype学习笔记(最新整理) #### 1. Prototype是什么? Prototype是一个由Sam Stephenson编写的JavaScript库,旨在简化客户端脚本编程,使开发者能够轻松创建动态的、交互式的Web应用程序。该库通过提供一...

    prototype开发笔记

    【Prototype开发笔记】 在JavaScript的世界里,Prototype是一个非常重要的库,它由Sam Stephenson编写,为Web应用程序提供了丰富的功能和工具。Prototype的核心理念是通过增强JavaScript的原生对象和引入面向对象的...

    prototype.js开发笔记.doc

    ### prototype.js开发笔记知识点概述 #### 1.1 Prototype是什么? Prototype是一个JavaScript库,由Sam Stephenson编写。该库提供了一系列的功能,旨在简化并增强Web应用程序的开发过程,特别是那些需要与用户高度...

    prototype.js开发笔记.pdf

    Prototype.js开发笔记 Prototype.js是一个JavaScript库,由Sam Stephenson编写,用于简化JavaScript编程,提供了许多有用的函数和方法,以帮助开发者快速构建Web应用程序。下面是Prototype.js的开发笔记,涵盖了该...

    javascript prototype原型操作笔记.docx

    3. **方法重写**: - 在 `benbenxiong` 实例中,我们重写了 `SayHello` 方法。这意味着对于 `benbenxiong` 实例来说,将调用这个新的方法,而不是原型上的方法。 4. **构造函数调用**: - 使用 `call` 方法调用...

Global site tag (gtag.js) - Google Analytics