我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 39, 文章 - 310, 评论 - 411, 引用 - 0
数据加载中……

Prototype1.6 实战01 <$$>

<HTML>
 <HEAD>
  <TITLE> $$ </TITLE>
<script src="prototype.js" type="text/javascript"></script>
<style>
    .luck
    {
        color:red;
    }
</style>
<script>
    function div$$()
    {
        //$('div') 等同于 document.getElementsByTagName('div')
        var divs = $$('div');
        alert("it's have " + divs.length + " div layer !");
    }
    
    function href$$()
    {    
        //$$('#a1') 等同于 $('a1') 即 document.getElementById('a1') 不过它返回的是一个数组
        var hrefs = $$('#a1');
        //输出链接文本
        alert(hrefs[0].outerText);
    }

    function class$$()
    {    
        //得到所有class样式为luck的元素
        var cls = $$('.luck');
        //注意数组的.size()方法不是原生的,而是prototype类库里面的.等同于.length
        for(var i = 0; i < cls.size(); i ++)
        {
            alert(cls[i]);
        }
    }

    function singleclass$$()
    {
        //所有class为luck的li元素
        var lis = $$('li.luck');
        for(var i = 0; i < lis.size(); i ++)
        {
            //容器标签获得其中文本值的方法outerText,改变值用innerText
            alert(lis[i].outerText);
        }
    }

    function href$$2()
    {
        var hrefs = $$('a[href="#"]');
        //应该是3
        alert(hrefs.size());
    }

    function id$$()
    {
        //#id 标签 形式
        var arr = $('#a1 a','#a2 a');
        alert(arr.size());
    }
</script>
 </HEAD>

 <BODY>
    <div id="d1">I'm div first</div>
    <div id="d2">I'm div second</div>
    <div id="d2">I'm div three</div>
    <input type="button" value="div test <$$('div')>" onclick="div$$();"/>
    <hr />
    <a href="#" id="a1">href1</a>
    <input type="button" value="href test <$$('#a1')>" onclick="href$$();" />
    <hr />
    <input type="text" name="username" class="luck" value="zdw"/> <br />
    <span class="luck">class selector</span> <br />
    <button onclick="class$$();">class test <$$('.luck')></button> 
    <hr />
    <li class="luck">li1</li>
    <li class="luck">li2</li>
    <li class="luck">li3</li>
    <br />
    <button onclick="singleclass$$();">single class test <$$('li.luck')></button>
    <hr/>
    <a href="#" id="a2">href1 为 #</a>
    <a href="#">href2 为 #</a>
    <input type="button" onclick="href$$2();" value="查看所有href属性为#的a标签"/>
    <br />
    <input type="button" onclick="id$$();" value="查看ID为a1和a2的元素" />
 </BODY>
</HTML>

转载请注明出处.

posted on 2008-07-23 09:57 々上善若水々 阅读(211) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。
网站导航: