我的漫漫程序之旅

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

Prototype1.6 实战06 (Element续)

<HTML>
 <HEAD>
  <TITLE>Element 02</TITLE>
  <script src="prototype.js" type="text/javascript"></script>
  <script>
      //Element.childElements() 返回该元素的所有子元素(并按顺序)
      function childElementsTest()
      {
          var ul = $('ul1').childElements();
          ul.each(function(o,index)
          {
            alert("index: " + index + " value: " + o.outerText);
          });
      }
      //previous() 方法返回上一个html元素的对象(注意是同级)
      function previousTest()
      {
          alert($('saying').previous().outerText);
      }
      //里面可以传参数,从0开始，0代表向上一个,以此类推
       function previousTest1()
      {
          alert($('saying').previous(1).outerText);
          //当然也可以直接指定$('saying').previous('h3'); 向上移动到h3元素
          //也可以指定class选择器
          alert($('ida-red').previous('.yummy').outerText); 
      }
        
      function myNextSibling()
      {
          //注意返回的是一个数组
          var li = $('mutsu').nextSiblings();
          li.each(function(i)
          {
            alert(i.outerText);
          });
      }
  </script>
 </HEAD>
 <BODY>
    <ul id="ul1">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <br />
    <input type="button" onclick="childElementsTest();" value="ChildElements test"/>
<hr/>
    <ul id="fruits">   
        <li id="apples">     
            <h3>Apples</h3>     
            <ul id="list-of-apples">       
                <li id="golden-delicious" class="yummy">Golden Delicious</li>       
                <li id="mutsu" class="yummy">Mutsu</li>    
                <li id="mcintosh">McIntosh</li>      
                <li id="ida-red">Ida Red</li>   
            </ul>   
            <p id="saying">An apple a day keeps the doctor away.</p> 
        </li>
    </ul> 
    <br />
    <input type="button" value="previous test" onclick="previousTest();" />
    <input type="button" value="向上找２个" onclick="previousTest1();" />
    <input type="button" value="被观察者" id="b1"/>
    <br />
    <input type="text" id="t1" />
    <br />
    <input type="button" id="b2" value="li的兄弟" onclick="myNextSibling();"/>
        <input type="button" value="我在这" />
 </BODY>
 <script>
    (function(){
        //有点像观察者模式
        $('b1').observe('click',function(event)
        {
            alert('您已经被监视');
            //Event.element(event) 表示被观察者对象
            Event.element(event).value = "完了";
        });

        $('t1').observe('change',function(event)
        {
            alert('值已经改变');
            Event.element(event).value = "";
        });
      })();
 </script>
</HTML>


posted on 2008-07-24 13:12 々上善若水々 阅读(248) 评论(0)  编辑  收藏 所属分类: JavaScript


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