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

2008-04-232014-04-09 frank

最近心情一直都不好…晚上都失眠…偷懶了好幾天…才再補上第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>

分享此文：