首頁 > Html,Js,Ajax相關, Prototype教學 > 大頭恩之Prototype.js 學習手記(02)

大頭恩之Prototype.js 學習手記(02)

2008年4月23日 imusm 發表評論 閱讀評論

最近心情一直都不好…晚上都失眠…偷懶了好幾天…才再補上第2篇筆記….><
好了..第二個功能是$$()

一開始看到$$()..沒去翻原文說明..還真不知道是在做什麼的…(prototype的作者..你也改一下比較容易明白的符號嘛)

$$()
原文簡單的是說:如果你是一個習慣把css 跟內容分開來撰寫的人,那這個功能可以幫助你很容易去選出你想要的元素
(事實上..我看了範例後..覺得..跟原文解釋..不太能夠合起來..日後實用再試試吧!

那我們來看範例吧!

下载: ex02.php
  1. <script type="text/javascript" src="script/prototype.js"></script>
  2. <script>
  3. function test$$(){
  4. //第一個範例,找到一個div圖層叫loginform的,並回傳表單裡所有的Input物件的值
  5.     var f = $$('div#loginForm .field input');
  6.     var s = '';
  7.     for(var i=0; i<f.length; i++){
  8.         s += f[i].value + '/';
  9.     }
  10.     alert(s); // shows: "joedoe1/secret/"
  11.    
  12. //第2個範例,找到一個div圖層叫loginform的,並回傳表單裡所有的Input物件的值,及回傳物件的名稱
  13.     f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
  14.     s = '';
  15.     for(var i=0; i<f.length; i++){
  16.         s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
  17.     }
  18.     alert(s); //shows: "joedoe1/secret/User name:/Password:/"
  19. }
  20.  
  21.  
  22. </script>
  23. </head>
  24.  
  25. <body>
  26. <div id='loginForm'>
  27.     <div class='field'>
  28.         <span class='fieldName'>User name:</span>
  29.         <input type='text' id='txtName' value='joedoe1'/>
  30.     </div>
  31.     <div class='field'>
  32.         <span class='fieldName'>Password:</span>
  33.         <input type='password' id='txtPass' value='secret' />
  34.     </div>
  35.     <input type='submit' value='login' />
  36. </div>
  37. <input type=button value='test $$()' onclick='test$$();' />
  38. </body>

Popularity: 27% [?]

  • Share/Bookmark

相關文章

Categories: Html,Js,Ajax相關, Prototype教學 Tags: , ,
  1. 目前尚無任何的評論。
  1. 目前尚無任何 trackbacks 和 pingbacks。