prototype.jsリファレンスユーティリティメソッド
- $〔ページ上の要素にアクセス〕
- $$〔要素＋クラス名〕
- $A〔コレクションオブジェクトを配列として取得〕
- $F=Form.Element.getValue();〔フォーム要素の内容を取得〕
- $H〔ハッシュを作成〕
- $R=new ObjectRange〔指定した範囲のオブジェクトを取得〕
- $w〔ホワイトスペース区切りの文字列から配列を生成〕
- Try.these〔成功するまで指定された処理を繰り返すthese〕
- document.getElementsByClassName〔指定したクラス名のオブジェクトを配列で取得〕
$
ページ上の要素にアクセス
unknown
$(id|element[, id|element, ... ]) → HTMLElement
指定したID名または要素名の要素の集合を取得します。 document.getElementById();の短縮形です。 複数指定する場合はカンマ区切りで指定します。
サンプルを見る<div id="elm"></div>
<p>
<input type="button" onclick="fElement('hide')" value="hide" />
<input type="button" onclick="fElement('show')" value="show" />
</p>
<div id="elmA">div#elmAです。</div>
<div id="elmB">div#elmBです。</div>
<div id="elmC">div#elmCです。</div>
<script type="text/javascript">
$("elm").innerHTML="<p>div#elmです。</p>";
function fElement(bool){
$('elmA', 'elmB', 'elmC').invoke(bool);
}
</script>
$$
要素＋クラス名
unknown
$$(cssSelectors...) → [HTMLElement...]
指定したCSSセレクタの要素の集合を取得します。 第1引数cssSelectorsには、「セレクタ＋ID名」あるいは「セレクタ＋クラス名｝を指定可能です。
サンプルを見る
<ul>
<li>item1</li>
<li class='kakusu'>item2</li>
<li>item3</li>
<li class='kakusu'>item4</li>
<li>item5</li>
</ul>
<script type="text/javascript">
$$('li.kakusu').invoke('hide');
</script>
$A
コレクションオブジェクトを配列として取得
unknown
$A(iterable) → actualArray
指定したコレクションオブジェクトを配列として取得します。 第1引数iterableには、要素名などのコレクションオブジェクトを指定します。
サンプルを見る<textarea id="res_iterable" style="width:80%; height:10em;"></textarea>
<script type="text/javascript">
$("res_iterable").value=$A(document.getElementsByTagName('div')).inspect();
</script>
$F=Form.Element.getValue();
フォーム要素の内容を取得
unknown
$F(element) → value
指定した要素の値を取得します。Form.Element.getValue();の短縮形です。 第1引数elementには、「要素名」または「要素のID名」を指定可能です。
サンプルを見る<form action="#">
<p>名前：<input type="text" id="userName" size="20" value="渋谷 太郎" /></p>
<p>年齢：<input type="text" id="userAge" size="3" value="20" /> 才</p>
<p>性別：
<input type="radio" id="sex1" name="sex" value="male" checked="checked" />男
<input type="radio" id="sex2" name="sex" value="female" />女
</p>
<p>住所：<input type="text" id="userAddr" size="60" value="東京都渋谷区某所" /></p>
<p>職業：<br>
<select id="userJob">
<option value="Employee">会社員</option>
<option value="Student" selected="selected">学生</option>
<option value="Part-time">アルバイト</option>
<option value="Housewife">主婦</option>
<option value="other">その他</option>
</select>
</p>
<p>趣味：<br>
<select id="userHobbies" multiple="multiple">
<option value="Music">音楽</option>
<option value="Movie" selected="selected">映画</option>
<option value="Dance">ダンス</option>
<option value="Karaoke" selected="selected">カラオケ</option>
<option value="other">その他</option>
</select>
</p>
<p>
<input type="button" onclick="fForm()" value="フォーム要素の内容を取得" /><br>
<textarea id="res_form" style="width:90%; height:10em;"></textarea>
</p>
</form>
<script type="text/javascript">
function fForm(){
var s="";
var ary=["userName","userAge","userAddr","userJob","userHobbies","sex1","sex2"];
for(var i=0; i<ary.length; i++){
s+=ary[i]+": "+$F(ary[i])+"\n";
}
$("res_form").value=s;
}
</script>
$H
ハッシュを作成
unknown
$H([obj]) → Hash
指定したオブジェクトから新たなハッシュオブジェクトを生成します。
オプションの第1引数objには、ハッシュにするオブジェクト、あるいはオブジェクト名を指定します。 省略した場合は、空のハッシュオブジェクトが生成されます。
サンプルを見る<!-- 例1 --> <textarea id="res_hash" style="width:90%;"></textarea> <script type="text/javascript"> var h=$H({id:"1", name:"userA", age:"20"}); $("res_hash").value=h.toQueryString(); /* id=1&name=userA&age=20 */ </script> <!-- 例2 --> <textarea id="res_hash2" style="width:90%;"></textarea> <script type="text/javascript"> var h2=$H(); h2.set("id",2); h2.set("name","userB"); h2.set("age",30); $("res_hash2").value=h2.toQueryString(); /* id=1&name=userA&age=20 */ </script>
$R=new ObjectRange
指定した範囲のオブジェクトを取得
unknown
$R(start, end[, exclusive=false]) → ObjectRange
始端～終端までの範囲を含むオブジェクトを返します。 new ObjectRange();の短縮形です。
第1引数startに始端、第2引数endに終端を指定します。 終端を範囲に含めない場合は、オプションの第3引数exclusiveにTRUEを指定します。 省略した場合はデフォルトのFALSE（終端を含める）が適用されます。
サンプルを見る<textarea id="res_range" style="width:90%; height:10em;"></textarea>
<script type="text/javascript">
/* 0～5 */
$("res_range").value=$A($R(0, 5)).join(', ')+"\n\n"; /* 0, 1, 2, 3, 4, 5 */
/* 'aa'～'ad' */
$("res_range").value+=$A($R('aa', 'ad')).join(', ')+"\n\n"; /* aa, ab, ac, ad */
/* 含まれるか */
$("res_range").value+=$R(0, 10).include(10)+"\n"; /* true */
$("res_range").value+=$R(0, 10, true).include(9)+"\n"; /* true */
$("res_range").value+=$R(0, 10, true).include(10)+"\n"; /* false */
</script>
$w
ホワイトスペース区切りの文字列から配列を生成
unknown
$w(String) → Array
第1引数Stringには、任意の文字列を指定します。
指定した文字列に、半角スペース（¥s）が混在している場合、半角スペース区切りで分割し、分割した文字列を配列にして返します。
サンプルを見る<!-- 例1 --> <textarea id="res_w" style="width:90%; height:8em;"></textarea> <script type="text/javascript"> $("res_w").value=$w('林檎 蜜柑 梨').inspect()+"\n\n"; $w('林檎 蜜柑 梨').each(function(fruit){ $("res_w").value+="おいしい"+fruit+"\n"; }); </script> <!-- 例2 --> <span id="span1">Span#1</span> <span id="span2">Span#2</span> <span id="span3">Span#3</span> <script type="text/javascript"> $w('span1 span2 span3').each(function(spanID){ with($(spanID).style){ display='block'; backgroundColor='#ff8800'; color='white'; margin='10px'; padding='10px'; width='200px'; } }); </script>
Try.these
成功するまで指定された処理を繰り返すthese
unknown
Try.these(Function[, Funtion, ...]) → firstOKResult
引数に指定した関数を順番にコールし、最初にコールに成功した関数の戻り値を返します。 引数Functionを複数指定する場合はカンマ区切りで指定します。
サンプルを見る<input type="button" value="ダイアログ表示" onclick="fDialog();" />
<script type="text/javascript">
function fDialog(){
return Try.these(
function(){ showModalDialog("http://phpjavascriptroom.com/",window,"status:false;dialogWidth:320px;dialogHeight:240px"); },
function(){ alert("PHP & JavaScript Roomのトップページをごらんください"); }
);
}
</script>
document.getElementsByClassName
指定したクラス名のオブジェクトを配列で取得
unknown
document.getElementsByClassName(className[, element]) → [HTMLElement...]
指定したクラス名を持つ要素の集合を取得します。 第1引数classNameに、クラス名を指定します。
取得する範囲を限定する場合は、オプションの第2引数elementに、要素あるいはID名を指定します。 「要素」を指定した場合、「要素」を親要素とする子要素で指定したクラス名を持つ要素の集合を返します。 「ID名」を指定した場合、指定したID名の要素を親要素とする子要素で指定したクラス名を持つ要素の集合を返します。 第2引数を省略した場合は、body要素内の全要素が対象となります。
サンプルを見る<div id="one" class="foo">Single class name</div>
<div id="two" class="foo bar thud">Multiple class names</div>
<ul id="list">
<li id="item_one" class="thud">List item 1</li>
<li>List item 2</li>
<li id="item_two" class="thud">List item 3</li>
</ul>
<textarea id="res_getelementsbyclassname" style="width:90%;"></textarea>
<script type="text/javascript">
var s="";
s+="fooクラスの数="+document.getElementsByClassName('foo').length+"\n";
s+="thudクラスの数="+document.getElementsByClassName('thud').length+"\n";
s+="div#list内のfhudクラスの数="+document.getElementsByClassName('thud', $('list')).length+"\n";
$("res_getelementsbyclassname").value=s;
/* body要素内のthudクラスを太字に */
var thudObjAll=document.getElementsByClassName("thud");
for(var i=0; i<thudObjAll.length; i++){
thudObjAll[i].style.fontWeight="bold";
}
/* div#list内のthudクラスの背景色を黄色に */
var thudObj=document.getElementsByClassName("thud", $("list"));
for(var i=0; i<thudObj.length; i++){
thudObj[i].style.backgroundColor="yellow";
}
</script>