【prototype】笔记3-优快云博客

本文通过具体示例介绍了Prototype.js库的应用，包括元素插入、事件监听、表单元素观察、Hash对象操作、对象范围处理及字符串方法使用等，有助于开发者快速掌握并应用到实际项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 >