jQuery を初めてさわろうとすると、最初はちょっと面倒だったりします。簡単な記述ミスで全然動かず、しかも他の言語みたいにエラーではっきり知らせてくれるワケでもないので、最初の一歩でけっこう時間をとられる場合があります。
そこで、簡単に動くサンプルを作ってみました。ダウンロードしてクリックすればすぐに動きます。
- 目次 -
スポンサーリンク
テキスト関連
テキストを入力してボタンをクリックすると、テキストエリアにコピーされます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ <!--- button1 の click 時の処理 ---> $('#button1').click(function () { $('#area1').append($('#text1').val()).append('\n'); }); }); </script> </head> <body> <INPUT id="text1" type="text" value="jquery try" cols=40> <button id="button1" >OK</button> </br></br> <textarea id="area1" cols=40 rows=10></textarea> </body> </html> |
html をダウンロード
（右クリックから保存してください）
解説
jQuery のコードでかならず見かけるのが以下の書きかたです。
|
1 2 3 |
$(function(){ // ここに処理を記述 }); |
これは、次のように書くこともできます。
|
1 2 3 |
$(document).ready(function(){ // ここに処理を記述 }); |
この部分が意味するのは、Document が Ready 状態 になったタイミングで {} の処理を実行する、ということです。
つまり、Ready 状態で実行させたい処理をここに書けばいいわけですが、それは具体的にどんな処理のことでしょうか。ひとことで簡単に言ってしまうと、さまざまな 前準備 となる処理です。
たとえば、ボタンがクリックされたら何をする、とか、テキストが入力されたらどうする、みたいなことを前もってここに記述しておきます。
そうしておけば、ユーザーがなんらかの操作を行った時点で、書かれたとおりの処理が実行されます。
上のサンプルの場合、button1 のクリック 時の処理を記述しています。
css 操作
ボタンをクリックすると箱の色が変わります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ <!--- button1 の click 時の処理 ---> $('#button1').click(function () { $('#div1').css("background-color", "red"); }); <!--- button2 の click 時の処理 ---> $('#button2').click(function () { $('#div1').css("background-color", "green"); }); <!--- button3 の click 時の処理 ---> $('#button3').click(function () { $('#div1').css("background-color", "blue"); }); }); </script> </head> <body> <button id="button1" >RED</button> <button id="button2" >GREEN</button> <button id="button3" >BLUE</button> </br></br> <div id="div1" style="width:60px; height:60px;background-color:#000"></div> </body> </html> |
html をダウンロード
（右クリックから保存してください）
解説
button1、button2、button3 にそれぞれクリック時の処理を登録しています。
以下の処理で、css の値を書きかえています。
|
1 |
$('#div1').css("background-color", "red"); |