大頭恩之Prototype.js 學習手記(02)
最近心情一直都不好…晚上都失眠…偷懶了好幾天…才再補上第2篇筆記….><
好了..第二個功能是$$()
一開始看到$$()..沒去翻原文說明..還真不知道是在做什麼的…(prototype的作者..你也改一下比較容易明白的符號嘛)
$$()
原文簡單的是說:如果你是一個習慣把css 跟內容分開來撰寫的人,那這個功能可以幫助你很容易去選出你想要的元素
(事實上..我看了範例後..覺得..跟原文解釋..不太能夠合起來..日後實用再試試吧!
那我們來看範例吧!
<script type="text/javascript" src="script/prototype.js"></script> <script> function test$$(){ //第一個範例,找到一個div圖層叫loginform的,並回傳表單裡所有的Input物件的值 var f = $$('div#loginForm .field input'); var s = ''; for(var i=0; i<f.length; i++){ s += f[i].value + '/'; } alert(s); // shows: "joedoe1/secret/" //第2個範例,找到一個div圖層叫loginform的,並回傳表單裡所有的Input物件的值,及回傳物件的名稱 f = $$('div#loginForm .field input', 'div#loginForm .fieldName'); s = ''; for(var i=0; i<f.length; i++){ s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/'; } alert(s); //shows: "joedoe1/secret/User name:/Password:/" } </script> </head> <body> <div id='loginForm'> <div class='field'> <span class='fieldName'>User name:</span> <input type='text' id='txtName' value='joedoe1'/> </div> <div class='field'> <span class='fieldName'>Password:</span> <input type='password' id='txtPass' value='secret' /> </div> <input type='submit' value='login' /> </div> <input type=button value='test $$()' onclick='test$$();' /> </body>