こんにちわ、ちかです
今日は JavaScript のライブラリとして不動の地位を築いている jQuery の勉強のために、 jQuery 練習フォームを作ってみました。
下記フォームの「スクリプト」テキストエリアにスクリプトを書いて [実行] ボタンを押下すると、この場でスクリプトを実行できます。
※ jQuery のバージョンは 1.6.2 です。私が決めたわけではないのであしからず。
jQuery 練習フォーム
<form>
</form>
練習用の編集要素 (id="practice-area"):
この部分は document.getElementById('practice-area') や $('#practice-area') を使ってアクセスできます。
スクリプト (編集可):
<textarea name="script" rows="10" style="width:100%; box-sizing:border-box; font-family:'Lucida Console',monospace;">$('#practice-area')
.css({'color':'orange', 'cursor':'pointer'})
.click(function (e) { $(this).text('クリックされました。'); })
.text('ここをクリック！')
;
</textarea>
<button onclick="try{this.form.logging.value=eval(this.form.script.value)}catch(e){} return false;">実行</button>
スクリプトの戻り値:
<textarea name="logging" rows="3" style="width:100%; box-sizing:border-box; font-family:'Lucida Console',monospace;"></textarea>
デフォルトスクリプト概説
デフォルトスクリプトが何をやっているか、ちょっとだけ解説します。
$('#practice-area')
.css({'color':'orange', 'cursor':'pointer'})
.click(function (e) { $(this).text('クリックされました。'); })
.text('ここをクリック！')
;
| $('#practice-area') | $([CSSセレクタ文字列]) は [CSSセレクタ文字列] に該当する jQuery オブジェクトを返します。 ここでは "id" 属性値 "practice-area" の要素を持つ jQuery オブジェクトを取得しています。 |
| .css({ ... }) | スタイルを設定 (書き換え) しています。 引数には CSS の属性名と設定値の連想配列を渡します。 |
| .click(function(e){ ... }) | クリックイベントハンドラを登録しています。 ハンドラ関数内では this がイベントを受け取った要素を表します。 $(this) によって、イベントを受け取った要素を持つ jQuery オブジェクトを取得して操作できます。 |
| .text('ここをクリック！') | 要素の内部文字列 (テキストノード) を設定しています。 |
jQuery オブジェクトが持つメソッドの多くは jQuery オブジェクト自身を返すので、 $(selector).method1().method2() ... とつなげて呼び出すことができます。
詳細は下記リファレンスを。
jQuery リファレンス